No, this post is about combining cool PV3D features in order to achieve a nice looking animated sun. I’ve used the trunk of the papervision code repository, revision 851 (it works up to r910, after that a bug was introduced). Note that I’m no PV3D guru; I’m just sharing what I’ve learned so far.

Closely watch that corona for a while!

How it works

In short: the sun exist entirely of planes, controlled by alpha ratios and always facing the camera:
• one plane with a gradient texture white to red with glow
• two planes with a perlin texture, that resize and tag eachother as to provide a continuous outwards motion
• one plane that acts as a mask for the other planes to provide a perfect circle giving the illusion of a round star

The star’s gradient

Actually, it took quite some tweaking to get a nice gradient of white in the middle and yellow to red on the edge. It’s a basic Sprite gradient fill, using three colors, alpha layering and a specific color ratio array to get the last two colors (yellow and red) on the edge. Then I’m applying this gradient twice on the same canvas to get the result I want when the flaring corona’s are added. I couldn’t get it the way I wanted with the alpha array alone (let me know if you got a better way), but this worked and the gradients are only calculated and drawn once.

Drawing it twice means less transparency and that means more dense flares as we’ll see later on when we’re combining the star glow layer and corona layer using BlendMode.ADD (which is also the reason why we need MovieMaterial here: otherwise they won’t interact on layer-level).

// pseudo code
var sunColors:Array = [0xfefefe, 0xFAEB61, 0xff0000]; // white, orange/yellow, red
var sunAlphas:Array = [1, .8, 0]; // white part opaque, 20% from the edge out fading out
var sunRatios:Array = [0x85, 0xAA, 0xDD]; // all white except for the edges

var size:Number = 1000;
var sunglowMaterial:MovieMaterial = createSunglowMaterial(size, sunColors, sunAlphas, sunRatios);
var sun:Plane = new Plane(sunglowMaterial, size, size, null, null);

/**
 * Creates a disc texture using radial alpha. Draw twice for extra intensity of the colors.
 */
private function createSunglowMaterial(size:Number, colors:Array, alphas:Array, ratios:Array):MovieMaterial {
	var mat:Matrix = new Matrix();
	mat.createGradientBox(size, size);
	var sunTexture:Sprite = new Sprite();
	for (var i:Number = 0; i < 2; i++) {
		sunTexture.graphics.beginGradientFill(GradientType.RADIAL, colors, alphas, ratios, mat);
		sunTexture.graphics.drawRect(0, 0, size, size);
		sunTexture.graphics.endFill();
	}
	return new MovieMaterial(sunTexture, true);
}

The star's flaring corona

The corona was tricky. I needed to find some way to create a seamless and continuous outward motion of a Perlin noise map that would function as a flare animation. In the end I settled for a two plane solution where one slowly grows and finally fades out at which point the second fades in, rotated randomly and grows until it fades out again. Rinse and repeat. When calibrated carefully, the resizing, rotating and fading is imperceptible to the eye, due to the naturally distributed Perlin noise:

The Perlin noise is added with a simple Perlin noise command as follows:

var coronaMaterial1:BitmapMaterial = createCoronaMaterial(size / 1.25, size / 100, SEGMENTS);
var coronaMaterial2:BitmapMaterial = createCoronaMaterial(size / 1.25, size / 100, SEGMENTS);
var corona1:Plane = new Plane(coronaMaterial1);
var corona2:Plane = new Plane(coronaMaterial2);

/**
 * Creates a perlin noise texture to simulate the flaring flames on the sun's outer glow.
 */
private function createCoronaMaterial(textureSize:Number, noiseSize:Number, segments:Number):BitmapMaterial {
	var coronaBitmap:BitmapData = new BitmapData(textureSize, textureSize);
	coronaBitmap.perlinNoise(noiseSize, noiseSize, 4, 61, true, true, 1, false);
	return new BitmapMaterial(coronaBitmap, true);
}

