3D Graphics Run with WebGL! Read the E-Book

WebGL Scenes: Responsive Web Design

WebGL Alpha Stencil Semi Transparency

Swipe Over the Canvas to Move the Cube

This Web page demonstrates displaying a stencil over an image. Semi transparent alpha areas allow some of the background to show through the stencil.

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. Semi transparency is applied to the rest of the texture.

Some browsers and devices don't render correctly with this blend option. For example Windows Phone 8.1 displays solid white bars instead of transparency. The Stencil Blending Options page allows you to select and view blending options as they apply to the stencil.

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 with semi transparency over the cube as well.

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

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

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

See more WebGL stencil examples.

More WebGL Stencil Examples!

3D Graphics Display Here with WebGL

Read WebGL E-Books

Copyright © 2015 Seven Thunder Software. All Rights Reserved.