Adding Video to a Papervision3D Curved Plane

March 9, 2009

Intro

Note: This post lays the foundation for my next post which shows how to put video on a CS4 Primitive at

Putting Video on a CS4 Primitive

(here we do it for Papervision3D).

The real power of Papervision3D is its strong OOP (object oriented) structure. It lets you to do some very robust things, such as put video on any primitive. And in this post, you place a simple video on a curved Plane (developed in Chapter 3 of the book).

Video on a Curved Primitive

Video on a Curved Primitive

Demo

Source

Discussion

Here the basics on how it’s created.

At the heart of the program is the NetStream class that allows you to bring a video into Flash. This class will be discussed in greater detail in Chapter 11, which is on the Flash Media Server. The two important import classes are media and net classes, which contain Sound, Video, and net Connection methods. Armed with these you can instantiate your video net Connection and net Stream.

//net stream assets
private var myConnection : NetConnection;
private var myStream : NetStream;
private var myVideo : Video;

In addition to setting up Papervision3D and bringing in your curved video prim (which was covered in Chapter 3), you must load your video into your net Stream and then attach that net Stream to your instantiated video (myVideo) so you can play it on your curved prim.

private function loadMyVideo():void
{
//Set up Net Connection
myConnection = new NetConnection();
//Not on the media server
myConnection.connect(null);
myStream = new NetStream(myConnection);
//Set buffer time
myStream.bufferTime = 2;
//Set up My Stream for client
myStream.client = new Object();
//Instantiate the video
myVideo = new Video(320, 240);
myStream.play(“assets/eternity.flv”);
//Attach to local client side video
myVideo.attachNetStream(myStream);
}

One of the important tricks, shown in the code above, it to set your net Connection “connect” to null.

myConnection.connect(null);

This lets you stream from a local server (as opposed to a Flash Media Server). And as usual you run into the Flash security sandbox issue for streams coming from a server without a cross-domain policy. If you’ve been developing in Flash for a while you are familiar with this issue. And later in the book, you’ll learn how to use a little PHP to get around such problems.

After attaching your net Stream to your instantiated video object you can now place it on your curved prim.

videoMaterial = new VideoStreamMaterial(myVideo, myStream);
//videoMaterial.interactive = true;
videoMaterial.doubleSided = true;

//plane = new Plane(material applied to object, width, height, wSegments, hSegments);
planeCurve = new CurvedPlane(videoMaterial,32,24,8,8,10);
scene.addChild(planeCurve);

You’ll finally ready to use your Video Stream Material.

Place your video and stream in the Video Stream Material. Declare it double sided so when you spin your curved plane you see the video on the other side. Place that videoMaterial on your curved plane. And add that plane to your scene. Ta-da, video on a prim!


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


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 »


CS4 Super Primitive using Matrix3D

January 20, 2009

Intro

After creating a million custom primitives in Papervision3D, I have always wanted to create just one that did it all using parametric equations. But many of the algorithms used to generate the basic primitives in Papervision3D (Away3D is a little better) are so complicated that its hard to bring them altogether under one roof.

It’s something you need to do from the start. And with many thanks to Petri Leskinen (and a little recoding on my part) we can now do that as shown in the figure below.

Super Prim - Plane, Cylinder, Cone, Sphere, Half Torus

Super Prim - Plane, Cylinder, Cone, Sphere, Half Torus

Earth Map Courtesy of NASA/JPL-Caltech

Demo

Source