The algorithm to animate the two planes is included in the attached sources.

The corona and star glow combined and masked by a perfect circle

The planes are all on the same depth and level. This works because we're using alpha ratios to determine where one plane's visibility starts and the other disappears. The star glow textures stands on its own, it is inherently radial and as such doesn't need a circle mask. This leaves the Perlin noise textures which need masking. To do this, I've put them in separate layers, which are then both masked by a third layer.

/*
 * use root corona layer so we can perform an alpha mask to both child layers at once
 *     - contains child corona layers so we can control individual alpha properties
 *         - contains child corona planes so we can apply a perlin noise texture to it for 'flaring' effect
 */
var coronaLayer:ViewportLayer = new ViewportLayer(viewport, null);
coronaChildLayer1 = new ViewportLayer(viewport, null);
coronaChildLayer2 = new ViewportLayer(viewport, null);
coronaLayer.addLayer(coronaChildLayer1);
coronaLayer.addLayer(coronaChildLayer2);
coronaChildLayer1.addDisplayObject3D(corona1);
coronaChildLayer2.addDisplayObject3D(corona2);
viewport.containerSprite.addLayer(coronaLayer);
// give the corona of the sun a 'flaring' effect
coronaLayer.blendMode = BlendMode.ADD;

// only show the corona part of the flaring perlin noise planes
var coronaMaskLayer:ViewportLayer = viewport.getChildLayer(coronaMask);
coronaLayer.cacheAsBitmap = true;
coronaMaskLayer.cacheAsBitmap = true;
coronaLayer.mask = coronaMaskLayer;

On a final note, I'm using the skybox from the skybox tutorial and also the RealtimeDisplayObject3D helper baseclass for the sun's scene updates (which is why the coronas keep animating smoothly even at low FPS).

trackback

I had to tone down the size and fps, and leave out the bumpmap for this demo because my Opera browser was halting when I added the other images and clouds swf demo :P

(notice the dynamic clouds and the glow around the globe)

• Download Clouded planet Earth source

On my core 2 duo laptop I get about 20-25 fps whith a slightly larger stage size and the movie set to 30 fps. Although the planet looks very nice to me, I also realize it isn’t very practical for games or other realtime simulations. To get better fps, you can remove the bumpmap texture, replace the realtime clouds with a fixed texture, user fewer segments in the spheres, zoom out more, or use lower resolution textures for land- and cloud materials. A combination of two or more of these suggestions should easily get you above 35 fps.

Used Ingredients

I’ll get into the explanations later, but here are the ingredients used in this example:

- A sphere for geological data (land texture)
- Another sphere for clouds
- two planes that mask a perfect circle for the spheres
- a plane that contains the fresnell glow on top

On the spheres I’ve used two phongshaded materials of which one has the land texture with a bumpmap for mountains and stuff, and the other contains the clouds texture with a runtime maintained perlin noise map applied to the alpha channel.

On the masking planes I’ve used a simple gradient circle shaped fill on the alpha channel.

On the glow plane I’ve used a gradient circle fill with a blue color and alpha channel for nice fading.

There’s also a pointlight in there that represents the sun (hits earth top-right).

Main textures

Earth surface

I took the public Earth surface texture (Blue Marble) from NASA, which I used on the sphere. On the rightside you can see it applied to the sphere with phongshader.

The shown image is about the half of the size I used for the used texture. One thing I’ve noticed is how large the texture needs to be to get some decent quality when applied to a sphere. Maybe there’s some room for optimization there…

Clouds surface

For the clouds I initially started with the public clouds texture from NASA, but when I applied the dynamic visibility map it turned out I didn’t get enough cloud coverage, because in effect now two visibly maps were applied: nature’s own, hardcoded in the texture, and my own applied in runtime.

