webGL渲染到纹理深度测试失败

Question

我在渲染阴影贴图时启用了gl.DEPTH_TEST。 我使用rgb包装获取深度信息。 当我将场景渲染到阴影贴图中时，深度测试不起作用。 一些较近的物体被绘制在一些较近的物体上。

阴影贴图着色器：

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

        const float basis = 128.0;

        varying vec4 vPosition;

        void main(void) {
            float z = vPosition.z / vPosition.w;

            float x = floor(z * (basis * basis * basis - 1.0));
            float b = floor(mod(x,basis)) / basis;
            x = floor(x / basis);
            float g = floor(mod(x,basis)) / basis;
            x /= basis;
            float r = floor(mod(x,basis)) / basis;
            x /= basis;

            gl_FragColor = vec4(r,g,b,1.0);
        }
    </script>
    <script id="shadow-shader-vs" type="x-shader/x-vertex">
        attribute vec3 aVertexPosition;

        uniform mat4 uMVMatrix;
        uniform mat4 uPMatrix;

        varying vec4 vPosition;

        void main(void) {
            vPosition = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
            gl_Position = vPosition;
        }
    </script>

出来了： a Chess 3D

一个棋子在国王面前呈现。

设置代码：

function SpotLight(gl,loc,dir,minCos,col,en) {
this.location = loc;
this.direction = dir;
this.minCos = minCos;
this.color = col;
this.enabled = en;
this.pMatrix = mat4.create();
this.mvMatrix = mat4.create();
this.childMatrixStack = new MatrixStack(30);

this.frameBuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer);
this.frameBuffer.width = 512;
this.frameBuffer.height = 512;

this.shadowMap = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D,this.shadowMap);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.frameBuffer.width, this.frameBuffer.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);

this.renderBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, this.frameBuffer.width, this.frameBuffer.height);

gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.shadowMap, 0);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this.renderbuffer);

gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

}