Lighting Bitmaps in Papervision

1 Comment

This is a technical article explaining how to code a light source into your Papervision 3D scene. Papervision is an open source 3d library for the Flash platform.

Lighting in Papervision is a very useful tool. It helps add realism to your 3D project. Often times, you will have a scene or 3D objects that have textures on them using bitmaps. You can easily add lighting effects to these textures.

First you’ll need to add the following import statements:
import org.papervision3d.lights.PointLight3D;
import org.papervision3d.materials.shaders.PhongShader;
import org.papervision3d.materials.shaders.ShadedMaterial;

Phong Shading is a set of 3D rendering techniques which includes a model for reflecting light onto surfaces. It was invented by Bui Tuong Phong at the University of Utah, who published them in his 1973 Ph.D. dissertation.

Where you set up your scene, just create a light source
light = new PointLight3D();

In the part where you create your 3D objects that you want to light, you will create a PhongShader based on the light source and a ShadedMaterial based on your BitmapMaterial and your PhongShader. Please note that it HAS to be a BitmapMaterial and not a BitmapFileMaterial.

var earthBitmap:Bitmap = new earthAsset() as Bitmap;
var mat:BitmapMaterial = new BitmapMaterial(earthBitmap.bitmapData, true);

// create a shader using the light source
var phongShader:PhongShader = new PhongShader(light, 0xFFFFFF, 0x000000, 10);

// create the material based on the Phong shader
var phongShaderMat:ShadedMaterial = new ShadedMaterial(mat, phongShader);

globe = new Sphere(phongShaderMat, 200, 20, 20);

view.scene.addChild( globe );

The project source code is available for download here.

Popularity: 12% [?]

Using a WiiMote to Control an X-Wing

2 Comments

I spent this afternoon putting together a quick demo for my Rich Internet Interfaces Beyond Mice and Keyboards talk I’m giving at the DePaul University iTea Seminar tomorrow. The example is a simple one that illustrates using a WiiMote as an interface to controlling a 3D model. This can be easily used as a game control and or more general UI control. I believe it is a more natural way to interface with 3D elements navigating in 3D space and can be generalized to let people more intuitively navigate through and interface with software such as the operating system. After a few hours of looking for the WiiMote, charging it and some coding, I’ve put together this simple demo:

I can’t claim credit for putting together code to display a 3D X-Wing. I’m not interested in that. I quickly found what I was looking for here: http://code.google.com/p/papervision3d/downloads/list – the source code repository for PaperVision – the open source 3D engine for Flash. At the very bottom there’s sample code for displaying a 3D X-Wing.

First things first, you will need the WiiFlashServer that interfaces the WiiMote with your Mac. That code and supporting documentation can be found here: http://wiiflash.bytearray.org/. There are 2 pieces to the puzzle here. The WiiFlashServer which listens to the WiiMote and sends messages to your app and the WiiFlash Actionscript API which can receive those messages.

Once you download the Actionscript API and put that in your project directory, include it in your application:

import org.wiiflash.Wiimote;
import org.wiiflash.events.*;

var wiimote:Wiimote;

Initialize the Wiimote like so:

wiimote = new Wiimote();
wiimote.addEventListener( Event.CONNECT, onWiimoteConnect );

wiimote.connect();

The only thing we really have to do now is to use the pitch, yaw and roll values of the WiiMote and use them to control the X-Wing, like so:

function handleFrames(e:Event):void
{
var rotX = 0;
var rotY = 0;
var rotZ = 0;

if (!isNaN(wiimote.roll))
rotX = wiimote.roll/Math.PI * 180;

if (!isNaN(wiimote.yaw))
rotZ = wiimote.yaw/Math.PI * 180;

if (!isNaN(wiimote.pitch))
rotY = wiimote.pitch/Math.PI * 180;

// no easing - animation too jagged
//group.rotationX = -rotY;
////group.rotationY = rotZ;
//group.rotationZ = -rotX;

// added easing to smoothen motion
group.rotationX += ( -rotY - group.rotationX) / EASING;
group.rotationZ += ( -rotX - group.rotationZ) / EASING;
}

You can see from the code there’s a section I commented out. You can use the raw WiiMote values to feed to the X-Wing directly but I found that the values can be jumpy and discreet causing the X-Wing to turn and move with a lot of jitter. I added a simple easing function to make the movements smoother.

As you can see, it’s not rocket science. With a little bit more work, we can easily add other controls like button presses to control the firing of the X-Wing.