So I ended up mirroring the original clouds texture in both dimensions to get much more cloud coverage, so that when I apply my own runtime visibility map I get about as much cloud coverage as in the original image. When applied to the sphere, it is also subject to the Phong shader I’ve used.

 

I’ve increased overall brightness to get more out of the less dense clouds, but I’ve also increased contrast to get the clear shapes of the clouds. Then I’ve applied the image itself as its own alpha channel and played around with its visibility until it became what you see above.

For the runtime visibility map I’ve used the ever amazing perlin noise effect. Since perlin noise works with a phase, I can use that to animate perlin noise and apply the results to the alpha channel of the clouds texture. On a straight texture, it looks like the following example:

(click to see in action)

You can probably imagine how hard this must be to render each frame: a large clouds texture with alpha channel modified each frame by a new perlin noise map, with a phong shader applied. I see how this won’t work in a game, so I’ll probably use a fixed clouds texture in the future, but right now I’m satisfied with the effect.

Code walkthrough

Aside from the actual structuring of the code and Papervision3D usage, there are some interesting aspects to this demo. For example, there’s the Earth’s light glow, and the use of masking discs to disguise the low quality of the spheres. I’ve explained everything in details on this on the following page:

• Read the Earth code walkthrough

If anyone has suggestion on how to improve performance, please let me know!

trackback

• RealtimeDisplayObject3D.as

I use the convention of adding update methods to all (my own) DisplayObject3D objects, which then update themselves according to preconfigured settings (eg. passed in the constructor). I pass in a Camera3D and that’s it, let the objects do their own thing. I’m making use of this convention by extracting this update method to a baseclass which then can do time-based updates instead.

It only works for new classes you create that normally would extend DisplayObject3D, such as a composite parent DisplayObject3D. For example, if you were to create an Earth object in PV3D, you could create a new DisplayObject3D container class which adds a planet, clouds and a glow to itself as child objects. This Earth object could then extend our special class, RealtimeDisplayObject3D, for controlling time-based updates.

public class Planet extends RealtimeDisplayObject3D {

	private var earth:DisplayObject3D;

	// define: 1 update every 200ms (5 updates per second) and process 1 value per second
	public function Planet() {
		super(200, 1);
		// add planet, clouds and glow etc.
	}

	// rotates Earth 5 times per second, with a stepsize of 0.2 (1 second / updates per second)
	protected override function realtimeUpdate(camera:Camera3D, stepsize:Number):void {
		earth.rotate(stepsize);
	}
}

With the planet now extending our RealtimeDisplayObject3D class instead of DisplayObject3D, you can provide realistic rotation speed that is not influenced by the FPS the movie is pulling. Instead, it works by applying a set value-per-second (phase speed) and a required update frequency per second; the phase speed is spread out over the number of updates per second.

There is one requirement though: the fps the movie is pulling cannot go below the updates per second specified, or the updates per second is capped by the frames per second. If you specify 200ms for each update, this means 5 updates per second (1000 / 200). This won’t be a problem. If however you define 50ms for each update, this means 20 updates per second (1000 / 50). You must ensure that your movie is running on 20 frames per second or more.

Combining time-based updates with frame-based updates

You can still update normally on frame-based timetable by overriding the update(camera) method of the baseclass. Or, you can combine both type of updates by overriding update(camera), do a frame-based update, call super.update(camera) and override the realtimeUpdate(camera) method as we did before. Here’s an example of that:

public class Planet extends RealtimeDisplayObject3D {

	private var earth:DisplayObject3D;

	// define: 1 update every 200ms (5 updates per second) and process 1 value per second
	public function Planet() {
		super(200, 1);
		// add planet, clouds and glow etc.
	}

	// makes the planet face the camera each and every frame
	protected override function update(camera:Camera3D, stepsize:Number):void {
		earth.lookAt(camera);
		super.update(camera);
	}

	// rotates Earth 5 times per second, with a stepsize of 0.2 (1 second / updates per second)
	protected override function realtimeUpdate(camera:Camera3D, stepsize:Number):void {
		earth.rotate(stepsize);
	}
}

