Results 1 to 2 of 2

Thread: Drawing Line Problem in WebGL

  1. #1
    Member Contributor
    Join Date
    Sep 2010
    Posts
    78

    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:
    Code :
        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):

    Code :
        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.

  2. #2
    Member Contributor
    Join Date
    Sep 2010
    Posts
    78

    Re: Drawing Line Problem in WebGL

    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:

    Code :
    <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:
    Code :
    <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?

Similar Threads

  1. Problem regarding line drawing
    By qqtolene in forum OpenGL: Basic Coding
    Replies: 0
    Last Post: 10-19-2017, 02:04 AM
  2. Problem of drawing line
    By wexuv in forum OpenGL: Advanced Coding
    Replies: 5
    Last Post: 01-10-2006, 02:04 PM
  3. problem of drawing line
    By wexuv in forum OpenGL: User Software
    Replies: 1
    Last Post: 01-09-2006, 06:45 PM
  4. Line Drawing Problem
    By djavan in forum OpenGL: Basic Coding
    Replies: 2
    Last Post: 03-18-2003, 08:08 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Proudly hosted by Digital Ocean