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.

Learn 3D Programming with Screen Shots Learn 3D Programming with Screen Shots
Copyright © 2015 Seven Thunder Software. All Rights Reserved.