Monday, February 7, 2011

Skybox Textures Free Tutorial - Make Your Own Performance Skybox In Away3D

First thing you need is a proper skybox generator like Terragen.

How to script the camera settings in a text file with a TGS extension is shown here.

Alternatively, you can set the camera up by hand to render each frame by setting zoom to one and taking renders of 0, 90, -90, 180 degrees rotation as well as up and down with 90 and -90 whilst the other rotation value is zero.

Now, once we have the textures ready we can import them into the actionscript:

        [Embed(source='skybox5/up.jpg')]
        private var EarthUp:Class;
        [Embed(source='skybox5/front.jpg')]
        private var EarthFront:Class;
        [Embed(source='skybox5/left.jpg')]
        private var EarthLeft:Class;
        [Embed(source='skybox5/right.jpg')]
        private var EarthRight:Class;
        [Embed(source='skybox5/back.jpg')]
        private var EarthBack:Class;
 In this tutorial I will present a skybox with only five sides. I have eliminated the bottom face from the away3d skybox class to make a new class skybox5 as opposed to skybox6 where away3d provides a method of including all six images in one texture file.

The use of only 5 faces is for performance as the bottom face is never seen underneath the map's terrain. We just need to make sure the camera doesn't ever look over the edge of our 3D terrain!


In this next code in our game initialisation we need to turn each included file into a corresponding BitmapMaterial for our skybox class in away3D to accept out textures:
           var earthBackBmp:Bitmap = new EarthBack() as Bitmap;
            var back:BitmapMaterial = new BitmapMaterial(earthBackBmp.bitmapData);
            var earthFrontBmp:Bitmap = new EarthFront() as Bitmap;
            var front:BitmapMaterial = new BitmapMaterial(earthFrontBmp.bitmapData);
            var earthLeftBmp:Bitmap = new EarthLeft() as Bitmap;
            var left:BitmapMaterial = new BitmapMaterial(earthLeftBmp.bitmapData);
            var earthRightBmp:Bitmap = new EarthRight() as Bitmap;
            var right:BitmapMaterial = new BitmapMaterial(earthRightBmp.bitmapData);
            var earthUpBmp:Bitmap = new EarthUp() as Bitmap;
            var up:BitmapMaterial = new BitmapMaterial(earthUpBmp.bitmapData);
           
            skybox = new Skybox5( front, left, back, right, up );
            skybox.quarterFaces();
            scene.addChild( skybox );

Of course, the variable "skybox" of type Skybox5 was declared up top with the skybox texture image includes.

I will go ahead and display the the altered Away3D class file:

package away3d.primitives
{
    import away3d.core.base.*;
    import away3d.materials.*;

    /**
    * QTVR-style 360 panorama renderer that is initialized with six images.
    * A skybox contains six sides that are arranged like the inside of a cube.
    */
    public class Skybox5 extends Mesh
    {
        public function Skybox5(front:ITriangleMaterial, left:ITriangleMaterial, back:ITriangleMaterial, right:ITriangleMaterial, up:ITriangleMaterial)
        {
            super();

            var width:Number = 800000;
            var height:Number = 800000;
            var depth:Number = 800000;

            var v000:Vertex = new Vertex(-width/2, -height/2, -depth/2);
            var v001:Vertex = new Vertex(-width/2, -height/2, +depth/2);
            var v010:Vertex = new Vertex(-width/2, +height/2, -depth/2);
            var v011:Vertex = new Vertex(-width/2, +height/2, +depth/2);
            var v100:Vertex = new Vertex(+width/2, -height/2, -depth/2);
            var v101:Vertex = new Vertex(+width/2, -height/2, +depth/2);
            var v110:Vertex = new Vertex(+width/2, +height/2, -depth/2);
            var v111:Vertex = new Vertex(+width/2, +height/2, +depth/2);

            var uva:UV = new UV(1, 0);
            var uvb:UV = new UV(0, 0);
            var uvc:UV = new UV(0, 1);
            var uvd:UV = new UV(1, 1);

            addFace(new Face(v000, v001, v010, back, uva, uvb, uvd));
            addFace(new Face(v010, v001, v011, back, uvd, uvb, uvc));
                                          
            addFace(new Face(v100, v110, v101, front, uvb, uvc, uva));
            addFace(new Face(v110, v111, v101, front, uvc, uvd, uva));
                                          
            //addFace(new Face(v000, v100, v001, down, uvb, uvc, uva));
            //addFace(new Face(v001, v100, v101, down, uva, uvc, uvd));
                                                
            addFace(new Face(v010, v011, v110,  up, uvc, uvd, uvb));
            addFace(new Face(v011, v111, v110,  up, uvd, uva, uvb));

            addFace(new Face(v000, v010, v100, left, uvb, uvc, uva));
            addFace(new Face(v100, v010, v110, left, uva, uvc, uvd));
                                                               
            addFace(new Face(v011, v001, v101, right, uvd, uva, uvb));
            addFace(new Face(v011, v101, v111, right, uvd, uvb, uvc));

            quarterFaces();
            quarterFaces();

            mouseEnabled = false;
           
            type = "Skybox";
            url = "primitive";
        }
    }
   
}
 See I've only commented out the face creation which is as far as we need to go for this "3D sky box" performance increase. I've also removed the down skybox texture file parameter from the constructor method's input.

This should save us a fair bit of memory and processing time as the sixth image does not need to embedded or used and the sixth face which is never seen... is never created and therefore never rendered. :P

Here are some generated skybox textures download them directly for use in your own flash games. These images are 512x512 and compressed with JPEG to 80% quality.

Away3d skybox example.

Use a five sided skybox instead of the away3d skybox6.

Away3d skybox tutorial for performance boost. Remember to keep the zoom at exactly 1 when rendering skybox textures or else the images will not line up correctly with each other and the collection will not match.

A good skybox generator can do wonders in simplifying complex sky simulations.

This is the last texture file so I hope you've enjoyed this 3d skybox tutorial and good luck with your AS3 projects!

No comments:

Post a Comment

Give me your best comment. *_*