WebGL 帧缓冲

你可以通过2 个函数添加attachments 到一个帧缓冲， framebufferTexture2D 和 framebufferRenderbuffer 。

我们可以想象它们的实现是这样的. // 伪代码; gl. English Français 日本語 한국어 Polski Portuguese Русский 简体中文 目录 WebGLFundamentals.org Fix,Fork,Contribute WebGL帧缓冲 本文旨在尝试让你对WebGL中的帧缓冲有一个心理印象。

帧缓冲的出现是为了让你可以渲染到纹理。

一个帧缓冲只是一个attachments的集合。

仅此而已！它是用来允许渲染到纹理或渲染到渲染缓冲中的。

你可以认为一个帧缓冲对象是这样的 classFramebuffer{ constructor(){ this.attachments=newMap();//按attachmentpoint排列的attachments } } 而WebGLRenderingContext(即gl对象)就像这样 //伪代码 gl={ framebuffer:defaultFramebufferForCanvas, } 帧缓冲有2个绑定点。

它们可以这样设置 gl.bindFramebuffer(target,framebuffer){ framebuffer=framebuffer||defaultFramebufferForCanvas;//如果是null则使用canvas switch(target){ case:gl.FRAMEBUFFER: this.framebufferBinding=framebuffer; break; default: ...error... } } 你可以通过2个函数添加attachments到一个帧缓冲，framebufferTexture2D和framebufferRenderbuffer。

我们可以想象它们的实现是这样的 //伪代码 gl._getFramebufferByTarget(target){ switch(target){ casegl.FRAMEBUFFER: returnthis.framebufferBinding; } } gl.framebufferTexture2D(target,attachmentPoint,texTarget,texture,mipLevel){ constframebuffer=this._getFramebufferByTarget(target); framebuffer.attachments.set(attachmentPoint,{ texture,texTarget,mipLevel, }); } gl.framebufferRenderbuffer(target,attachmentPoint,renderbufferTarget,renderbuffer){ constframebuffer=this._getFramebufferByTarget(target); framebuffer.attachments.set(attachmentPoint,{ renderbufferTarget,renderbuffer }); } 如果你开启了WEBGL_draw_buffers 扩展，那么一个Framebuffer在概念上会扩展为 classFramebuffer{ constructor(){ this.attachments=newMap(); +this.drawBuffers=[gl.COLOR_ATTACHMENT0,gl.NONE,gl.NONE,gl.NONE,...]; } } 你可以用gl.drawBuffers设置绘制缓冲数组，我们可以将它想象成是这样实现的 //伪代码 ext.drawBuffersWebGL(drawBuffers){ constframebuffer=gl._getFramebufferByTarget(gl.FRAMEBUFFER); for(leti=0;i