Question

我的webGL应用中的光源和对象出现问题。在我的＆＃34; drawScene＆＃34;功能，我加载视图端口，清除视图，然后渲染我的光。在我识别出矩阵并渲染我的VBO之后（通过推动和弹出矩阵）。

一旦我加载我的应用程序，光源是正确的，它在对象的顶部

会发生什么

然后我将光源向左移动，并且照明在对象上正确显示

然后是问题所在。我将对象移动到左边，经过光源，但对象上的光线不会移动到对象的右侧

如果我要将光线一直向左移动，只有当光线通过初始起始位置（0,0）时，它才会在物体上发生变化。我认为这是一个推动和弹出矩阵问题，但我已经纠正了代码的架构。光首先渲染，然后调用矩阵，然后调用对象。这可能是我的着色器的问题，但我不知道......这是我的着色器的样子。想想有人可以帮帮我吗？

<script id="shader-fs" type="x-shader/x-fragment"> // Textured, lit, normal mapped frag     shader precision mediump float;
// uniforms from app
uniform sampler2D samplerD; // diffuse texture map
uniform sampler2D samplerN; // normal texture map

uniform vec3 uLightColor;       // directional light color
uniform vec3 uAmbientColor;     // ambient light color

// interpolated values from vertex shader
varying vec2 vTextureCoord;
varying vec3 vLightDir;

void main()
{
    // get the color values from the texture and normalmap
    vec4 clrDiffuse = texture2D(samplerD, vTextureCoord);
    vec3 clrNormal = texture2D(samplerN, vTextureCoord).rgb;

    // scale & normalize the normalmap color to get a normal vector for this texel
    vec3 normal = normalize(clrNormal * 2.0 - 1.0);

    // Calc normal dot lightdir to get directional lighting value for this texel.
    // Clamp negative values to 0.
    vec3 litDirColor = uLightColor * max(dot(normal, vLightDir), 0.0);

    // add ambient light, then multiply result by diffuse tex color for final color
    vec3 finalColor = (uAmbientColor + litDirColor) * clrDiffuse.rgb;   

    // finally apply alpha of texture for the final color to render
    gl_FragColor = vec4(finalColor, clrDiffuse.a);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex"> // Textured, lit, normal mapped vert     shader precision mediump float;
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;       // Texture & normal map coords

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform vec3 uLightDir;         // Application can set desired light direction

varying vec2 vTextureCoord;         // Passed through to frag shader
varying vec3 vLightDir;         // Compute transformed light dir for frag shader

void main(void)
{
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vTextureCoord = aTextureCoord;

    vLightDir = uLightDir;
    vLightDir = normalize(vLightDir);
}
</script>

@MaticOblak

function webGLStart() { ... this.light = new Light(); ... 

function Light() { ... this.create(); ... 

Light.prototype.create = function() {
    gl.uniform3fv(shader.prog.lightDir, new Float32Array([0.0, 0.0, 1.0, 1.0]));
    gl.uniform3fv(shader.prog.lightColor, new Float32Array([0.8, 0.8, 0.8]));
    gl.uniform3fv(shader.prog.ambientColor, new Float32Array([0.2, 0.2, 0.2]));
}

function drawScene() { 

     ... 

     this.light.render(); 

     mat4.identity(mvMatrix); 

     mat4.translate(mvMatrix, [-player.getPosition()[0], -          
     player.getPosition()[1], 0.0]); 

     mat4.translate(mvMatrix, [0,   0, -20.0]);  

     this.world.render();
     this.player.render();

 Light.prototype.render= function() {

gl.uniform3f(shader.prog.lightDir,    
    this.position[0],this.position[1],this.position[2] );
}

移动时，照明不会动态更改对象

0 个答案: