How to allow 180 degree angles in X3DOM IndexedFaceSet

Question

I'm trying to make a simple planar 2D shape in X3DOM, but since the coordinates are autogenerated, some of them are on a straight line, and X3DOM seems to fail in this case. A trivial example is below. What am I doing wrong here?

<X3D width='800px' height='600px'>
<Scene>
<Viewpoint description='Front view' orientation='0 1 0 1.57' position='8 0 0'/> 
<Shape DEF='Front'>
<IndexedFaceSet coordIndex='0 1 2 3' solid='false', convex='false'>
<Coordinate DEF='Points' point='
1 1 1
1 1 2
1 1 3
1 1 4
2 1 4
2 1 3
2 1 2
2 1 1
1 1 1'/> 
</IndexedFaceSet>
<Appearance>
<Material diffuseColor="0 0 1" specularColor=".5 .5 .5" DEF="edgecolour" />
</Appearance>

</Shape> </Scene>
</X3D> 

This works fine if I cut out the middle 4 points (1 1 3, 1 1 4, 2 1 4, 2 1 3), but I can't easily change this in my script (the real shapes are much more complex)

Answer 1

First of all, the x3d snippet you posted was malformed:

<IndexedFaceSet coordIndex='0 1 2 3' solid='false', convex='false'>
                                                  ^

Second, your IndexedFaceSet only uses the first 4 coordinates of the Coordinate node:

coordIndex='0 1 2 3'

And the first 4 point only make a straight line, which is invisible as a Face (Area of 0, nothing to render). Only Z changes:

1 1 1
1 1 2
1 1 3
1 1 4

But after adding all points to the coordIndex of the IndexedFaceSet and setting convex to true my X3D viewer was able to render a blue rectangle:

<?xml version="1.0" encoding="UTF-8"?>
<X3D>
    <Scene>
        <Viewpoint description='Front view' orientation='0 1 0 1.57' position='8 0 0'/> 
        <Shape DEF='Front'>
            <IndexedFaceSet coordIndex='0 1 2 3 4 5 6 7' solid='false' convex='true'>
                <Coordinate DEF='Points' point='
                1 1 1
                1 1 2
                1 1 3
                1 1 4
                2 1 4
                2 1 3
                2 1 2
                2 1 1
                1 1 1'/> 
            </IndexedFaceSet>
            <Appearance>
                <Material diffuseColor="0 0 1" specularColor=".5 .5 .5" DEF="edgecolour" />
            </Appearance>
        </Shape>
    </Scene>
</X3D>

Hope that helps :)