Showing axis in WebGL

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?

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.

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.pointLightingLocationUniform, parseFloat(10), parseFloat(-10), parseFloat(10));
        gl.uniform3f(shaderProgram.pointLightingSpecularColorUniform, 1, 1, 1);
        gl.uniform3f(shaderProgram.pointLightingDiffuseColorUniform, 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?

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?

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