Alpha Transparency
WebGL Tutorial
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.
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.
