Results 1 to 5 of 5

Thread: Showing axis in WebGL

  1. #1
    Junior Member
    Join Date
    Sep 2010
    Posts
    21

    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?

  2. #2
    Senior Member
    Join Date
    May 2010
    Posts
    207

    Re: Showing axis in WebGL

    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.

  3. #3
    Junior Member
    Join Date
    Sep 2010
    Posts
    21

    Re: Showing axis in WebGL

    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.

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

    Code :
            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?

  4. #4
    Junior Member
    Join Date
    Sep 2010
    Posts
    21

    Re: Showing axis in WebGL

    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?

  5. #5

    Re: Showing axis in WebGL

    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

Similar Threads

  1. Compute Units of GTX560 is wrong, showing only 7
    By luizdrumond in forum OpenCL
    Replies: 3
    Last Post: 02-03-2012, 01:15 PM
  2. Rotation about an axis other than 0,0,0
    By akhil in forum OpenGL ES general technical discussions
    Replies: 5
    Last Post: 07-31-2008, 11:54 AM

Posting Permissions

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