PDA

View Full Version : Drawing Line Problem

Phinehas
01-11-2011, 02:18 AM
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?

Phinehas
01-11-2011, 11:43 PM
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.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.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.

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

#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:

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