WebGL深度紋理全白色？

Question

我在Chrome中使用WEBGL_depth_texture將場景渲染爲具有顏色和深度紋理的幀緩衝區。當我顯示我的顏色紋理時工作正常，但我的depthtexture全是白色的。它不應該像灰色？

我畫紋理函數：

this.drawTexture = function() { 

    //gl.viewport(0, 0, this.canvas.width, this.canvas.height); 
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 

    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertBuffer); 
    gl.vertexAttribPointer(this.VertexPosition, 2, gl.FLOAT, false, 0, 0); 

    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertTexCoordBuffer); 
    gl.vertexAttribPointer(this.VertexTexture, 2, gl.FLOAT, false, 0, 0); 

    gl.bindTexture(gl.TEXTURE_2D, this.depthTexture); 


    gl.drawArrays(gl.TRIANGLES, 0, 6); 

    gl.bindTexture(gl.TEXTURE_2D, null); 

初始化：

  this.colorTexture = gl.createTexture(); 
     gl.bindTexture(gl.TEXTURE_2D, this.colorTexture); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 

     this.depthTexture = gl.createTexture(); 
     gl.bindTexture(gl.TEXTURE_2D, this.depthTexture); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, size, size, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null); 

     // var framebuffer = gl.createFramebuffer(); 
     this.depthFramebuffer = gl.createFramebuffer(); 
     gl.bindFramebuffer(gl.FRAMEBUFFER, this.depthFramebuffer); 
     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.colorTexture, 0); 
     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, this.depthTexture, 0); 

頂點着色器：

attribute vec2 VertexPosition; 
attribute vec2 TextureCoord; 

varying vec2 vTextureCoord; 

    void main() { 
     gl_Position = vec4(VertexPosition, 0, 1); 
     vTextureCoord = TextureCoord; 
} 

片段着色器

precision highp float; 

uniform sampler2D uSampler; 

varying vec2 vTextureCoord; 

void main(void) { 

    vec4 depth = texture2D(uSampler, vTextureCoord); 
    gl_FragColor = depth; 

} 

Answer 1

您是否啓用了深度測試？

gl.enable(gl.DEPTH_TEST); 

如果不進行深度測試，則不會寫入深度紋理。

如果不是這是一個工作的例子。從它到你的樣本。

<script src="http://greggman.github.com/webgl-fundamentals/webgl/resources/webgl-utils.js"></script> 
<script id="vshader" type="whatever"> 
    attribute vec4 a_position; 
    varying vec2 v_texcoord; 

    void main() { 
     gl_Position = a_position; 
     v_texcoord = a_position.xy * 0.5 + 0.5; 
    } 
</script> 
<script id="fshader" type="whatever"> 
precision mediump float; 
varying vec2 v_texcoord; 
uniform sampler2D u_sampler; 
void main() { 
    vec4 color = texture2D(u_sampler, v_texcoord); 
    gl_FragColor = vec4(color.r, 0, 0, 1); 
} 
</script> 
<canvas id="c" width="300" height="300"></canvas> 

<script> 
var canvas = document.getElementById("c"); 
var gl = getWebGLContext(canvas, {antialias:false}); 
if (!gl) { 
    alert("no WebGL"); 
    return; 
} 

// enable depth textures. 
var depthTextureExtension = gl.getExtension("WEBGL_depth_texture"); 
if (!depthTextureExtension) { 
    alert("depth textures not supported"); 
} 

var program = createProgramFromScripts(
    gl, ["vshader", "fshader"], ["a_position"]); 
gl.useProgram(program); 

var verts = [ 
     1, 1, 1, 
    -1, 1, 0, 
    -1, -1, -1, 
     1, 1, 1, 
    -1, -1, -1, 
     1, -1, 0, 
]; 
var vertBuffer = gl.createBuffer(); 
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer); 
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW); 
gl.enableVertexAttribArray(0); 
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); 

// create a depth texture. 
var depthTex = gl.createTexture(); 
gl.bindTexture(gl.TEXTURE_2D, depthTex); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, 16, 16, 0, 
       gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null); 

// Create a framebuffer and attach the textures. 
var fb = gl.createFramebuffer(); 
gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, 
         gl.TEXTURE_2D, depthTex, 0); 
gl.bindTexture(gl.TEXTURE_2D, null); 
console.log(gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE); 

// use the default texture to render with while we render to the depth texture. 
gl.bindTexture(gl.TEXTURE_2D, null); 

// Turn on depth testing so we can write to the depth texture. 
gl.enable(gl.DEPTH_TEST); 

// Render to the depth texture 
gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 
gl.clear(gl.DEPTH_BUFFER_BIT); 
gl.drawArrays(gl.TRIANGLES, 0, 6); 

// Now draw with the texture to the canvas 
gl.bindFramebuffer(gl.FRAMEBUFFER, null); 
gl.bindTexture(gl.TEXTURE_2D, depthTex); 
gl.drawArrays(gl.TRIANGLES, 0, 6); 


</script> 

，併爲其小提琴：http://jsfiddle.net/greggman/q3ane/

Answer 2

我得到了同樣的問題，解決辦法是線性的深度值。

void main(void) { 
    float n = 1.0; 
    float f = 2000.0; 
    float z = texture2D(uSampler0, vTextureCoord.st).x; 
    float grey = (2.0 * n)/(f + n - z*(f-n)); 
    vec4 color = vec4(grey, grey, grey, 1.0); 
    gl_FragColor = color; 
} 

我試着先把深度值除以2或4，但我對每個像素總是有相同的顏色。所以我認爲問題來自別的地方。我的觀點是，要小心。

來源：http://blog.bongiovi.tw/webgl-depth-texture/