3D Graphics Run Here with WebGL! See

Interactive Online 3D Background Scenes

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

WebGL Techniques Screen Shots
Copyright © 2015 Seven Thunder Software. All Rights Reserved.