Results 1 to 2 of 2

Thread: Lighting and Texture in WebGL

  1. #1
    Member Contributor
    Join Date
    Sep 2010
    Posts
    78

    Lighting and Texture in WebGL

    Hi,

    I try to create some color model with lighting effect and texture without lighting effect. However, I encounter some problems.

    I use the following shader script:
    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>

    However, I find that if I draw the texture, the color model will be black and I see nothing in the scene. If I does not draw the texture, I can see the object. Can you help me to solve the problem? Is there any mistake in shader script?

    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));
     
     
     
            gl.useProgram(shaderProgram);
            drawAxisLine(gl, axis);
     
    //        gl.useProgram(shaderProgramTexture);
    //        drawAxisLetter(gl, axis);

  2. #2
    Super Moderator OpenGL Lord
    Join Date
    Dec 2003
    Location
    Grenoble - France
    Posts
    5,574

    Re: Lighting and Texture in WebGL

    Do you check for every GL error, compile step, link step ?

    Try replacing this line in your texture shader :
    Code :
    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
    By something like this :
    Code :
    gl_FragColor = vec4(1.0,0.0,1.0,1.0);
    You should see the object in bright purple.
    If it is not the case, continue to go up the chain to find the cause.
    It is was indeed purple, then it means the texture access has a problem.
    Verify you set up the texture sampler correctly :
    http://www.opengl.org/wiki/GLSL_:_co...ding_A_Texture
    Verify that you do generate mipmaps (needed by default).

Similar Threads

  1. [webgl] How to move a texture smoothly?
    By moglfun in forum OpenGL: Basic Coding
    Replies: 7
    Last Post: 06-24-2013, 05:51 PM
  2. webgl and compress texture file
    By giugio in forum OpenGL: Basic Coding
    Replies: 1
    Last Post: 07-14-2011, 03:52 PM
  3. webgl,opengl es 2.0 and texture atlas
    By giugio in forum OpenGL: Basic Coding
    Replies: 0
    Last Post: 05-16-2011, 07:40 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
  •  
Proudly hosted by Digital Ocean