Petri on his blog Pixelero (http://pixelero.wordpress.com/) created a globe example which uses the parametric eqautaions of a sphere.

// polar coordinate:
var vc:Vector3D = new Vector3D(
Math.cos(iy)*Math.cos(ix),
Math.sin(iy),
Math.cos(iy)*Math.sin(ix)

);

// In the case of a sphere the normal is so easy:
vertexNormals.push(vc);

// the coordinate, scaled by radius
vertices.push(radius*vc.x, 1.05*radius*vc.y, radius*vc.z);

With a little recoding I was able to integrate a switch case and timer which iterates through the parametric equations of a plane, cylinder, cone, sphere, and half torus.

switch (number) {
case 0:
//Plane
paraVec = new Vector3D(-.5*(2-ix), .5*(iy),0);
break;
case 1:
//Cylinder
paraVec = new Vector3D(
Math.cos(ix), iy, Math.sin(ix));
break;
case 2:
//Cone
paraVec = new Vector3D(
(iy)*Math.cos(ix), Math.sin(iy), (iy)*Math.sin(ix));
break;
case 3:
//Sphere
paraVec = new Vector3D(
Math.cos(iy)*Math.cos(ix), Math.sin(iy), Math.cos(iy)*Math.sin(ix));
break;
case 4:
//Torus
paraVec = new Vector3D(
(1+.4*Math.cos(iy))*Math.cos(ix), .4*Math.sin(iy), (1+.4*Math.cos(iy))*Math.sin(ix));
break;
default:
trace ( ” no case tested true ” )
}

The heart of the code runs on the Matrix3D class which does all the perspective scaling for you automatically. This is all explained in the book and its accompanying videos.

To see the complete code, click the more button below.

Read the rest of this entry »


The Elusive Torus – Papervision

January 5, 2009

Intro

I’ve been waiting for a torus primitive to magically appear in Papervision since version 1.7. And it didn’t happen – so I wrote one. Or better yet, I ported the Away3D torus over to Papervision. Thanks Away3D! I’ve always thought that Away3D had a more advanced approach to their primitive set (than Papervision) and this torus port proves it.

The port is actually (almost) set up so it can be generalized to accept any set of parametric equations with two parameters. I have not generalized it, but with a few lines of code you’re there.

I have to thank Gabriel Putnam once again, he had created the geodesic sphere (shown in the previous post) in both Papervision and Away3D and I was able to look at what he did and do the same thing for the torus.

The elusive Torus

The Elusive Torus

Discussion

Here are the steps you need to take to port the Away3D torus over to Papervision:

  • Place the Away3D Torus primitive in the Papervision 0rg/papervision3d/objects/primitives folder
  • Change the package statement to package org.papervision3d.objects.primitives
  • Replace the Sand3D imports with the appropriate Papervision imports

import org.papervision3d.core.*;
import org.papervision3d.core.proto.*;
import org.papervision3d.core.geom.*;
import org.papervision3d.core.geom.renderables.Triangle3D;
import org.papervision3d.core.geom.renderables.Vertex3D;
import org.papervision3d.core.math.NumberUV;

  • Delete use namespace arcane
  • Add super(material, new Array(), new Array(), null); to the constructor method
  • Add to the buildTorus method the following lines of code:

this.geometry.ready = true;
var aVertice:Array = this.geometry.vertices;
var aFace:Array = this.geometry.faces;
var aUV:Array = new Array();

  • Add aVertice.push(grid[i][j]); to the parametric vertex generation under the if (yUp) statement
  • Change createVertex to Vertex3D
  • Change all Vertex Type declarations to Vertex3D
  • Change all UV Type declarations to NumberUV
  • Replace

addFace(createFace(a, b, c, null, uva, uvb, uvc));
addFace(createFace(d, c, b, null, uvd, uvc, uvb));

with

aFace.push( new Triangle3D( this, [a, b, c], material, [uva, uvb, uvc])); aFace.push( new Triangle3D( this, [d, c, b], material, [uvd, uvc, uvb]));

  • Delete all non-contributing statements (this is pretty easy if you are editing in Flex – just delete the statements that give you an error when you run the torus program)

This post demonstrates how easy it is to port from Away3D, and sets the framework for creating a generalized parametric primitive.

To see the entire torus primitive and its wrapper, click the more button below

Read the rest of this entry »