# Drawing Line Problem

• 01-11-2011, 01:18 AM
Phinehas
Drawing Line Problem
Hi,

I have a problem in drawing line.

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]);   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]):

Code :

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

Code :

`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?
• 01-11-2011, 10:43 PM
Phinehas
Re: Drawing Line Problem
Hi,

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

For example:
Code :

```geometryVertexIndices = geometryVertexIndices.concat([0, 1, 4]);   gl.drawElements(gl.TRIANGLES, geometryVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);```

And my draw function is the following:
Code :

``` 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.
• 01-12-2011, 02:11 AM
Phinehas
Re: Drawing Line Problem
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:
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. Can anyone help me?