How to work with framebuffers in webgl? - Stack Overflow

A fragment shader outputs to either the canvas or the attachments in a framebuffer. To be more terse a fragment shader outputs to a texture (internally to WebGL ... 2022DeveloperSurveyisopen!Takesurvey. Home Public Questions Tags Users Companies Collectives ExploreCollectives Teams StackOverflowforTeams –Startcollaboratingandsharingorganizationalknowledge. CreateafreeTeam WhyTeams? Teams CreatefreeTeam Collectives™onStackOverflow Findcentralized,trustedcontentandcollaboratearoundthetechnologiesyouusemost. Learnmore Teams Q&Aforwork Connectandshareknowledgewithinasinglelocationthatisstructuredandeasytosearch. Learnmore Howtoworkwithframebuffersinwebgl? AskQuestion Asked 5years,4monthsago Modified 1year,10monthsago Viewed 10ktimes 4 2 IhavebeentryingtounderstandframebufferinWebGL/OpenGL-ES. Iknowthatwecanblendmultipletexturesusingframebuffer. So,tounderstandthatIwroteasamplebytakinga1*1textureandtriedtoapplyframebufferlogicontopofit. But,itdidn'twork. Seesnippetatbottom,ifyouclickon"mixredandblue",theimagesdoesn'tgetrendered,amIdoinganythingwrong? Code: ` varcanvas,gl,attrPosition,texture,program,vertexBuffer,textureBuffer,vertices,texVertices,attrPos,attrTexPos,textures=[],framebuffers=[]; canvas=document.getElementById('canvas'); gl=getWebGL(); vertices=newFloat32Array([ -1.0,-1.0, 1.0,-1.0, 1.0,1.0, -1.0,1.0, -1.0,-1.0, ]); texVertices=newFloat32Array([ 0.0,0.0, 1.0,0.0, 1.0,1.0, 0.0,1.0, 0.0,0.0 ]); vargetProgram=function(){ varvs=createVertexShader([ 'attributevec2attrPos;', 'attributevec2attrTexPos;', 'varyinghighpvec2vTexCoord;', 'voidmain(){', '\tgl_Position=vec4(attrPos,0.0,1.0);', '}' ].join('\n')); varfs=createFragmentShader([ 'varyinghighpvec2vTexCoord;', 'uniformsampler2DuImage;', 'voidmain(){', '\tgl_FragColor=texture2D(uImage,vTexCoord);', '}' ].join('\n')); returncreateAndLinkPrograms(vs,fs); }; varrender=function(){ gl.clear(gl.DEPTH_BUFFER_BIT|gl.COLOR_BUFFER_BIT); gl.bindTexture(gl.TEXTURE_2D,texture); gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer); gl.vertexAttribPointer(attrPos,2,gl.FLOAT,gl.FALSE,0,0); gl.bindBuffer(gl.ARRAY_BUFFER,textureBuffer); gl.vertexAttribPointer(attrTexPos,2,gl.FLOAT,gl.FALSE,0,0); gl.drawArrays(gl.TRIANGLE_STRIP,0,5); }; if(gl){ gl.clearColor(0.1,0.5,1.0,1.0); render(); program=getProgram(); texture=createAndSetupTexture(); vertexBuffer=createAndBindBuffer(vertices,gl.ARRAY_BUFFER); attrPos=gl.getUniformLocation(program,'attrPos'); gl.enableVertexAttribArray(attrPos); textureBuffer=createAndBindBuffer(texVertices,gl.ARRAY_BUFFER); attrTexPos=gl.getUniformLocation(program,'attrTexPos'); gl.enableVertexAttribArray(attrTexPos); gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,1,1,0,gl.RGBA,gl.UNSIGNED_BYTE,newUint8Array([123,0,60,255])); render(); } varinitPingPongTextures=function(textures,framebuffers){ for(vari=0;i<2;++i){ vartex=createAndSetupTexture(gl); textures.push(tex); //makethetexturethesamesizeastheimage gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,1,1,0,gl.RGBA,gl.UNSIGNED_BYTE,null); //Createaframebuffer varfbo=gl.createFramebuffer(); framebuffers.push(fbo); gl.bindFramebuffer(gl.FRAMEBUFFER,fbo); //Attachatexturetoit. gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D,tex,0); } } varsetFramebuffer=function(fbo,width,height){ gl.bindFramebuffer(gl.FRAMEBUFFER,fbo); gl.viewport(0,0,width,height); }; varmixRedAndBlue=function(){ gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,texture); setFramebuffer(framebuffers[0],1,1); gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,1,1,0,gl.RGBA,gl.UNSIGNED_BYTE,newUint8Array([255,0,0,255])); render(); gl.bindTexture(gl.TEXTURE_2D,textures[0]); setFramebuffer(framebuffers[1],1,1); gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,1,1,0,gl.RGBA,gl.UNSIGNED_BYTE,newUint8Array([0,255,0,255])); render(); gl.bindTexture(gl.TEXTURE_2D,textures[1]); setFramebuffer(null,1,1); render(); };` vargetWebGLContext=function(canvas){ varwebglContextParams=['webgl','experimental-webgl','webkit-3d','moz-webgl']; varwebglContext=null; for(varindex=0;indexMixRedandblue