This tutorial shows you how to use the fog filter using the Away3D 2.0 library or higher.

A little word on the fog filter,
The simulation of a saturated atmosphere created by the fog filter is not only there to enhance the graphical look of a scene, it’s also a very good way of improving the rendering performance of your project. At it’s heart, the fog filtering processes a depth filter as well. In other words, according to your fog filter maxZ property, all faces at a distance greater than this value are not processed by the renderer. The fog filter reaches a 100% alpha value at this given depth value, which equates to a solid 100% color. Note that a ZDepth filter class is also available if you do not wish to use the fog but benefit from the depth filtering.

FogFilter properties

- minZ the nearest distance from the camera, this value represents where the fog should start

- maxZ the furthest distance from the camera, this value represents where the fog should end

- subdivisions the fog is composed of a series of layers inserted in the view between the rendered triangles – this property sets the number of layers. The alpha values set internally are graduated according to this value.

- material at this time of development the fog filter supports only solid colors like the ColorMaterial class. This is where you set your color information
by default the filter has a white color set.

How to implement the fog filter into your code

	//create a new material
	var fogMaterial:ColorMaterial = new ColorMaterial(0xBCC687);

	//create a new fogfilter using the material
	var fog:FogFilter = new FogFilter({minZ:6500,
									   maxZ:13200,
									   subdivisions:20,
									   material:fogMaterial});

	//create a renderer using the filter
	var basicrenderer:IRenderer = new BasicRenderer(fog);

	//create a view using the renderer
	_view = new View3D({scene:new Scene3D(),
						renderer:basicrenderer});

	_view.x = stage.stageWidth / 2;
	_view.y = stage.stageHeight / 2;
	addChild(_view);

The images below should give you an idea of the way it works

In this case if this elevation were to be 1000×1000, minZ would be set at 200, and the maxZ at 900

Here it could be something like minZ 400 and maxZ 550

And here we would have something like minZ 10 and maxZ 500

this images above are displaying a subdivision of 7. Feel free to experiment with more layers, since the look and feel is highly dependent on the way the layers blend with each other, the amount of faces in between, and their respective sizes on screen.

Popularity: 2% [?]