Question

我已经在片段着色器中实现了点光源而没有任何问题，但我无法使定向光工作。我在相机空间中传递插值法线和插值顶点位置，一切都按照预期的点光照工作。但是，如果我尝试在世界空间中使用位置[0,1,0]的定向光（当它在相机空间中传递给webgl时），它就不起作用。

每当我更改相机的位置或方向时，同一表面上的光强度会发生变化，有时会一直变为黑色。我环顾网络，大部分定向光每像素教程都在实现点光源。不同之处在于，靠近表面的点光将产生热点，而定向光不应该。

<script id="vertex-shader" type="x-shader/x-vertex">
    attribute vec4 a_position;
    attribute vec3 a_normal;
    attribute vec3 a_color;
    attribute vec2 a_uv;

    uniform mat4 u_mvpMatrix;
    uniform mat4 u_mvMatrix;
    uniform mat4 u_mMatrix;
    uniform mat4 u_vMatrix;
    uniform mat4 u_nMatrix;

    varying vec3 v_color;
    varying vec3 v_normal;
    varying vec3 v_vertexPositionCameraSpace;

    void main(){
        gl_Position = u_mvpMatrix * a_position;

        v_color = a_color;
        v_vertexPositionCameraSpace = (u_mvMatrix * a_position).xyz;
        v_normal = (u_nMatrix * vec4(a_normal,0.0)).xyz; // or just use mvMatrix if no scaling;

    }
    </script>
    <script id="fragment-shader" type="x-shader/x-fragment">
    precision mediump float;

    varying vec3 v_color;

    varying vec3 v_normal;
    varying vec3 v_vertexPositionCameraSpace;

    uniform vec3 u_lightPositionCameraSpace;


    void main(){
        vec3 normal = normalize(v_normal);

        vec3 lightDirection = normalize(u_lightPositionCameraSpace); // directional light - doesnt work; light intensity changes with camera movement
        //vec3 lightDirection = normalize(u_lightPositionCameraSpace-v_vertexPositionCameraSpace); // point light - working fine

        float angle = max(dot(lightDirection,normal), 0.0);
        vec3 diffuse = v_color * angle * 1.0;
        gl_FragColor = vec4(diffuse, 1.0);

    }
 </script>

JsFiddle示例：http://jsfiddle.net/6q3mths3/我必须使用缩小版本，否则会太长。鼠标左键+拖动=旋转;鼠标滚轮= zoom / dolly;右键+拖动=平移。如果您在片段着色器中注释掉方向光并用点光源替换，则可以看到点光源正在工作（我认为）。

渲染：

render = function(){
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        var cameraMatrix = camera.cameraMatrix();

        u_lightPositionCameraSpace(v3.mulMat4(tempV3,lightPosition,cameraMatrix));

        u_vMatrix(cameraMatrix);
        u_cameraDirection(camera.dir);
        u_cameraPosition(camera.pos);

        data.objects.forEach(function(o){
            m4.multiply(mvMatrix,cameraMatrix, o.matrix);
            m4.multiply(mvpMatrix,projection,mvMatrix);

            m4.inverse(tempM4,mvMatrix);
            m4.transpose(tempM4,tempM4);
            u_nMatrix(tempM4);

            u_mMatrix(o.matrix);
            u_mvMatrix(mvMatrix);
            u_mvpMatrix(mvpMatrix);
            gl.drawElements(gl.TRIANGLES, o.indices.length,gl.UNSIGNED_SHORT, o.index*2);
        });
};

其中u_lightPositionCameraSpace是一个统一的setter，它在tempV3中传递，tempV3是用cameraMatrix转换[0,1,0]后的向量。（确实是一个视图矩阵）

Webgl每像素定向光

0 个答案: