In lab today you’ll continue to work on your final project. A progress report is due Wednesday. Demos will be next Tuesday, 8 December from 9am to Noon. I will post a schedule soon.

Spring pre-registration is tomorrow and Wednesday. Enrollment pressures are expected to be high again for CS courses. Please pre-register if you are insterested in taking a CS course in the Spring.

Today we’ll explore how to set up framebuffers in a WebGL2 context with TWGL. Recall from Monday that a frame buffer allows us to redirect the output from the fragment shader to a frame buffer on the GPU that we can later use as a texture. This can be used for any number of effects but is a helpful way of combining model space pipeline rendering methods with screen space methods similar to those of Shadertoy.

The basic steps in setting up a frame buffer application are:

Repeating steps 3 through 6 can make this two pass rendering with a frame buffer an animation loop.

To keep the demo relatively simple, we will have two small programs for each of our rendering passes. In the first rendering pass, we will draw a triangle. In the second rendering pass we will draw a square that fills the canvas. The square will have texture coordinates so we can sample from the texture/frame buffer.

TWGL can handle creating most of the frame buffer and texture objects for us with twgl.createFramebufferInfo. We just need to specify the size of the buffer and what kind of buffers or attachments we want. A common use case is to have a color buffer and a depth buffer. The texture will contain the data from the color buffer.

To render to the framebuffer, we first make it active with a call to twgl.bindFramebufferInfo(gl, frameBufferInfo). To render to the screen again, we call twgl.bindFramebufferInfo(gl) with no framebuffer. There is some periodic resizing of the viewport--the output size of the fragment shader. TWGL will automatically resize the viewport to the size of the texture on bindFramebufferInfo, but we call twgl.resizeCanvasToDisplaySize(gl.canvas) to revert back to the full screen size for the second pass.

In the second pass, we can use the texture associated with the frameBufferInfo object as our u_texture sampler. This is stored as frameBufferInfo.attachments[0] in TWGL, though this is poorly documented. Some breakpoints and reading the TWGL source helped figure this out.

You should have received a link for a course survey from Qualtrics. Your feedback is appreciated.