# Thread: Drawing Line Problem

1. ## 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?

2. ## 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.

3. ## 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>

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>

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?

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•