WebGL Framebuffer with Stencil

Swipe over the canvas 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.

More WebGL Stencil Examples

Copyright © 2015 Seven Thunder Software. All Rights Reserved.