Here’s the link to the source if you’re interested. Thanks for watching.

Popularity: 6% [?]

Set Up Papervision 2.0 for Flex 3 in 3 Minutes Flat

25 Comments

Anybody who knows me knows that I’m all about quick and dirty, get it done, up and running and worry about it later. I don’t like to waste time and I’m sure you don’t either. If you want to set up Papervision Great White for Flex fast, you’ve come to the right place. You got your timer ready? Here we go:

  1. Create a new Flex project, called it FlexPapervision Base. Time elapsed: 20 seconds.
  2. Drop the Papervision library into your libs folder. You can download the Papervision library at the Google Code repository, but that’s too messy and going to take too much time. I’ve taken the liberty of downloading it and compiling it into an easy to consume swc right here. Time elapsed: 15 seconds. [If you are using Eclipse, create a libs folder in your project. You'll also need to add the libs folder to your build path - Go to Project -> Properties -> Flex Build Path -> Library Path, and add the libs folder]
  3. Assuming you have some Flex basics and Papervision basics, here’s the essential code:
            // these 3 lines are key to putting Papervision in Flex
            var uicomp:UIComponent = new UIComponent();
            canvasPv3D.addChild( uicomp );
            uicomp.addChild( viewport );
     

    canvasPv3D is just a regular Flex Canvas. You add a Papervision viewport to a UIComponent which can then be added to a Flex Canvas. That’s it. Here’s the complete FlexPapervisionBase.mxml file

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onInit(event);">
            <mx:Script>
                    <![CDATA[
    import mx.core.UIComponent;

    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.render.BasicRenderEngine;
    import org.papervision3d.objects.DisplayObject3D;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;

    import org.papervision3d.materials.ColorMaterial;
    import org.papervision3d.objects.primitives.Plane;

    private var renderer:BasicRenderEngine = new BasicRenderEngine();
    private var scene:Scene3D = new Scene3D();
    private var camera:Camera3D = new Camera3D;
    private var viewport:Viewport3D;

    private var plane:Plane;
    private var angle:int = 0;
                           
    protected function onInit( event:Event ) : void {

            viewport = new Viewport3D(canvasPv3D.width, canvasPv3D.height, true, true);
           
            // these 3 lines are key to putting Papervision in Flex
            var uicomp:UIComponent = new UIComponent();
            canvasPv3D.addChild( uicomp );
            uicomp.addChild( viewport );
           
           
            camera.z = -500;
           
            var mat:ColorMaterial = new ColorMaterial();
            mat.doubleSided = true;
           
            plane = new Plane(mat, 200, 200, 4, 4);
            scene.addChild(plane);
           
            // update the scene every frame
            canvasPv3D.addEventListener(Event.ENTER_FRAME,onEnterFrame);
    }

    private function onEnterFrame( event : Event ):void {
           
            angle = angle+=1%360;
            plane.rotationY = angle;
           
            // render the scene on every frame
            renderer.renderScene(scene,camera,viewport);
    }
                    ]]>
            </mx:Script>
           
            <mx:Canvas id="canvasPv3D" width="100%" height="100%"/>
                   
    </mx:Application>
     

    All this project does is put a 3D plane in the scene and rotates it 1 degree every frame.

    Time to read this bullet point and copy paste this piece of code into your project: 40 seconds.

If you’re feeling super lazy and can’t even be bothered to create a project of your own, here’s the project: FlexPapervisionBase.zip

This is what the end product looks like:

Your welcome.

Popularity: 16% [?]

Tutorio.us – New Flash Tutorial Website

No Comments

My friend Zack Jordan has recently just launched a new Flash tutorial website called Tutorio.us. It is currently an aggregate website which compiles a list of all the Flash tutorials around the web, although he may have his own content in the future. The value add to this site is Zack has gone to the immense trouble of sorting and categorizing the different tutorials into a cohesive course or series of lessons. The idea is to eventually have a very complete list of tutorials where developers of varying skill levels can easily see which tutorials are relevant to them. Keep an eye on this site if you’re a Flash or ActionScript developer.

Popularity: 2% [?]

Flash ActionScript stage.stageWidth vs stage.width

5 Comments

I was never clear on the differences between stageWidth and the width properties of the stage object. Here it is:

stage.stageWidth is the width of the Flash Player
stage.width is the width of content within the stage. So if you have nothing on the stage, stage.width would be 0.

Popularity: 79% [?]

Older Entries