WebGL Framebuffers

This article is meant to try to give you a mental image of what a framebuffer is in WebGL. Framebuffers come up as they allow you to render to a texture. A ... English Français 日本語 한국어 Polski Portuguese Русский 简体中文 TableofContents WebGLFundamentals.org Fix,Fork,Contribute WebGLFramebuffers Thisarticleismeanttotrytogiveyouamentalimage ofwhataframebufferisinWebGL.Framebufferscomeup astheyallowyoutorendertoatexture. AFramebufferisjustacollectionofattachments.That'sit!Itis usedtoallowrenderingtotexturesandrenderbuffers. YoucanthinkofaFramebufferobjectlikethis classFramebuffer{ constructor(){ this.attachments=newMap();//attachmentsbyattachmentpoint } } AndtheWebGLRenderingContext(theglobject)likethis //pseudocode gl={ framebuffer:defaultFramebufferForCanvas, } Thereisonly1bindingpointinWebGL1.Itissetlikethis gl.bindFramebuffer(target,framebuffer){ framebuffer=framebuffer||defaultFramebufferForCanvas;//ifnullusecanvas switch(target){ case:gl.FRAMEBUFFER: this.framebufferBinding=framebuffer; break; default: ...error... } } Youcanaddattachmentstoaframebuffervia2functions,framebufferTexture2D, andframebufferRenderbuffer. Wecanimaginetheirimplementationtobesomethinglike //pseudocode 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 }); } IfyouhaveandenabletheWEBGL_draw_buffers extensionthenaFramebufferconceptuallyexpandstothis classFramebuffer{ constructor(){ this.attachments=newMap(); +this.drawBuffers=[gl.COLOR_ATTACHMENT0,gl.NONE,gl.NONE,gl.NONE,...]; } } Youcansetthedrawingbufferarraywithgl.drawBufferswhichwecan imagineisimplementedlikethis //pseudocode ext.drawBuffersWebGL(drawBuffers){ constframebuffer=gl._getFramebufferByTarget(gl.FRAMEBUFFER); for(leti=0;icodegoeshereforcodeblocks commentspoweredbyDisqus