trackback

Here’s how you can do that in Papervision3D, using ParticleFields. I’ve used the trunk of the papervision code repository, revision 851, but it should work with the last release without to much hassle. Note that I’m no PV3D guru; I just started to learn this stuff and I’m just sharing what I’ve learned so far.

Here’s how it works:
• divide space into a 3d grid and parts of the spacedust cloud on 8 gridpoints directly around the camera (the ship), we’ll call these dustpockets
• when the camera moves, dustpockets are removed and created to keep only the 8 gridpoints around the ship occupied

Divide space into a 3d grid and snap dust pockets on it

We’re not actually creating a grid, but we’re going to say things like: “Give me the closest 3d point behind the ship in the upper left corner on the invisible grid”, so that we can create a dust pocket in that position. Sounds complicated? Luckily, the math is easy:

Let’s say there’s only the x-axis. Now from 0 to 100, I want the gridpoint on the left of 32 on grid with size 5. Here is how it would look:

As you can see, the x-value 30 is the value to the left of 32 on a grid with size 5. Here’s the equation to get to that answer:

gridpoint left: Xgrid = Xvalue - (Xvalue % gridsize)
gridpoint right: Xgrid = Xvalue - (Xvalue % gridsize) + gridsize

Example gridpoint left for value 32 and grid size 5:
gridpoint left: Xgrid = 32 - (32 % 5)
gridpoint left: Xgrid = 32 - (2)
gridpoint left: Xgrid = 30

Example gridpoint right for value 32 and grid size 5:
gridpoint left: Xgrid = 32 - (32 % 5) + 5
gridpoint left: Xgrid = 32 - (2) + 5
gridpoint left: Xgrid = 35

We’re going to apply this kind of math to find all 8 gridpoints around the camera. So not just the x-axis, but y and z-axis as well.

The reason we need these 8 gridpoints is because we can’t just create a single cloud. Since the ship can move in any direction and look in any direction, but we can’t fill all of space with dust particles due to memory restrictions, we need to dynamically ‘move’ the cloud with the ship, while keeping the dust particles on the same place. The only way to do this is by dividing the single dust cloud into several small ones and create them as the ship goes. At the same time we need to keep the number of particles down, so we need the minimum dust pockets and still cover all sides by create 8 small clouds that together form a big cloud and can grow in any direction without draining too much memory and cpu power.

Here’s how we’re going to place the clouds:

Here’s the code to do this:

public function update(fieldsize:Number = 2500):void {
	// calculate segment (dustpocket) size
	const FIELDSIZE_POCKET:Number = fieldsize / 5;

	// determine the 8 gridpositions around the ship (eg. 1: front bottom left, 2: behind top right)
	const pocketPositions:Array = new Array();
	pocketPositions.push(calcGridPosition(camera.position, FIELDSIZE_POCKET, false, false, false));
	pocketPositions.push(calcGridPosition(camera.position, FIELDSIZE_POCKET, true, false, false));
	pocketPositions.push(calcGridPosition(camera.position, FIELDSIZE_POCKET, false, true, false));
	pocketPositions.push(calcGridPosition(camera.position, FIELDSIZE_POCKET, false, false, true));
	pocketPositions.push(calcGridPosition(camera.position, FIELDSIZE_POCKET, true, true, false));
	pocketPositions.push(calcGridPosition(camera.position, FIELDSIZE_POCKET, true, false, true));
	pocketPositions.push(calcGridPosition(camera.position, FIELDSIZE_POCKET, false, true, true));
	pocketPositions.push(calcGridPosition(camera.position, FIELDSIZE_POCKET, true, true, true));
}

/**
 * Calculates a gridpoint around the ship.
 */
