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)
.
3D Web Design
Educate, inspire and inform with interactive 3D media online. Interactive media in the form of 3D shapes or 3D models, provide unique opportunities to express concepts, such as educational course work or new product features. Seven Thunder Software's simple 3D viewer enables users to see three dimensional objects interactively. Swipe to rotate a model. Tap to select elements on the model. Options allow users to select and learn about individual features.
3D Web Development
Your message can reach the widest audience with 3D Web design. Most 3D programming's implemented with common Web technologies including WebGL, JavaScript, CSS, GLSL and HTML5. 3D Web design with WebGL works on iPhone iOS 8 and up, current Androids, Macintosh computers with OSX Yosemite on up and Windows 10 PCs.
3D Models Online
If a picture's worth a thousand words, then a 3D model's worth ten thousand words! Consider 3D interactive content for education, media and marketing. Seven Thunder Software develops 3D models for the Web, with optimized (fast loading) 3D rendering software, from photographs, blue prints, ideas and real objects.