The Effect and Comments

We present here a highly realistic 3D snowfall effect. The motion is driven by an acceleration field determined by Perlin noise. That creates a characteristic turbulence of snow motion. We use BlurFilter for flakes that are very far away or very close to the camera which, together with parallax effect, gives very real perception of depth. Click the screen shot below or this link to open the effect in a new window:

Download

  • Download all source files corresponding to this effect: snow3d.zip

A 3D Snowfall Effect with Highly Realistic Motion and Sense of Depth

A 3D snowfall effect with highly realistic motion and sense of depth. We present here a highly realistic snowfall effect, which is an updated and enhanced version of our previous Realistic 3D Snowfall Effect in ActionScript 3 and Flash. In our original effect, we used Perlin noise and parallax methods to create a turbulent three-dimensional snowfall. We have enhanced the 3D look by adding a depth-of-field simulation using BlurFilters applied to the snowflakes. We have also optimized the drawing of the snowflakes by using the graphics.copyFrom() method of display objects.

Our previous snowfall effect was encapsulated in a class called SnowDisplay. The new snow effect is called SnowDisplayAlt. An instance of this class is a display object which can be added to the stage on top of any graphics of your choosing. You can even have snow go both in front and behind of graphics objects by creating two separate instances of the snow.

See our earlier posting for a discussion of how Perlin noise is used to create the turbulence effect and for other details of the code, and also to see an example where two instances are used to create a layered effect. Below we will expand upon the new features in this updated version.

Depth of Field

When a human eye or camera focuses on objects at a specific distance away, the other objects in the scene which are closer than that position or further away than that position will appear blurry. To simulate this, we apply a BlurFilter to our snowflakes, with the blur amount varying according to distance. We want this blur amount to be zero for snowflakes at a certain distance away, which we call the nullDistance in our code (that is where the snowflakes will be in the sharpest focus). We want the blur to increase as the distance of the snowflakes moves away from this nullDistance. Setting the blur amount to be a quadratic function of the distance is an easy way to accomplish this.

In the code, we set the nullDistance to a desired value, and then set the blur level at one more position: we give a value for depth0 where we want the blur amount to be blur0. The quadratic function is determined by these values.

Optimizing the Drawing of Snowflakes

Since all of the snowflakes will be drawn in exactly the same way, we can simplify our code. First, we create a single Shape object called the particlePrototype. Then when we add a new particle to the display, we draw it by copying the graphics from the particlePrototype. The graphics.copyFrom() method used here was introduced in Flash Player 10. We also made use of this method in our Kaleidoscopic Gallery in Flash CS4 example.

Back to Flash CS4 Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.