3D Graphics Display Here with WebGL

Read WebGL E-Books

WebGL Alpha Stencil Plus Graphics Overlay

Swipe Over the Canvas to Move the Cube

This Web page demonstrates placing a stencil, with alpha transparency, over an image. See a portion of the background graphic, where a stencil masks part of the cube. The stencil applies transparency from a GIF image. Transparent portions of the texture mask portions of the cube, allowing the background to show through. Additionally non transparent areas of the GIF display in front of the cube.

Each side of the cube is texture mapped with a different color. A large quad renders behind the cube. A small stationary stencil with transparent bars masks off the cube, as the cube passes over the stencil area. See a portion of the background quad through the cube, where the stencil masks the cube. Bars from the stationary graphic display over the cube as well.

This feature offers useful applications. Display complex elements with a simple quad of six vertices. For example display a fence in front of a landscape. Render the fence with transparency and map to a quad. Load six vertices rather than hundreds to model the shape of a fence.

Render complicated models with minimal vertices. Cut holes through three dimensional meshes with transparency.

Render the stencil with gl.enable(gl.BLEND) and

gl.blendFunc(
 gl.ONE,
 gl.ONE_MINUS_SRC_ALPHA
);

To render the cube disable blend with gl.disable(gl.BLEND).

WebGL Scenes: Responsive Web Design Screen Shots
Copyright © 2015 Seven Thunder Software. All Rights Reserved.