Exhibit #0: Creating and Using a Framebuffer Object

A framebuffer object (FBO) allows WebGL programmer to render images to other memory location other than the default framebuffer. Exhibit0CreatingandUsingaFramebufferObject Post-processingfilter: CopyPixels BlurinXdirection BlurinYdirection ConverttosRGB WhatAreWeDoing? Aframebufferobject(FBO)allowsWebGLprogrammertorenderimagestoothermemory locationotherthanthedefaultframebuffer. Rememberthejargonsfromthefirstlecture: Buffer="aregionofphysicalmemoryusedtotemporarilystoredata" (accordingWikipedia). Inourcontext,abuffermostlyresidesintheGPU. Framebuffer=abufferthatholdstheimagethatisdisplyaedonthemonitor. WithanFBO,youcanaskWebGLtorendertoreceiversotherthanthemonitor: Textures:Wearealreadyfamiliarwiththis. Renderbuffers:Sameastexturesbutsupportfeweroperations. YoucannotuseWebGLcommandstoreadanythingfromarenderbuffer. Youcannotaccessarenderbufferinashader. TheyonlyserveastargetsforrenderedimagesandmustbeusewithanFBO. However,theyarelessofahassletomaintainthanatexture. AnFBOallowsforpost-processingofrenderedimages. Rendera3Dscenetoatexture. Operateontherenderedimagewithanothershader. TocreateanFBO,usethegl.createFramebufferObject()command. YouonlyneedoneFBOmostofthetime,sothiscommandisonlycalledonceinanapplication. varfbo=gl.createFramebuffer(); Here'showtorendertoatextureratherthanthemonitor: //Step1:BindtheFBO. gl.bindFramebuffer(gl.FRAMEBUFFER,fbo); //Step2:AttachthetexturetotheFBO. gl.framebufferTexture2D( //Firstargumentisalwaysgl.FRAMEBUFFER gl.FRAMEBUFFER, //Thesecondargumentindicatesthe"attachmentslot"oftheFBO. //Basically,itindicatesthefunctionofthetexturethatyouareattaching. //gl.COLOR_ATTACHMENT0meansthatthetexturewillserveasthezerothcolorbuffer. //Bydefault,thisistheonlycolorbufferattachmentslotofthatyoucanuseinvaniallyWebGL. //Touseothercolorbufferattachmentslot,youneedanextension.(Wewillcoverthislater.) gl.COLOR_ATTACHMENT0, //Thethirdargumentindicatesthekindoftextureweareattaching. //SinceweareattachingaTEXTURE_2D,wegiveitgl.TEXTURE_2D gl.TEXTURE_2D, //Thefourthargumentisthetexturethatyouwanttoattach. //Ofcourse,thismustbecreatedbeforehand. renderTexture, //Thefifthargumentisthemipmaplevelofthetexture. //Thisisalways0. 0 ); //Step3:Doyourrenderingasusual. { gl.clearColor(0.75,0.75,0.75,1.0); gl.clear(gl.COLOR_BUFFER_BIT); // //Codeomittedforbrevity. // //Step4:Flushthebufferjusttobesureeverythingisrenderedtothetexture. gl.flush(); } //Step4:Detachthetexture. //UsethesameargumentsasthecommandinStep2,butnowthetextureisnull. gl.framebufferTexture2D( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, null,//nulltexturemeanswearedetaching. 0); //Step5:UnbindtheFBO. gl.bindFramebuffer(gl.FRAMEBUFFER,null); InLecture7,welearnedhowtocreateatexturefromanimage. However,therenderTextureweusedaboveisnotcreatedfromanimage. Itisoriginallyablanktexture. Tocreateablanktextureisaslightlydifferentfromcreatingatexturefromanimage. EverythingisthesameexceptfortheuseofthetexImage2Dcommand. functioncreateFloatTexture(gl,width,height){ vartexture=gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D,texture); gl.texImage2D( //Alwaysgl.TEXTURE_2Dfora2Dtexture. gl.TEXTURE_2D, //Mipmaplevel.Always0. 0, //Internalformatofeachpixel.HerewewantanRGBAtexture. gl.RGBA, //Widthofthetexture. width, //Heightofthetexture. height, //Widthoftheborderofthetexture.Always0. 0, //ThepixelformatofthedatathatisgoingtobeuploadedtotheGPU. //Wehavenodatahere,sousesomethingthatmatchestheinternalformat. gl.RGBA, //Thetypeofeachcomponentofthepixelthatisgoingtobeuploaded. //Herewewantafloatingpointtexture. gl.FLOAT, //Thedatathatisgoingtobeuploaded. //Wedon'thaveanydata,sowegivenull. //WebGLwilljustallocatethetextureandleaveitblank. null ); 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.bindTexture(gl.TEXTURE_2D,null); returntexture; } varrenderTexture=createFloatTexture(gl,512,512); Withthecommandabove,wecreateatexturewhosepixelcomponentsarestoredasfloatingpoint numbers. ThisisnotafeaturesupportedbyvanillaWebGL. WeneedWebGLextensionstouseit,andhereishowtoenabletheextensions: vargl=initializeWebGL($("#webglCanvas")); gl.getExtension("OES_texture_float"); gl.getExtension("OES_texture_float_linear"); Therearetwoextensionsthatweenabled. OES_texture_floatallowsfloatingpointtextures. OES_texture_float_linearallowsgl.LINEARtobespecified asTEXTURE_MAG_FILTERandTEXTURE_MIN_FILTERparameters offloatingpointtextures.