PDA

View Full Version : Drawing Line Problem in WebGL



Phinehas
01-12-2011, 01:24 AM
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.vertexPositio nAttribute, geometryVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, geometryVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAt tribute, 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.

Phinehas
01-12-2011, 03:16 AM
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?