WebGL Framebuffer with Stencil
Swipe to Move the Cube
This Web page includes both a WebGL stencil and a WebGL Framebuffer. This example applies a Framebuffer with color texture attachment and Renderbuffer depth stencil attachment. The renderer first renders to texture with the Framebuffer.
To render the scene bind the Framebuffer. Clear the stencil, depth, and color buffers. draw the background graphic. Draw the stencil. Draw the cube. Finally unbind the Framebuffer and render a screen sized quad with the rendered texture.
Each side of the cube is texture mapped with a different color. Transparent quadrants of the stencil allow the background graphic to show through the cube. Opaque quadrants display over the cube. See more WebGL stencil examples.