Working with the alpha channel in textures.

Karl-Petter Åkesson, kalle@sics.se
October, 1997

In the work of creating some new worlds for the eSCAPE project in DIVE [1] our modeller and artist made a wish to be able to work with layered fog and neon-lights. I had some ideas how to do this and they are presented here.

Graphics libraries like OpenGL [2] supports fog, but it is a fog that is equally distributed in the world and has no changes in density. It is homogeneuos in all directions. We wanted a fog that lies in layers and shift in density and if possible moved around. Typical for fog is that you can see through it at some places but somewhere else it is impossible. The transparency changes.

The other wish was to have objects that looked like neonlights. It is hard to generate objects that look like this with the materials given in OpenGL. Even if you use emissive material component the object doesn't really get the glow, the aura that is typical of neon lights. The colour of the object becomes the right one with emissive material but the glow is missing.

The idea to solve both of these problems is to generate textures that make use of the alpha channel. For fogs a randomly changing alpha value and for neonlights a texture that get more transparent at the edges.

What is an alpha channel?

A normal computer image is build up with pixels. Each pixel has a colour value that is usually described by three components, red, green and blue. Some systems also supports an alpha value. The alpha value describes how much of the background should be blended into the current pixel value. It describes how transparent a pixel is. A pixel can stretch from opaque to completely transparent. With the expressions alpha plane or alpha channel one means all the alpha values in an image.

In DIVE you can use the alpha values both for textures and the material of objects. The alpha value in the material tells how transparent the whole object will be.

Fog

The fog we usually see is not homogene. It lies in layers and the density varies. The density changes make the fog transparent in some areas and opaque in some. The idea is to only use the alpha channel to give this effect and the colour will be white for the whole object. An algorithm for generating fractal clouds [3] will give the right look, a texture that looks the fog as we usually see it, see image 1a.
If we let the cloud algorithm generate a texture only with RGB values  we could put the cloud texture on an object and make it transparent. This doesn't work very good, because typically for fog is the change of transparency, the only solution is to work with the alpha values. We will let the cloud algorithm generate its cloud texture in the alpha plane solely.
That is, give the texture pixels different alpha values but keep the same colour value for all pixels. This will give a texture that is hard to see through in some areas but for someothers it is completly transparent. See image 1.
 
1a) A texture from a fractal cloud algorithm. 1b) The same texture generated in the alpha plane and put into DIVE.

The problem with this is that the generated texture has very sharp edges, see image 1b. It is easy to see the edges which doesn't give the right look. We must remove these somehow. We solved it buy applying a cosine function along the x- and y-axises of the texture. The argument to the cosine function is the distance to the origin along the x-resp. y-axis. The function gives a zero value at the edges and a th value 1 at the origin. The edges will be completely transparent. Any other function with a similar shape could be used as long it gives a value of zero along the edges. The result of this operation can be seen in image 2. The edges are not so distinct anymore.
 
 

2a) The same texture as above but the edges has been softed. 2b) This texture used as a alpha texture.
 
 To make the fog look even more natural we made two objects with different fog textures which were crossed like an x, see image 3. This makes the impression that the fog has some volume.
 
3) The two crossed objects. This gives the fog an impression of volume.

Finally we let the two objects move around, following the path of a circle moving around another bigger circle, each object in opposite directions, which gives the impression that different parts of the fog are moving in different directions.
 

Neon

Neonlights are objects that has a glowing aura around them. The aura is more transparent at the edges then in the middle. We will use a transparent texture in a similar way as before. By applying a cosine function in the same way as we did when we removed the edges of the fog texture we will get a texture that is completely transparen at the edges, see image 4a. This texture will we use on a billboard object centered in the mid axis of out neonlight object. The billboard will always face the viewer by rotating around one axis. We have made an example with a cylinder, the billboard will rotate around the axis going in the length direction of the cylinder. The material of the cylinder and the billboard only has a red emissive component. The result can be seen in image 4b.
 
4a) The texture used to create noenlights. 4b) The view from DIVE when the texture is used as a billboard.
 
If we want to have an object that doesn't look so bright or hot as the one in image 4b, we can modify the function that generates the texture somewhat. In image 5 is an example of a texture and an object where the the cosine values are multiplied by two and all values greater than one is set to one. The part of the texture where the transparity goes from opaque to transaparent is much thinner which gives the impression that the object is not so bright.
 
5a) A modified neon texture. 5b) A view from DIVE with the modified texture. 

Further work

With an algorithm similar to the fractal clouds algorithm also good smoke could be generated and it would also be possible to do animations that could be used as textures for fog, smoke and neon. The fog to move around and specially some animation that is triggered when an avatar collidies with the object which could generate a impression that fog swirls up around the legs. Smoke could be rising out of chimneys and neonlights could be flashing and vibrating to give a more living virtual environment.
 

References

[1]    Carlsson and Hagsand, "DIVE - A Multi User Virtual Reality System", IEEE VRAIS, Sept., 1993

[2]     Neider, Jackie, Tom Davis, and Mason Woo, "OpenGL Programming Guide: The Official Guide to Learning OpenGL", Release 1, Addison-Wesley, Reading, Massachusetts, 1993 (ISBN 0-201-63274-8)

[3]    M.F. Barnsley, R.L. Devaney, B.B. Mandelbrot, H.-O. Peitgen, D. Saupe, R.F. Voss, "The science of Fractal Images", Springer-Verlag, New York, 1988 (ISBN 0-387-96608-0)