PV3D Bump Map Inside a Panorama

Intro

In the previsions post, we showed you how to create a Panorama image.

So … not to leave you hanging, we’ll now apply that new knowledge to putting a Bump Map inside a Pano. Click the image below to see the demo.

Bump Map in a Pano

Bump Map in a Pano

Demo

Source

YouTube

Discussion

The code is just a combination of three things. The panorama code that you can download from

Code: http://flex3cookbook1.googlecode.com/files/SphericalPano.zip

a bump map

//Declare materials
var bm:BitmapAsset = new graphic() as BitmapAsset;
var em:BitmapAsset = new envmap() as BitmapAsset;
var bmc:BitmapData = bm.bitmapData.clone();
bmc.applyFilter(bmc, bmc.rect, new Point(), new BlurFilter(3,3,3));
//Prepare materials
var envShaded:EnvMapShader = new EnvMapShader(pointLight, em.bitmapData, em.bitmapData,0,bmc);
var shadedMaterial:ShadedMaterial = new ShadedMaterial(new BitmapMaterial(bm.bitmapData),envShaded);
libBump = new Sphere(shadedMaterial, 400, 16,16);

//Add Bump to Pano
scene.addChild(libBump);

and a simple rotation function that keeps you oriented around the spherical bump map

private function rotateXY(ball:Sphere, angleX:Number, angleY:Number):void
{
var cosX:Number = Math.cos(angleX*Math.PI/180);
var sinX:Number = Math.sin(angleX*Math.PI/180);

var cosY:Number = Math.cos(angleY*Math.PI/180);
var sinY:Number = Math.sin(angleY*Math.PI/180);

var myX:Number = 1000 * sinY*cosX;
var myZ:Number = 1000 * cosY*cosX-1000 ;
var myY:Number = 1000 * sinX;

ball.x = myX;
ball.z = myZ;
ball.y = -myY;
}

All of this is explained in more detail in the book, but you’ve got enough here to get you going in the right direction.

Embed Trick for Flash

This code was developed as an ActionScript package inside of Adobe Flex. And can be transferred directly into Flash by just using the document class to call this class plus the following trick.

The embed tag (used in the code) does not work in Flash … so what do you do? Link the Flex library to Flash. Aha, and now you’ve got it. I show on the book’s website how to do this in a video…

Here are some of the resources used.

Pano Image (created by Amanda Verette at NKU)

Pano Used for Background a Bump Map

Pano Used for Background and Bump Map

EnvMap Image (from Ralph Hauwert’s LA RMI Training)

