Something odd

Hi,
There is something odd with the following JS code:

[b]var GL = null;
var Program = null;

FragmentShaderCode=
‘void main(void) {’+
’ gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);’+
‘}’;

VertexShaderCode=
‘attribute vec3 VertexPos;’+
‘void main(void) {’+
’ gl_Position = vec4(VertexPos.x, VertexPos.y, VertexPos.z, 1.0);’+
‘}’;

function Init()
{
var Canvas = document.getElementById(‘GL-canvas’);

try {GL = Canvas.getContext(‘experimental-webgl’);}
catch(E) {alert('Exception catched in getContext: '+E.toString()); return;}
if (!GL) {alert(‘Unable to create Web GL context’); return;}
GL.ViewportWidth = Canvas.width;
GL.ViewportHeight = Canvas.height;

var FShader = GL.createShader(GL.FRAGMENT_SHADER);
GL.shaderSource(FShader, FragmentShaderCode);
GL.compileShader(FShader);
if (!GL.getShaderParameter(FShader, GL.COMPILE_STATUS))
{alert('Error during fragment shader compilation:
’ + GL.getShaderInfoLog(FShader)); return;}

var VShader = GL.createShader(GL.VERTEX_SHADER);
GL.shaderSource(VShader, VertexShaderCode);
GL.compileShader(VShader);
if (!GL.getShaderParameter(VShader, GL.COMPILE_STATUS))
{alert('Error during vertex shader compilation:
’ + GL.getShaderInfoLog(VShader)); return;}

Program = GL.createProgram();
GL.attachShader(Program, FShader);
GL.attachShader(Program, VShader);
GL.linkProgram(Program);
if (!GL.getProgramParameter(Program, GL.LINK_STATUS))
{alert('Error during program linking:
’ + GL.getProgramInfoLog(Program)); return;}

GL.validateProgram(Program);
if (!GL.getProgramParameter(Program, GL.VALIDATE_STATUS))
{alert('Error during program validation:
’ + GL.getProgramInfoLog(Program)); return;}
GL.useProgram(Program);

GL.clearColor(0.0, 0.0, 0.0, 1.0);
GL.enable(GL.DEPTH_TEST);

Draw();
}

function Draw()
{
GL.viewport(0, 0, GL.ViewportWidth, GL.ViewportHeight);
GL.clear(GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT);

var Vertex = [-0.5, -0.5, 0.0];
Vertex = Vertex.concat([-0.5, 0.5, 0.0]);
Vertex = Vertex.concat([0.5, 0.5, 0.0]);
Vertex = Vertex.concat([0.5, -0.5, 0.0]);

// var Index = [0, 1, 2, 3]; <— This works
var Index = [3, 2, 1, 0];

var PosAttrib = GL.getAttribLocation(Program, ‘VertexPos’);
if (PosAttrib == -1)
{alert(‘Error during position attribute address retrival’); return;}
GL.enableVertexAttribArray(PosAttrib);

var VertexBuffer = GL.createBuffer();
var IndexBuffer = GL.createBuffer();

GL.bindBuffer(GL.ARRAY_BUFFER, VertexBuffer);
GL.bufferData(GL.ARRAY_BUFFER, new Float32Array(Vertex), GL.STATIC_DRAW);
GL.vertexAttribPointer(PosAttrib, 3, GL.FLOAT, false, 0, 0);

GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, IndexBuffer);
GL.bufferData(GL.ELEMENT_ARRAY_BUFFER, new Uint16Array(Index), GL.STATIC_DRAW);
GL.drawElements(GL.LINE_LOOP, Index.length, GL.UNSIGNED_SHORT, 0);

// This also works!
// --------------------------------
// Vertex = [0.5, -0.5, 0.0];
// Vertex = Vertex.concat([0.5, 0.5, 0.0]);
// Vertex = Vertex.concat([-0.5, 0.5, 0.0]);
// Vertex = Vertex.concat([-0.5, -0.5, 0.0]);
// GL.drawArrays(GL.LINE_LOOP, 0, Vertex.length / 3);

GL.flush();
}[/b]

Now, all I’m trying to do here is to draw a 2D simple square using drawElements.
First I put the 4 vertices in the buffer and I call drawElements with LINE_LOOP and the indices 3, 2, 1, 0. The result is not a square - one edge is missing.

The odd thing is that if I change the indices order to 0, 1, 2, 3 it works.
It also works if I use drayArrays with both vertices order.

Can someone please help me with this one?