WebGL顯示framebuffer？

Question

我使用了WEBKIT_WEBGL_depth_texture擴展。 並初始化下面的緩衝區。 但我怎麼能夠畫出這個幀緩衝？我現在總被困住了。 -.-

function InitDepthtextures(){ 


var size = 256; 

// Create a color texture 
var colorTexture = gl.createTexture(); 
gl.bindTexture(gl.TEXTURE_2D, 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); 

// Create the depth texture 
depthTexture = gl.createTexture(); 
gl.bindTexture(gl.TEXTURE_2D, 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); 

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


//set to default 
gl.bindTexture(gl.TEXTURE_2D, null); 
gl.bindFramebuffer(gl.FRAMEBUFFER, null); 

}

Answer 1

你不畫的幀緩衝區。你畫紋理。所以，首先你將紋理附加到framebuffer。現在，利用該幀緩衝區畫出一些東西，結果將被拖入幀緩衝區的附件中。接下來取消綁定framebuffer並使用附加到framebuffer的紋理繪製某些內容以查看其內容。

例子：

<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() { 
    gl_FragColor = texture2D(u_sampler, v_texcoord); 
} 
</script> 
<canvas id="c" width="400" height="400"></canvas> 
<script> 
var canvas = document.getElementById("c"); 
var gl = getWebGLContext(canvas); 
if (!gl) { 
    alert("no WebGL"); 
    return; 
} 

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

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

// create an empty texture 
var tex = gl.createTexture(); 
gl.bindTexture(gl.TEXTURE_2D, tex); 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 

// Create a framebuffer and attach the texture. 
var fb = gl.createFramebuffer(); 
gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0); 

// Render to the texture (using clear because it's simple) 
gl.clearColor(0, 1, 0, 1); // green; 
gl.clear(gl.COLOR_BUFFER_BIT); 

// Now draw with the texture to the canvas 
// NOTE: We clear the canvas to red so we'll know 
// we're drawing the texture and not seeing the clear 
// from above. 
gl.bindFramebuffer(gl.FRAMEBUFFER, null); 
gl.clearColor(1, 0, 0, 1); // red 
gl.clear(gl.COLOR_BUFFER_BIT); 
gl.drawArrays(gl.TRIANGLES, 0, 6); 
</script> 

，這裏是一個小提琴http://jsfiddle.net/greggman/AYqEy/