One By One Design

The Old Snow Trick – In the Third Dimension

While working on a little Valentine’s Day ecard for the most wonderful wife in the world, I suddenly had an idea…

Snow effects have been done in Flash since at least Flash 5 (maybe even Flash 4 if I think back hard enough), but I have yet to see a Flash snow storm in “true 3d”. Well, at least not until now. Seemed the new Particle API in Papervision3d was just the way to go for such a thing. Probably one of the oldest and nicest looking examples of snow in Flash, is the one presented on Kirupa.com. I really like the motion of that version, so borrowed a bit of the math for my own updated version. Also, I like the idea of using depth of field with papervision, so whilst borrowing, I boosted a bit of mrdoob’s “brute force” approach for depth of field. I didn’t go crazy with 200 textures though. I figured 4 were enough. No blur, a light blur, a medium blur, and a heavy blur. To be honest, you can’t really even notice the DOF anyway, but it’s there, and that’s all that matters. Add a little panorama and suddenly it’s snowing everywhere you look. Now, if I could just figure out how to keep the flakes from “sticking” to the camera, I’d have it made in the shade. I’m not sure if this is a clipping problem or what. If anyone knows why that happens, post a comment here and let me know.

The code for some snow:

/** 
* Snow in the Third Dimension (with some math from Kirupa.com) 
* @author Devon O. 
* @version 0.1 
*/  

