Drawing Line Problem

Hi,

I have a problem in drawing line.

    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]);
    
    geometryVertexIndices = geometryVertexIndices.concat([0, 1, 1, 2, 2, 0, 1, 2, 2, 3, 3, 1]);
    unpackedColors = unpackedColors.concat(color);
    unpackedColors = unpackedColors.concat(color);
    unpackedColors = unpackedColors.concat(color);
    unpackedColors = unpackedColors.concat(color);
    unpackedColors = unpackedColors.concat(color);
    

In this coding, I can draw two triangles successfully in Chrome (use the first four vertices). However, when I change the Index to the following (add one more line [1, 4]):

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

It cannot draw triangles and shows nothing in the Chrome. If I change to the following (using the last vertice):

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

It also shows nothing in the Chrome. I think WebGL cannot draw anything because I use the fifth vertice. May I know how to solve this problem?

Hi,

More information, I also cannot draw the triangle using the fourth and fifth vertices.

For example:

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

gl.drawElements(gl.TRIANGLES, geometryVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);

And my draw function is the following:


    var geometryVertexPositionBuffer = geometryModel.getGeometryVertexPositionBuffer();
    var geometryVertexColorBuffer = geometryModel.getGeometryVertexColorBuffer();
    var geometryVertexIndexBuffer = geometryModel.getGeometryVertexIndexBuffer();

    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.TRIANGLES, geometryVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
    gl.drawElements(gl.LINES, geometryVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);

    mvPopMatrix();
        
    mvPopMatrix();

Can anyone help me to solve the problem? I will use 6 vertices to draw different geometry diagrams.

I find out the problem but I still am 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. Can anyone help me?