Alpha Transparency

WebGL Tutorial

Overview WebGL Context Properties Blend Blend Function Tips Background Graphic Summary

Overview

This short tutorial explains how to render with WebGL alpha transparency. Swipe to move the camera and view the lighthouse landscape. Daisies with alpha transparent areas rotate around their Y axes. Just the shape of the daisies display, not the transparent areas around each daisy graphic. The daisies render mapped to square mesh elements. Yet the flowers appear with more natural shapes.

This example applies alpha transparency with a PNG file. A simple method to use transparency, or not see transparent areas of an image file, with WebGL includes three method calls. First obtain a WebGLRenderingContext with attribute {alpha:false}. Second enable blending once during initialization. Third apply a blend function during initialization. There's no need to enable and apply blending functionality while rendering.

WebGL Context Properties

First obtain the WebGLRenderingContext with the parameter {alpha:false}. This prevents WebGL from creating a back buffer with alpha. In other words the back buffer only contains red, green, and blue color channel values. The following listing demonstrates obtaining a WebGL context.

glContext = canvas.getContext(
 'webgl',
 {alpha:false}
);

The following printout displays the context attributes used to render the lighthouse with daisies. The method described in this tutorial requires requires alpha:false. WebGLContext attributes follow.

alpha:false
antialias:true
depth:true
stencil:false
premultipliedAlpha:true

Prepare WebGL Blending

Second enable blending once during initialization. There's no need to enable blending for every rendered frame.

gl.enable(
 gl.BLEND
);

WebGL Blend Function

Third apply the following blend function once during initialization. Then render as usual.

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

Tips

Testing revealed that semi transparent areas look fine on Windows PCs but neither Windows Phone nor iPhone rendered degrees of transparency well. For example load a PNG file with some areas assigned 50% transparency. You'd expect the PNG to display like an overlay. Elements behind the PNG should partially show through. However with iPhone and Windows Phone, partially transparent areas rendered very light, almost white.

The final daisy graphic has hard edges with 100% opacity against 100% transparency. The daisy graphic is part of the lighthouse PNG for this example. However the daisy could load instead as an eight bit indexed GIF file.

The original goal was to render daisies at 50% opacity allowing some of the grass to blend with the flowers. Rather than render the daisy at 50% opacity it was more effective to prepare the daisy graphic pre mixed with grass color. Flowers blend with the background before they load.

Background Graphic

The background graphic was prepared from horizontal and vertical photographs. Lighthouse photographs were taken with an iPhone in panorama mode. The photos were composited in Photoshop, then mapped to the inside of a cube. Cubes sometimes display edges however cubes require fewer vertices than spheres, and spheres require fewer vertices than scenery such as buildings and trees.

The following image was mapped to the inside of a cube for the WebGL Sprites with Alpha Transparency example. The e-book WebGL Scenes describes how to efficiently prepare and implement 3D backgrounds with WebGL.

Lighthouse with Daisies

Summary

This short tutorial explained how to render with WebGL alpha transparency. Swipe to move the camera and view the lighthouse landscape. Daisies with alpha transparent areas rotate around their Y axes. Just the shape of the daisies display, not the transparent areas around each daisy graphic. The daisies render mapped to square mesh elements. Yet the flowers appear with more natural shapes.

This example applies alpha transparency with a PNG file. A simple method to use transparency, or not see transparent areas of an image file, with WebGL includes three method calls. First obtain a WebGLRenderingContext with attribute {alpha:false}. Second enable blending once during initialization. Third apply a blend function during initialization. There's no need to enable and apply blending functionality while rendering.

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