Creating Spherical Panorama Images

March 5, 2009

Intro

Spherical panoramas are easy to make since you only have to throw one image onto a sphere. Amanda Verette, one of my graphic designers just finished her video tutorials series on how to make them. It covers setting up the camera, stitching, processing, and Papervision3D. The YouTube and resource links are given below:

Spherical Panorama Video Series

Part 1: http://www.youtube.com/watch?v=wfkLQ93Uey0
Part 2: http://www.youtube.com/watch?v=hhjuSIzLXCE
Part 3: http://www.youtube.com/watch?v=AKpVboahayg
Part 4: http://www.youtube.com/watch?v=NPcniBDc6Ec
Part 5: http://www.youtube.com/watch?v=nHOPLsqmLrg
Part 6: http://www.youtube.com/watch?v=nuz8VOv__-o
Part 7: http://www.youtube.com/watch?v=WCIFNx1VtWg
Part 8: http://www.youtube.com/watch?v=b7Zc4kQom_c

Assets

Pano: http://www.professionalpapervision.com/demos/web/panoresources/PanoReferences.zip
Code: http://flex3cookbook1.googlecode.com/files/SphericalPano.zip

Advertisements

Flash CS4 Spherical Panorama (animating uvtData)

January 24, 2009

Intro

Creating a CS4 Panorama has a unique twist – literally! You actually don’t rotate the primitive but you animate its texture, using the code snippet below:

public function step(moveU:Number, moveV:Number=0.0):void {
for (var i=0; i<uvtData.length; i+=2) {
uvtData[i++] -= moveU;
uvtData[i] += moveV;
// each loop i increases by 3 because skiping over the t-coordinate
}
}

The uvtData is easily animated just by skipping through correct U or V values of the uvtData vector and adding a small increment. Click on the image below to see the web demo.

Panorama of NKU Bridge

Panorama of NKU Bridge

As in the previous Super Prim post, Petri Leskinen’s great work on Pixelero http://pixelero.wordpress.com/ was key to this creation. He demonstrates an animated tube which with a little work I was able to turn into this panorama.

Demo: Click Here

Source: Click Here

YouTube: Coming Soon!

Discussion

The encapsulated code very closely resembles the OOP regimentation of Papervision3D. The CS4PanoPrim wrapper class instantiates the SpherePano primitive. And the SpherePano constructor function has 5 input parameters: material, width, height, hSegments, and wSegments, as shown below:

spherePano = new SpherePano(bmp, 500.0, 500.0, 32, 32);

The SpherePanoPrim is set up very much like the Super Prim (previous post) with the addition of a new mask function, which gives you the ability to trim the look of your pano.

private function addMyMask():void {
// mask crops that to a rectangle
myMask = new Sprite();

myMask.graphics.lineStyle(0.0,0×00,1.0);
myMask.graphics.beginFill(0x00,1.0);
myMask.graphics.drawRect(-w/2,-h/2,w,h);

myMask.graphics.endFill();
addChild(myMask);
this.mask = myMask;
}

The mask is just a simple sprite that uses the “this.mask” method to mask your pano.

If you want to learn how to make spherical pano images check out the following YouTube links by Amanda Verrette (one of my graphic designers):

Part 1: http://www.youtube.com/watch?v=wfkLQ93Uey0
Part 2: http://www.youtube.com/watch?v=hhjuSIzLXCE
Part 3: http://www.youtube.com/watch?v=AKpVboahayg

Parts 4, 5, 6, 7, and 8 are still in production.

There’s still more work to do on this before release, but it’s great starter code. And harnesses the OOP structure of Papervision3D. To view both classes discussed above click the more link below:

Read the rest of this entry »


Creating a Spherical Panorama in Papervision

October 25, 2008

Panoramas are both fun and easy to create in Papervision. You rez a cube or sphere on the stage and put an image on it. You then place a spinning camera in the center. That’s all there is to it!

So what’s the secret behind a great panorama?

The secret of making great panoramas is in using great images. In an upcoming series Amanda Verette (one of my graphic designers) will be posting a series of video tutorials on how to create fantastic spherical images using a fish eye lens and various photo editing tools. But until then I’ll explain the Papervision code.

Here’s one of Amanda’s spherical photos. Click on the image to see the Papervision Panorama in action.

Spherical Panorama Image

Spherical Panorama Image

Demo: http://www.professionalpapervision.com/demos/web/sphericalpano/

Source: SphericalPano.zip

YouTube

Coding a Panorama is simple. Download the full source code by clicking the source link above, and click the more button below to see how it works.

Read the rest of this entry »