package {  

	import flash.display.BitmapData; 
	import flash.display.GradientType; 
	import flash.display.Sprite; 
	import flash.filters.BlurFilter; 
	import flash.geom.Matrix; 
	import flash.geom.Point; 
	import org.papervision3d.cameras.FreeCamera3D; 
	import org.papervision3d.materials.special.BitmapParticleMaterial; 
	import org.papervision3d.view.BasicView;  

	import flash.events.Event;  

	import org.papervision3d.objects.DisplayObject3D; 
	import org.papervision3d.core.geom.Particles; 
	import org.papervision3d.core.geom.renderables.Particle;  

	public class Snow3d extends BasicView  {  

		private var snowHolder:DisplayObject3D; 
		private var flakes:Array; 
		private const NUM_FLAKES:int = 300; 
		private var cam:FreeCamera3D;  

		private var noBlurFlake:BitmapData; 
		private var ltBlurFlake:BitmapData; 
		private var medBlurFlake:BitmapData; 
		private var heavyBlurFlake:BitmapData;  

		public function Snow3d() { 
			super(stage.stageWidth, stage.stageHeight, true, false, FreeCamera3D.TYPE); 
			init(); 
		}  

		private function init():void { 
			cam = cameraAsFreeCamera3D; 
			cam.zoom = 1; 
			cam.focus = 400; 
			cam.z = 10;  

			createBitmaps();  

			snowHolder = new DisplayObject3D("snow_holder"); 
			flakes = new Array();  

			for(var i:int = 0; i < NUM_FLAKES; i++) {  

				var mat:BitmapParticleMaterial = new BitmapParticleMaterial(noBlurFlake); 
				mat.smooth = true;  

				var flakeHolder:Particles = new Particles("flake" + i); 
				var flake:Particle = new Particle(mat, 10, 0, 0, 0);  

				flakeHolder.addParticle(flake);   

				flakeHolder.x = randRange(-2000, 2000); 
				flakeHolder.y = randRange(-2000, 2000); 
				flakeHolder.z = randRange( -2000, 2000);  

				flakeHolder.extra = { radians: 0, I:randRange(2, 8), K: (-Math.PI + Math.random() * Math.PI), noblur: new BitmapParticleMaterial(noBlurFlake), blur1: new BitmapParticleMaterial(ltBlurFlake),  blur2: new BitmapParticleMaterial(medBlurFlake), blur3: new BitmapParticleMaterial(heavyBlurFlake) };  

				snowHolder.addChild(flakeHolder); 
				flakes.push(flakeHolder); 
			}  

			scene.addChild(snowHolder);  

			singleRender();   

			addEventListener(Event.ENTER_FRAME, enterFrame); 
		}  

		private function createBitmaps():void { 
			var lightBlur:BlurFilter = new BlurFilter(4, 4, 1); 
			var medBlur:BlurFilter = new BlurFilter (8, 8, 1); 
			var heavyBlur:BlurFilter = new BlurFilter(16, 16, 1);  

			var type:String = GradientType.RADIAL; 
			var colors:Array = [0xFFFFFF, 0xFFFFFF, 0xFFFFFF]; 
			var alphas:Array = [1, .1, 0]; 
			var ratios:Array = [0, 200, 255]; 
			var mat:Matrix = new Matrix(); 
			mat.createGradientBox(10, 10);  

			var baseFlake:Sprite = new Sprite(); 
			baseFlake.graphics.beginGradientFill(type, colors, alphas, ratios, mat); 
			baseFlake.graphics.drawCircle(5, 5, 5); 
			baseFlake.graphics.endFill();  

			noBlurFlake = new BitmapData(10, 10, true, 0x00000000); 
			noBlurFlake.draw(baseFlake);  

			ltBlurFlake = new BitmapData(10, 10, true, 0x00000000); 
			ltBlurFlake.draw(baseFlake); 
			ltBlurFlake.applyFilter(ltBlurFlake, baseFlake.getBounds(baseFlake), new Point(), lightBlur);  

			medBlurFlake = new BitmapData(10, 10, true, 0x00000000); 
			medBlurFlake.draw(baseFlake); 
			medBlurFlake.applyFilter(medBlurFlake, baseFlake.getBounds(baseFlake), new Point(), medBlur);  

			heavyBlurFlake = new BitmapData(10, 10, true, 0x00000000); 
			heavyBlurFlake.draw(baseFlake); 
			heavyBlurFlake.applyFilter(heavyBlurFlake, baseFlake.getBounds(baseFlake), new Point(), heavyBlur); 
		}  

		function enterFrame(e:Event):void {  

			var pan:Number = cam.rotationY - 210 * stage.mouseX / (stage.stageWidth/2); 
			pan = Math.max( -100, Math.min( pan, 100 ) ); 
			cam.rotationY -= pan / 12;  

			var len:int = flakes.length;  

			for(var i:int = 0; i < len; i++) { 
				var p:Particles = flakes[i];  

				if (Math.abs(p.sceneZ) <= 100) { 
						p.particles[0].material = p.extra["noblur"] 
				} 
				if (Math.abs(p.sceneZ) >= 101 && Math.abs(p.z) <= 200) { 
					p.particles[0].material = p.extra["blur1"] 
				} 
				if (Math.abs(p.sceneZ) >= 201 && Math.abs(p.z) <= 300) { 
					p.particles[0].material = p.extra["blur2"] 
				} 
				if (Math.abs(p.sceneZ) >= 301) { 
					p.particles[0].material = p.extra["blur3"] 
				}  

				p.extra["radians"] += (p.extra["K"] / 180) * Math.PI; 
				p.x -= 3 * (Math.cos(p.extra["radians"])); 
				p.z -= 3 * (Math.sin(p.extra["radians"])); 
				p.y -= p.extra["I"]; 
				if (p.y < -2000) { 
					p.y = 2000; 
					p.x = randRange(-2000, 2000); 
					p.z = randRange( -2000, 2000);  

					p.extra["I"] = randRange(2, 8); 
				} 
			}  

			singleRender(); 
		}  

		private function randRange(min:Number, max:Number):Number { 
			return Math.floor(Math.random() * (max - min + 1)) + min; 
		} 
	} 
}

And an example (with panorama):

[kml_flashembed movie=”../wp-content/uploads/2008/02/snow3d.swf” height=”400″ width=”500″ fversion=”9″ /]

Posted by