EnvMap (from Ralph Hauwert's LA RMI Training)

EnvMap (from Ralph Hauwert)

Now you’re ready to go take some pano’s and create your own pano-bump maps … so go for it! To see the entire code download it from the link above or click the button below:

Complete Code

package
{
import caurina.transitions.*;

import flash.display.BitmapData;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.BlurFilter;
import flash.geom.Point;

import mx.core.BitmapAsset;
import mx.core.MovieClipAsset;

import org.papervision3d.cameras.CameraType;
import org.papervision3d.lights.PointLight3D;
import org.papervision3d.materials.*;
import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
import org.papervision3d.materials.shadematerials.GouraudMaterial;
import org.papervision3d.materials.shadematerials.PhongMaterial;
import org.papervision3d.materials.shaders.EnvMapShader;
import org.papervision3d.materials.shaders.ShadedMaterial;
import org.papervision3d.materials.utils.*;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;

public class ShaderDemo extends BasicView
{
[Embed(source=”assets/library2.swf”)]
private var panoAsset:Class;

[Embed(source=”image/LibraryPano.jpg”)]
public static var graphic:Class;

[Embed(source=”image/envTest.png”)]
public static var envmap:Class;

public var pointLight:PointLight3D = new PointLight3D();
public var earth:Sphere;

private var panoSphere:Sphere;
private var sphereMat:MovieMaterial;

private var myMouseDown:Boolean=false;

public function ShaderDemo()
{
super(1, 1, true, false, CameraType.FREE);
init3D();
startRendering();
opaqueBackground = 0;
}

protected function init3D():void
{

var gouraudShader:GouraudMaterial = new GouraudMaterial(pointLight);
var flatShader:FlatShadeMaterial = new FlatShadeMaterial(pointLight);
var phongShader:PhongMaterial = new PhongMaterial(pointLight, 0xFFFFFF,0, 20);
var bm:BitmapAsset = new graphic() as BitmapAsset;
var em:BitmapAsset = new envmap() as BitmapAsset;
var bmc:BitmapData = bm.bitmapData.clone();
bmc.applyFilter(bmc, bmc.rect, new Point(), new BlurFilter(3,3,3));
//addChild(new Bitmap(bmc));

var envShaded:EnvMapShader = new EnvMapShader(pointLight, em.bitmapData, em.bitmapData,0,bmc);
var shadedMaterial:ShadedMaterial = new ShadedMaterial(new BitmapMaterial(bm.bitmapData),envShaded);

earth = new Sphere(shadedMaterial, 400, 16,16);
scene.addChild(earth);

//Create the pano material
var movieAsset:MovieClipAsset = new panoAsset();
sphereMat = new MovieMaterial(movieAsset, false);
sphereMat.opposite = true;
sphereMat.animated = true;

//Smooth is heavy, but it makes stuff look nicer…you could make it switch dynamically.
sphereMat.smooth = true;

//Create the panosphere.
panoSphere = new Sphere(sphereMat, 25000, 30,30);

scene.addChild(panoSphere);

camera.x = camera.y = 0;
camera.z =-1000;
camera.focus = 300;
camera.zoom = 2;

//earth.rotationY=180;

addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
addEventListener(MouseEvent.ROLL_OVER, onMouseUp);

function onMouseDown() : void
{
myMouseDown = true;

};

function onMouseUp() : void
{
myMouseDown = false;

};
}

override protected function onRenderTick(event:Event=null):void
{

if (myMouseDown)
{
camera.rotationY += (mouseX – stage.width / 2) / 50;

camera.rotationX += (mouseY – stage.height / 2) / 50;

rotateXY(earth, camera.rotationX, camera.rotationY);

}

super.onRenderTick(event);
}

private function rotateXY(ball:Sphere, angleX:Number, angleY:Number):void
{
var cosX:Number = Math.cos(angleX*Math.PI/180);
var sinX:Number = Math.sin(angleX*Math.PI/180);

var cosY:Number = Math.cos(angleY*Math.PI/180);
var sinY:Number = Math.sin(angleY*Math.PI/180);

var myX:Number = 1000 * sinY*cosX;
var myZ:Number = 1000 * cosY*cosX-1000 ;
var myY:Number = 1000 * sinX;

ball.x = myX;
ball.z = myZ;
ball.y = -myY;
}

//Uss for just rotation around Y

private function rotateY(ball:Sphere, angleY:Number):void
{
var cosY:Number = Math.cos(angleY*Math.PI/180);
var sinY:Number = Math.sin(angleY*Math.PI/180);

var x1:Number = 1000 * sinY;
var z1:Number = 1000 * cosY-1000 ;

ball.x = x1;
ball.z = z1;

}

}
}

Advertisements

2 Responses to PV3D Bump Map Inside a Panorama

  1. […] > PV3D Bump Map Inside a Panorama « Professional Papervision3D Book […]

  2. eric says:

    Michael- thanks for this site! Where do i buy the book?
    Question about the ‘simple’ formula (rotateXY). i get the first part, but can you explain this last part more:

    var myX:Number = 1000 * sinY*cosX;
    var myZ:Number = 1000 * cosY*cosX-1000 ;
    var myY:Number = 1000 * sinX;

    it’s here i get lost… why sinY*cosX and cosY*cosX-1000?

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: