Learn how to implement the depth of field effect in Away3D.
Depth of field referrers to an effect in photography where an area of a scene is in focus, and everything before and after that area is blurred. In 3D rendered scenes normally everything is in focus unless some special effort is made to implement a depth of field effect. In Away3D this effect can be achieved by using the DofSprite2D class.
The DofSprite2D is a billboard (i.e. it always faces the camera) that uses a caches array of images as the source of its texture. This array stores copies of the reference texture at the different stages of “blurriness”, allowing for the depth of field effect to be quickly implemented.
To show off the DofSprite2D we will create an atom, where the electrons demonstrate the DOF effect as they spin around.
ApplicationManager.as
The values of the DofCache need to be specified.
The aperture property defines how quickly objects blur as they move away from the focus. A small aperture means that objects appear out of focus at a small distance from the focal point, whereas a large value means that objects will appear increasingly out of focus over a larger distance. [code]
The usedof property can turn the DOF effect on or off. [code]
The maxblur property defines the maximum blurriness of those objects that are completely out of focus. [code]
The focus property defines the focal point of the camera. Objects that are the same distance from the camera as the focus appear sharp. [code]
Next we create the atom itself. The nucleus of the atom is made up of proton and neutrons, each represented by a different texture.
First the DofSprite2D object is created. The bitmap to be used as the texture is supplied to the constructor. [code]
The protons and neutrons are positioned at opposite sides along the x axis. We will group the protons and neutrons together later and rotate them as a pair to create the nucleus. [code]
The ownCanvas property needs to be set to true for the blending to work. [code]
Finally the blendMode is set (see here for a description of the Flash blend modes). [code]
The same process is repeated for the neutron. [code]
The protons and neutrons are then grouped together into a ObjectContainer3D. This ObjectContainer3D is then rotated, which rotates the two DofSprite2D’s as a pair. By progressively rotating the protons and neutrons with each loop we can create a nucleus. [code]
The ObjectContainer3D is then added to the scene with a MeshObject. [code]
The electrons are created and rotated just like the proton/neutron pairs, and the ObjectContainer3Ds used to hold the electrons are stored in the electrons collection. [code]
The enterFrame function rotates the ObjectContainer3Ds that hold the electrons around, orbiting them around the nucleus. [code]
The DofSprite2D class provides an easy way to implement a depth of field effect in your Away3D application. Thanks to the caching system used this effect is also quick, allowing you to create a good number of DofSprite2D objects and still maintain a high frame rate.
Go back to Away3D Tutorials