private function calcGridPosition(position:Number3D, gridSize:Number, xMin:Boolean, yMin:Boolean, zMin:Boolean):Number3D {
	const gridPosition:Number3D = new Number3D();
	gridPosition.x = (position.x - (position.x % gridSize)) + ((xMin) ? 0 : gridSize);
	gridPosition.y = (position.y - (position.y % gridSize)) + ((yMin) ? 0 : gridSize);
	gridPosition.z = (position.z - (position.z % gridSize)) + ((zMin) ? 0 : gridSize);
	return gridPosition;
}

This is really all there is to it. The only thing we need to do now is create new dust pockets for gridpoints without one and remove dust pockets for points that are not within range anymore. Over and over again. Here’s the entire Spacedust class:

package org.codemonkey.spacedusttutorial.papervision3d {
	import flash.utils.Dictionary;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.core.math.Number3D;
	import org.papervision3d.materials.special.ParticleMaterial;
	import org.papervision3d.objects.special.ParticleField;
	import org.papervision3d.scenes.Scene3D;

	/**
	 * Spacedust simulator. Creates 8 segments of the dustcloud around the given camera at any point in space.
	 * When the camera moves, new dustpockets are generated and old ones (out of sight) are removed.
	 *
	 * @author Benny Bottema
	 */
	public class Spacedust {

		private static const DEFAULT_PARTICLEMATERIAL:ParticleMaterial = new ParticleMaterial(0xffffff, .5, ParticleMaterial.SHAPE_CIRCLE);

		private var basic3DSetup:Basic3DSetup;
		private var camera:Camera3D;
		private var spacedustCloud:Dictionary;

		private var fieldsize:Number;
		private var particleCount:Number;
		private var dustMaterial:ParticleMaterial = new ParticleMaterial(0xffffff, .5, ParticleMaterial.SHAPE_CIRCLE);

		public function Spacedust(basic3DSetup:Basic3DSetup, camera:Camera3D = null, fieldsize:Number = 2500, particleCount:Number = 400, dustMaterial:ParticleMaterial = null) {
			spacedustCloud = new Dictionary();
			this.basic3DSetup = basic3DSetup;
			this.camera = (camera != null) ? camera : basic3DSetup.camera;
			this.fieldsize = fieldsize;
			this.particleCount = particleCount;
			this.dustMaterial = (dustMaterial != null) ? dustMaterial : DEFAULT_PARTICLEMATERIAL;
		}

		public function update():void {
			// calculate segment (dustpocket) size
			const FIELDSIZE_POCKET:Number = fieldsize / 5;

			// determine the 8 gridpositions around the ship (eg. 1: front bottom left, 2: behind top right)
			var pocketPositions:Array = new Array();
			pocketPositions.push(calcGridPosition(camera.position, FIELDSIZE_POCKET, false, false, false));
			pocketPositions.push(calcGridPosition(camera.position, FIELDSIZE_POCKET, true, false, false));
			pocketPositions.push(calcGridPosition(camera.position, FIELDSIZE_POCKET, false, true, false));
			pocketPositions.push(calcGridPosition(camera.position, FIELDSIZE_POCKET, false, false, true));
			pocketPositions.push(calcGridPosition(camera.position, FIELDSIZE_POCKET, true, true, false));
			pocketPositions.push(calcGridPosition(camera.position, FIELDSIZE_POCKET, true, false, true));
			pocketPositions.push(calcGridPosition(camera.position, FIELDSIZE_POCKET, false, true, true));
			pocketPositions.push(calcGridPosition(camera.position, FIELDSIZE_POCKET, true, true, true));

			var newSpacedustCloud:Dictionary = new Dictionary();

			// create new dustfields or transfer existing ones (and remove existing ones the scene)
			const particlesPerPocket:Number = particleCount / pocketPositions.length;
			for each (var pocketPosition:Number3D in pocketPositions) {
				var pocketKey:String = pocketPosition.toString();
				var reusableDustPocket:ParticleField = spacedustCloud[pocketKey];
				// remove so we can delete the particles from the remaining particlefields (which means they are out of sight)
				delete spacedustCloud[pocketKey];
				// add the removed particlefield to the new dustcloud or create one if dustpocket is new for te current gridposition around the ship
				if (reusableDustPocket != null) {
					basic3DSetup.removeFromScene(reusableDustPocket);
					newSpacedustCloud[pocketKey] = reusableDustPocket;
				} else {
					newSpacedustCloud[pocketKey] = new ParticleField(dustMaterial, particlesPerPocket, 2, fieldsize, fieldsize, fieldsize);
					newSpacedustCloud[pocketKey].x = pocketPosition.x;
					newSpacedustCloud[pocketKey].y = pocketPosition.y;
					newSpacedustCloud[pocketKey].z = pocketPosition.z;
				}
			}

			// manually remove all the remaining obsolete particles from the old cloud (they are out of sight)
			for each (var oldDustPocket:ParticleField in spacedustCloud) {
				oldDustPocket.removeAllParticles();
			}

			// now add the old dustpockets which are still within sight, plus the new dustpockets to the scene
			for each (var newDustPocket:ParticleField in newSpacedustCloud) {
				basic3DSetup.addToScene(newDustPocket);
			}

			// replace the old cloud with the new cloud
			spacedustCloud = newSpacedustCloud;
		}

		/**
		 * Calculates a gridpoint around the ship.
		 */
		private function calcGridPosition(position:Number3D, gridSize:Number, xMin:Boolean, yMin:Boolean, zMin:Boolean):Number3D {
			const gridPosition:Number3D = new Number3D();
			gridPosition.x = (position.x - (position.x % gridSize)) + ((xMin) ? 0 : gridSize);
			gridPosition.y = (position.y - (position.y % gridSize)) + ((yMin) ? 0 : gridSize);
			gridPosition.z = (position.z - (position.z % gridSize)) + ((zMin) ? 0 : gridSize);
			return gridPosition;
		}
	}
}

