Create a set field of arrows in X3D(OM)

Question

I know that you can create one arrow by appending a cone to the end of a cynlinder. Something like this:

<Shape>
<Cylinder DEF='ArrowCylinder' radius='.025' top='false'/> 
<Appearance DEF='Green'>
<Material diffuseColor='.1 .6 .1' emissiveColor='.05 .2 .05'/>
</Appearance>
</Shape> 
<Transform translation='0 1 0'>
<Shape>
<Cone DEF='ArrowCone' bottomRadius='.05' height='.1'/> 
<Appearance USE='Green'/>
</Shape>
</Transform>

What if instead I want to show something like a glyph/vector field with X3DOM? Clearly creating an entire set of arrows where each arrow is defined like this won't be an elegant solution...

Answer 1

One method might be you style/build your own arrow by using IndexedFaceSet node, then group it with an id, alternatively you can also group a set of arrows, under one id of course: Here is an (2-D) example:

<x3d width="400px" height="400px">
  <scene>
    <group id="arrow">      
        <shape>
          <appearance>
            <material diffuseColor="0.25 0.75 0.755"></material>
          </appearance>
          <IndexedFaceSet solid="false" coordIndex="0 1 2 3 0 -1">
            <coordinate point="0 0 0 1 0 0 1 1 0 0 1 0">
            </coordinate>
          </IndexedFaceSet>
        </shape>
      <shape>
        <appearance>
          <material diffuseColor="0.25 0.75 0.755"></material>
        </appearance>
        <IndexedFaceSet solid="false" coordIndex="0 1 2 3 0 -1">
          <coordinate point="1 -0.5 0 2 0.5 0 2 0.5 0 1 1.5 0">
          </coordinate>
        </IndexedFaceSet>
      </shape>
    </group>
  </scene>
</x3d>

One big benefit would be that you reduce the amount of points/draws a lot, thus you gain performance, if you use massive amount of arrows.