PDA

View Full Version : Showing axis in WebGL



Phinehas
02-23-2011, 04:55 AM
Hi,

I want to show the input box and allow users to input the rotation value and translation value to update the model. However, I think users does not know where is X, Y, Z axis. Is it possible to show the X, Y, Z axis in WebGL and how to show them correctly? Is there any existing functions?

SteveBaker
02-24-2011, 02:43 PM
No, there is no function for that. I usually use my art tools (blender, Maya, etc) to make a 3D model called a "gnomon" (three arrows, one red, one green and one blue that are at right angles to each other with the red one pointing in the X direction, green in Y and blue in Z) - then write code to display that at the origin or at zero height at the center of the screen on a particular key press.

I can use the same thing to pop up a plain white sphere at the same location to check light source directions.

But you have to do it yourself, there is nothing build-in to do it.

Phinehas
02-24-2011, 06:42 PM
Yes, so I try to draw the axis. However, I encounter some problems and I think it is becasue of the mistake in shader script.

I use 2 shader scripts to generate the model (one for color and one for texture). It is nice if I only draw the color mode.


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

<script id="shader-fs-texture" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif

varying vec2 vTextureCoord;

uniform sampler2D uSampler;

void main(void) {
gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}
</script>

<script id="shader-vs-texture" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

varying vec2 vTextureCoord;


void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureCoord;
}
</script>

When I draw the line (x, y, z axis) and texture (x, y, z letter), it draws nothing. When I remove the lighting effect and use the shader scripts without lighting effect, it draws the model and axis correctly.


gl.uniform3f(shaderProgram.ambientColorUniform, parseFloat(0.4), parseFloat(0.4), parseFloat(0.4));
gl.uniform3f(shaderProgram.pointLightingLocationUn iform, parseFloat(10), parseFloat(-10), parseFloat(10));
gl.uniform3f(shaderProgram.pointLightingSpecularCo lorUniform, 1, 1, 1);
gl.uniform3f(shaderProgram.pointLightingDiffuseCol orUniform, parseFloat(1), parseFloat(1), parseFloat(1));

mvPushMatrix();
gl.useProgram(shaderProgram);
drawAxisLine(gl, axis);

gl.useProgram(shaderProgramTexture);
drawAxisLetter(gl, axis);

Is there anything wrong in my shader script or other place? Can you help me to solve it?

Phinehas
02-24-2011, 07:23 PM
I have tried different orders to enable the lighting effect. And I find one thing:
It cannot draw the line in the scene. But other objects such as color model and texture can be showed correctly.

For example, I execute gl.uniform3f(...) after loadIdentity(); and it will show the scene as I description above.

Is there any method of drawing the line correctly?

aleksandar.xyz
02-25-2011, 11:14 AM
You can use my my model. Its a low-poly gnomon with RGB colors baked in vertex normals. You can ignore vertexNormals and texCoords. Also, you will need a shader that displays flat vertex color.
http://chrysaora.com/meshes/axis.json
It is a triangulated ELEMENT_ARRAY_BUFFER