webgl 中渲染到纹理需要用到帧缓冲区,但是同时想使用深度缓冲区和模板缓冲区需要的步骤如下,直接上代码
var width = 800;
var height = 600;
//创建帧缓冲区对象
var frameBuffer = gl.createFramebuffer();
//创建渲染缓冲区对象
var renderbuffer = gl.createRenderbuffer();
//绑定帧缓冲区
gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
//绑定渲染缓冲区
gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
//初始化渲染缓冲区,这里只指定了模板缓冲区,没有指定深度缓冲区
//如果需要深度缓冲区,第二参数可改为 DEPTH_STENCIL,同时 framebufferRenderbuffer 的第二个参数为 DEPTH_STENCIL_ATTACHMENT
gl.renderbufferStorage(gl.RENDERBUFFER, gl.STENCIL_INDEX8, width, height);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.STENCIL_ATTACHMENT, gl.RENDERBUFFER,renderbuffer);
//创建帧缓冲纹理
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
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, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
//附着帧缓冲区的颜色缓冲区
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
想了解模板缓冲区的可以看我转载的一篇博文 WebGL 模板缓冲区