• Download Spacedust.as
• download entire spacedust source

Notice the particel fields we’re using to create the eight dust pockets with.

new ParticleField(dustMaterial, particlesPerPocket, 2, fieldsize, fieldsize, fieldsize);

Also, the Basic3DSetup class I’ve used is simply a convenience class with default camera, scene, viewport etc. It’s much like Papervision’s own BasicView -which I didn’t know about at the time- except even cleaner.

The Spacedust class accepts an optional camera to position the dust cloud around. Since this approach is meant to create the illusion of infinite space dust, it doesn’t make sense to create clouds on non-camera’s. Also, you can specify your own particle count and dust material in the constructor of the Spacedust class. The example at the top of the page uses only the defaults.

trackback

package org.codemonkey.papervision3d {
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Cube;

	public class Skybox extends Cube {

		public static const QUALITY_LOW:Number = 4;
		public static const QUALITY_MEDIUM:Number = 6;
		public static const QUALITY_HIGH:Number = 8;

		public function Skybox(bf:Class, bl:Class, bb:Class, bu:Class, br:Class, bd:Class, skysize:Number, quality:Number):void {
			super(generateMaterials(bf, bl, bb, bu, br, bd), skysize, skysize, skysize, quality, quality, quality);
		}

		protected function generateMaterials(bf:Class, bl:Class, bb:Class, bu:Class, br:Class, bd:Class):MaterialsList {
			var materials:MaterialsList = new MaterialsList();
			materials.addMaterial(new BitmapMaterial(new bf().bitmapData), "front");
			materials.addMaterial(new BitmapMaterial(new bl().bitmapData), "left");
			materials.addMaterial(new BitmapMaterial(new bb().bitmapData), "back");
			materials.addMaterial(new BitmapMaterial(new bu().bitmapData), "top");
			materials.addMaterial(new BitmapMaterial(new br().bitmapData), "right");
			materials.addMaterial(new BitmapMaterial(new bd().bitmapData), "bottom");

			for each (var material:BitmapMaterial in materials.materialsByName) {
				material.doubleSided = true;
			}

			return materials;
		}
	}
}

