"Imagination is more important than knowledge." -Albert Einstein

Looping videos in Papervision3D

Posted: November 16th, 2009 | Author: admin | Filed under: papervision3D | No Comments »

I was working on an Augmented Reality bit this weekend which involved a looping video. Normally this is a harmless operation which involves a simple onStreamStatus event, that by passing a “NetStream.Play.Stop” triggers a _netStream.seek(0); function. But when I tried that in PV3d the video would not loop… it was pretty frustrating, but eventually I figured out that the VideoStreamMaterial class in the Papervision3D package stopped rendering upon a “NetStream.Play.Stop” event, but didn’t resume it on a “NetStream.Seek.Notify” event, which I had to manually add.



this is how the function looks like after the change:

private function onStreamStatus ( event:NetStatusEvent ):void
        {
            switch ( event.info.code )
            {
                case "NetStream.Play.Start":
                    animated = true;
                    break;
                case "NetStream.Unpause.Notify":
                    animated = true;   
                    break;
                case "NetStream.Seek.Notify":
                    animated = true;
                    break;
                case "NetStream.Play.Failed":
                    animated = false;
                    break;
                case "NetStream.Play.Stop":
                    animated = false;
                    break;
                case "NetStream.Play.StreamNotFound":
                    animated = false;
                    break;
                case "NetStream.Pause.Notify":
                    animated = false;
                    break;
            }          
        }

Elegant camera rotation using Quaternions in Papervision3D

Posted: September 24th, 2009 | Author: admin | Filed under: papervision3D, tips and tricks | No Comments »

Quaternions sound really scary… and I admit, they are. I don’t pretend to even begin to understand the math behind it, but using Quaternions in your code will make transitions look much nicer! It is something really helpful if you’re moving your camera around in Papervision3D to match objects’ rotation.

here’s an example that shows the difference between normal approach and the quaternion one:

Picture 1

source

so — what are quaternions?? you can read about it in Wikipedia, but for our purposes, we’re using it to calculate the SHORTEST route to a certain rotation (on all axises). we basically take the beginning angle, end angle, assign a SLERP value (SLERP = spherical linear interpolation) and tween it!

It’s really not that much when it comes down to it. here’s what the code should look like:

private function calculateQuaternions() : void
{
    camTarget.extra = {slerp:0};
    startQuaternion = Quaternion.createFromMatrix(camTarget.transform);
    endQuaternion = Quaternion.createFromMatrix(_selectedPlane.transform);
    TweenMax.to(camTarget.extra, .5, {slerp:1, ease:Quad.easeInOut, onUpdate:slerpMe});
}

private function slerpMe():void
{
    var quaternion:Quaternion = Quaternion.slerp(startQuaternion, endQuaternion, camTarget.extra.slerp);
    camTarget.transform.copy3x3(quaternion.matrix);
}

SOMETHING TO LOOK OUT FOR — it you’re scaling the object you’re copying the transformation from the quaternion calculation will be incorrect.

There are other approaches to this, but I think it’s the simplest one. Here is a good post about using it for an object rather than the camera.


Combining Papervision3D with Old-School Magic

Posted: September 14th, 2009 | Author: admin | Filed under: papervision3D | 1 Comment »

I’ve been doing a lot of papervision3D lately. And though I really like using it, I think many sites over-use it, which results in a clunky user experience. Sometimes it’s more efficient (and easier) to use “fake” 3D techniques TOGETHER with PV3D (or any other 3D engine for that matter) to achieve certain effects.  It can perform better, and create a more appealing look & feel.  A good example for this is the site What’s The Real Cost — there’s a big 3D cube with some colorful dots flying around it.  I think it’s a great example of how to use fake 3d with papervision3D to enhance the visuals.

To create a similar effect, all you need to do is have 3 layers of sprites, with the papervision3D layer in the middle.  Create simple sine waves for the x,y positions and scale of dynamically created circles. to have the circles go in front and behind the cube, simply switch the parent of the circle according to a size threshold.

The result is pretty cool:

fake3d

source