Bump mapping in flash

I’ve been playing around lately with Papervision3D 2.0 which still in alpha yet. But this new version has a lot of new cool features one of the new features are shaders. So make things look like this:

mars2.png

PV3D has differents shaded materials to obtain different visual effects one of these shaded material can be used to make Bump mapping.
Bump mapping. From wikipedia:

Bump mapping is a computer graphics technique where at each pixel, a perturbation to the surface normal of the object being rendered is looked up in a heightmap and applied before the illumination calculation is done (see, for instance, Phong shading). The result is a richer, more detailed surface representation that more closely resembles the details inherent in the natural world.”

For example the surface of an orange. For this we need two textures one is the normal texture of the object and the second is the bumpmap, see the image below:

Sphere without bump mapping.

The bump map that is applied to the image below.
And the result is:

Enough introduction let’s do this on Papervision.
To do this on PV3D I used a Mars example luckily I found a bump map of Mars in google image.

mars texture

Mars bump map

[SWF(width="600", height="400", backgroundColor="#000000")]
    public class bumpmaptest extends Sprite
    {
        private var mViewport:Viewport3D ;
        private var mRenderEngine:BasicRenderEngine ;
        private var mScene:Scene3D ;

        private var mCamera:WASDCamera ;
        private var mPlanet:Sphere ;

        [Embed (source="MarsMap.jpg")]
        private var mMapClass:Class ;
        private var mMapImage:Bitmap = new mMapClass();

        [Embed (source="MarsBumpMap.jpg")]
        private var mMarsBumpmapClass:Class
        private var mBumpMapImage:Bitmap = new mMarsBumpmapClass();

        public function bumpmaptest()
        {
            // Create the viewport for the scene
            mViewport = new Viewport3D();
            // We Add the viewport
            addChild( mViewport );
            // Create the render engine.
            mRenderEngine = new BasicRenderEngine();
            // Create scene.
            mScene = new Scene3D();
            //I create a wasd camera so we can navigate the scene
            // using WASD and mouse drag-and-drop
            mCamera = new WASDCamera(stage);
            // set the camera focus.
            mCamera.focus = 1000 ;
	    mCamera.z = -2000 ;

            // To create shadows we need lights.
            var pointLight:PointLight3D = new PointLight3D(true);
            // we place the light.
            pointLight.moveUp(50);
            pointLight.moveRight(50);

            var fMat:BitmapMaterial = new BitmapMaterial( mMapImage.bitmapData );
            var fMatBump:BitmapMaterial = new BitmapMaterial( mBumpMapImage.bitmapData );

            var marsShader:PhongShader = new PhongShader(pointLight, 0xFFFFFF,0x303030,20, fMatBump.bitmap, fMat.bitmap);
            var fMatShaded:ShadedMaterial = new ShadedMaterial(fMat,marsShader);

            mPlanet = new Sphere(fMatShaded,250,16,16);

            mScene.addChild( mPlanet );

            stage.addEventListener(Event.ENTER_FRAME, Loop);

        }

        public function Loop( pEv:Event ):void
        {

            mPlanet.yaw( 0.25 ) ;

            mRenderEngine.renderScene( mScene, mCamera, mViewport );    

        }

    }

First we need to BitmapMaterial, one for the Mars Texture and other for the Mars bump map. The Bitmap material receive the bitmapData of the image.

var fMat:BitmapMaterial = new BitmapMaterial( mMapImage.bitmapData );
var fMatBump:BitmapMaterial = new BitmapMaterial( mBumpMapImage.bitmapData );

After this we need a PhongShader, the PhongShader constructor receives:
PhongShader( our previously created pointLight, the light color, the ambient color, the bumpMap bitmapData, the texture bitmapData or specularMap ) .

var marsShader:PhongShader = new PhongShader(pointLight, 0xFFFFFF,0x303030,20, fMatBump.bitmap, fMat.bitmap);

Once we have the phong shader we simply need a shader material. We use the BitmapMaterial for mars and the PhongShader convined to create a ShadedMaterial.
ShadedMaterial( Mars bitmapMaterial, and our marsShader a phong shader in this case).

var fMatShaded:ShadedMaterial = new ShadedMaterial(fMat,marsShader);

After create the ShadedMaterial you can use it wherever you want, in this case I use it on a sphere, but this can be used on loaded models too.

mPlanet = new Sphere(fMatShaded,250,16,16);
mScene.addChild( mPlanet );

You may find the source code of this example here.

Advertisements
Explore posts in the same categories: Actionscript, Papervision3D

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: