Javascript WebGL显示帧缓冲区？

我使用了WEBKIT_WEBGL_depth_纹理扩展。 并初始化下面的缓冲区。 但是我怎样才能画出这个帧缓冲区？？我现在完全被困住了-

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);

---

}您不绘制帧缓冲区。你画纹理。因此，首先将纹理附加到帧缓冲区。现在，绑定帧缓冲区后，绘制一些东西，结果被绘制到帧缓冲区的附件中。接下来，解除帧缓冲区的绑定，并使用附加到帧缓冲区的纹理绘制内容

例如：

const gl=document.querySelector（'c'）.getContext（'webgl'）；
常数vshader=`
属性向量4 a_位置；
可变矢量2 v_texcoord；
void main（）{
gl_位置=a_位置；
v_texcoord=a_位置.xy*0.5+0.5；
}    
`;
常数fshader=`
精密中泵浮子；
可变矢量2 v_texcoord；
均匀取样器2D u_取样器；
void main（）{
gl_FragColor=纹理2D（u_采样器，v_texcoord）；
}
`;
//编译着色器、链接程序
const program=twgl.createProgram（gl[vshader，fshader]）；
gl.useProgram（程序）；
const positionLocation=gl.GetAttriblLocation（程序，“a_位置”）；
//从右上到左下到右下的单个三角形
常数垂直=[
1,  1,
-1,  1,
-1, -1,
];   
const vertBuffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，vertBuffer）；
gl.bufferData（gl.ARRAY\u BUFFER、新Float32Array（verts）、gl.STATIC\u DRAW）；
{
常数=2；
常量类型=gl.FLOAT；
常量normalize=false；
常数步长=0；
常数偏移=0；
gl.VertexAttribute指针(
位置、数量、类型、规格化、步幅、偏移）；
gl.EnableVertexAttributeArray（位置位置）；
}
//创建一个空纹理
常量tex=gl.createTexture（）；
gl.bindTexture（gl.TEXTURE_2D，tex）；
{
常数级=0；
const internalFormat=gl.RGBA；
常数宽度=1；
常数高度=1；
常数边界=0；
常量格式=gl.RGBA；
常量类型=gl.无符号字节；
const data=null；
gl.Texamage2D（gl.TEXTURE_2D、级别、内部格式、宽度、高度、边框、，
格式、类型、数据）；
}
//创建帧缓冲区并附加纹理。
const fb=gl.createFramebuffer（）；
gl.bindFramebuffer（gl.FRAMEBUFFER，fb）；
{
常量级别=0
gl.framebufferTexture2D(
gl.FRAMEBUFFER、gl.COLOR_ATTACHMENT0、gl.TEXTURE_2D、tex、level）；
}
//渲染到纹理（使用clear，因为它很简单）
gl.clearColor（0,1,0,1）；//绿色
总账清除（总账颜色缓冲位）；
//现在将纹理绘制到画布上
//注意：我们将画布清除为红色，以便知道
//所以任何显示绿色的地方都来自画布纹理
//从上面。
gl.bindFramebuffer（gl.FRAMEBUFFER，null）；
gl.clearColor（1,0,0,1）；//红色
总账清除（总账颜色缓冲位）；
{
常数偏移=0；
常数计数=3；
总图绘制阵列（总图三角形、偏移、计数）；
}

canvas{边框：1px纯黑；}

JSFIDLE不再工作。这个答案还要求您使用导入一些外部库。如果您想知道如何使用刚刚更新的webgl.updated来实现这一点，那将非常有趣。它仍然使用外部库来编译着色器。你可以读懂为什么。您还可以更详细地阅读此主题