• download Skybox.as

See the line material.doubleSided = true;? That’s needed since we’re inside the cube that is the skybox. Since normally you can only see objects from the outside we’re setting the double-sidedness of the skybox. Perhaps a better solution is to flip the faces of the skybox and leave out the double-sidedness all together:

		public function Skybox(bf:Class, bl:Class, bb:Class, bu:Class, br:Class, bd:Class, skysize:Number, quality:Number):void {
			super(generateMaterials(bf, bl, bb, bu, br, bd), skysize, skysize, skysize, quality, quality, quality);
			geometry.flipFaces(); // now you can only see the box from the inside...
		}

To use the Skybox class, here’s an example:

public class SkyboxTest {

		// skybox images
		[Embed (source="assets/hot_nebula_0.jpg")]
		private var BitmapFront:Class;
		[Embed (source="assets/hot_nebula_270.jpg")]
		private var BitmapRight:Class;
		[Embed (source="assets/hot_nebula_180.jpg")]
		private var BitmapBack:Class;
		[Embed (source="assets/hot_nebula_90.jpg")]
		private var BitmapLeft:Class;
		[Embed (source="assets/hot_nebula_bottom.jpg")]
		private var BitmapDown:Class;
		[Embed (source="assets/hot_nebula_top.jpg")]
		private var BitmapUp:Class;

		public static const SKYSIZE:Number = Number.MAX_VALUE;

		public function loadSkyBox(scene:Scene3D) {
			var skybox:Skybox = new Skybox(BitmapFront, BitmapLeft, BitmapBack, BitmapUp, BitmapRight, BitmapDown, SKYSIZE, Skybox.QUALITY_HIGH);
			scene.addChild(skybox);
		}
}

Here are the steps you need:

• define a bunch of textures in the top of your classes by embedding them and pass these classes to the Skybox constructor.
• pass in a size for your skybox: I’ve used Number.MAX_VALUE so the skybox won’t move or pixelate while I move through it with the camera.
• pass in a quality value: this can be any number actually, I just found 4, 6 and 8 to work nicely. These numbers determine how many segments are used in each of the faces of the skybox to avoid texture distortion and awkward transitions from one texture into another.

For my own convenience I’ve made a NebulaSkybox which simply encapsulates all the embedded images for the nebula sky:

	public class NebulaSkybox extends Skybox {

		// nebula skybox images
		[Embed (source="../../../assets/hot_nebula_0_lowquality.jpg")]
		private var BitmapFront:Class;
		[Embed (source="../../../assets/hot_nebula_270_lowquality.jpg")]
		private var BitmapRight:Class;
		[Embed (source="../../../assets/hot_nebula_180_lowquality.jpg")]
		private var BitmapBack:Class;
		[Embed (source="../../../assets/hot_nebula_90_lowquality.jpg")]
		private var BitmapLeft:Class;
		[Embed (source="../../../assets/hot_nebula_bottom_lowquality.jpg")]
		private var BitmapDown:Class;
		[Embed (source="../../../assets/hot_nebula_top_lowquality.jpg")]
		private var BitmapUp:Class;

		public function NebulaSkybox(skysize:Number, quality:Number) {
			super(BitmapFront, BitmapLeft, BitmapBack, BitmapUp, BitmapRight, BitmapDown, skysize, quality);
		}
	}

	public class SkyboxTest {

		public static const SKYSIZE:Number = Number.MAX_VALUE;

		public function loadSkyBox(scene:Scene3D) {
			var skybox:Skybox = new NebulaSkybox(SKYSIZE, Skybox.QUALITY_HIGH);
			scene.addChild(skybox);
		}
	}

trackback