Drawing Line Problem in WebGL

Hi,

I encounter some problems on drawing the line with the fourth  and fifth vertices.

I can draw the line with first three vertices correctly using the following setting:

    vertices = vertices.concat([0, 0, 0]);
    vertices = vertices.concat([0, 0, 2]);
    vertices = vertices.concat([2, 0, 0]);
    vertices = vertices.concat([3, 0, 1]);
    vertices = vertices.concat([1, 2, 1]);
    vertices = vertices.concat([1, 2, 5]);

    geometryVertexIndices = geometryVertexIndices.concat([0, 1, 1, 2, 2, 0, 1, 2, 2, 3, 3, 1, 0, 3]);
    unpackedColors = unpackedColors.concat(color);
    unpackedColors = unpackedColors.concat(color);
    unpackedColors = unpackedColors.concat(color);
    unpackedColors = unpackedColors.concat(color);
    unpackedColors = unpackedColors.concat(color);
    unpackedColors = unpackedColors.concat(color);

...


    mvPushMatrix();
    
    gl.bindBuffer(gl.ARRAY_BUFFER, geometryVertexPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, geometryVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

    gl.bindBuffer(gl.ARRAY_BUFFER, geometryVertexColorBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, geometryVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, geometryVertexIndexBuffer);

    gl.lineWidth(5);
    mvPushMatrix();
    setMatrixUniforms();
    gl.drawElements(gl.LINES, geometryVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
    mvPopMatrix();
        
    mvPopMatrix();

However, when I draw the line with the fourth or fifth vertice (see the last index), it shows nothing (draw nothing):

    geometryVertexIndices = geometryVertexIndices.concat([0, 1, 1, 2, 2, 0, 1, 2, 2, 3, 3, 1, 0, 4]);

Is there anything wrong I have made? Can anyone help me to solve the problem? Thanks for your help.

I find out the problem but I’m still not able to solve it and want to find help from here.

The mistake happens when I use the following shader:

<script id="shader-fs" type="x-shader/x-fragment"> 
  #ifdef GL_ES
  precision highp float;
  #endif
 
  varying vec4 vTransformedNormal;
  varying vec4 vPosition;
  
  uniform vec3 uAmbientColor;
 
  uniform vec3 uPointLightingLocation;
  uniform vec3 uPointLightingSpecularColor;
  uniform vec3 uPointLightingDiffuseColor;

  varying vec4 vColor;
  varying vec3 vLightWeighting;
  
  void main(void) {
    vec3 lightWeighting;
    vec3 lightDirection = normalize(uPointLightingLocation - vPosition.xyz);
    vec3 normal = normalize(vTransformedNormal.xyz);
 
      float specularLightWeighting = 0.0;
      float shininess = 32.0;
      if (shininess < 255.0) {
        vec3 eyeDirection = normalize(-vPosition.xyz);
        vec3 reflectionDirection = reflect(-lightDirection, normal);
 
        specularLightWeighting = pow(max(dot(reflectionDirection, eyeDirection), 0.0), shininess);
      }
 
      float diffuseLightWeighting = max(dot(normal, lightDirection), 0.0);
      lightWeighting = uAmbientColor + uPointLightingSpecularColor * specularLightWeighting + uPointLightingDiffuseColor * diffuseLightWeighting;

    gl_FragColor = vec4(vColor.rgb * lightWeighting, vColor.a);
  }
</script>

 <script id="shader-vs" type="x-shader/x-vertex"> 
  attribute vec3 aVertexPosition;
  attribute vec3 aVertexNormal;
  attribute vec4 aVertexColor;

  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;
  uniform mat4 uNMatrix;

  varying vec4 vColor;
  varying vec4 vTransformedNormal;
  varying vec4 vPosition;
  
  void main(void) {
    vPosition = uMVMatrix * vec4(aVertexPosition, 1.0);
    gl_Position = uPMatrix * vPosition;
    vColor = aVertexColor;
    
    vTransformedNormal = uNMatrix * vec4(aVertexNormal, 1.0);
  }
</script>

However, when I replace it with the following:

<script id="shader-fs" type="x-shader/x-fragment">
  #ifdef GL_ES
  precision highp float;
  #endif

  varying vec4 vColor;

  void main(void) {
    gl_FragColor = vColor;
  }
</script>

<script id="shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition;
  attribute vec4 aVertexColor;

  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  varying vec4 vColor;

  void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vColor = aVertexColor;
  }
</script>

It works correctly.

Since I may apply some light effect, I would like to know how can I apply the light effect shader without any error. Is my original shader coding wrong? Can anyone help me?