here we go again, another papervision3D demo featuring math permeated lines. this time im working with a classic piece of code known as the PQ torus. the vague idea is that you have 2 numbers (P + Q) that are used in the algorithm to define the knot. in general, given P + Q mutually prime, the line wraps meridionally around the torus P times and wraps the longitudinally around it Q times. i was having some trouble grasping exactly how this was going to be achieved, until i read this article on blackpawn’s website. he really breaks down the algo to a very simplistic level...

calculus

r = .5 * (2 + sin(Q * Φ))
x = r * cos(P * Φ)
y = r * cos(Q * Φ)
z = r * sin(P * Φ)

a question popped up on the papervision3D mailing list the other day about using the lines3D class to trace a 3D object. i found the idea fascinating, so i whipped up this little demo to demonstrate how simple it actually was. i started out by creating a simple cylinder with a wide base and small top, and setting its visibility to false. then creating my lines3D object. finally in the render loop i create a new line3D that connects each vertice. by checking to see in a counter variable is less than the total object vertice count ((box.geometry.vertices.length)), and adding a new line3D if the counter is less than that, or deleting all the lines and starting over.

check out that demo here
view the demo source

so that wasnt enough.
i decide that i wanted to trace the actual papervision3D logo. and since i have already made it in a font, it wasnt hard at all. working with the optimized version of the font on my site worked fine, but since there were so few verticies, the script would draw the logo in a matter of seconds. so instead of trying to devise a method of tweening from vertice to vertice i just went into font lab and added more points!
((the font used in this demo is available here))

now, i went into 3D studio max, clicked the "Splines" button, and created a new text object. i used the new PV3D.Flex.Font i just made, set the size to 100 (larger/smaller is fine) and typed in the letter "A" (the only character in the font).

after that i used the rotation tools to stand the letter upright, and moved it forward some. the next step is to do a mesh select, by clicking the modifiers tab and selecting "Mesh Select" from the dropdown menu. then in the mesh select parameters panel select vertices. now click back into your main perspective and select all the vertices (ctrl+a).


the next step is an important one ((and the one i always forget)) we need to give our 3D object a uvw mapping. still under the modifiers tab, select "UVW Mapping" from the dropdown list. and under the parameters panel make sure its mapping mode is set to "Planar". i was having all kinds of trouble exporting 3D objects that were based on points only. seraf explained to me that w/o a uvw mapping on your object the as3geomClassExporter cant map the u and v points onto the triangle mesh, which are needed for texturing purposes.


now its time to export our 3D logo, click on the tools tab and select max script, then run the as3geomClassExporter. set your package folder and the actual class name, then select papervision3D 2.0 from the dropdown list. for this particular object i left the scale set to 1. then click export class and save it in the same folder as you set in your package.



then its onto flex.
i decided i wanted to use the math-based color fade from my last demo again, so i couldnt use the standard color picker. this demo uses 2 states, normal and the color picker. which is just a 2nd state with a panel object w/ blank flex buttons on them. using the flex buttons worked out well because i was able to just set the color gradient to the same colors in the fade, or just solid ones for the normal sets. i tried to make is one a simple as possible so you can understand the core concepts of whats going on more than the over-all "flashy-ness" of the thing. so enjoy!

click here to view the demo
and its source of course!

we were discussing recursive algorithms and chaos theory at work yesterday. when the chemistry professor brought up the lorenz attractor. he was trying to draw one on the white board for about 10 minutes until i decided it would be easier to draw in flash, lol!

after a quick conversation w/ andy zupko about the new Line3D object, and my new CanvasView3D component for papervision, i made a sweet Lorenz attractor!

the algor is super simple

pseudo code

  x1 = x0 + h * a * (y0 - x0);
  y1 = y0 + h * (x0 * (b - z0) - y0);
  z1 = z0 + h * (x0 * y0 - c * z0); 

after my last post about creating an actionscript project that extends the basic view, i got to thinking... my flex canvas3D is getting a bit outdated. these days i just make canvas then add my viewport3D or a basicView to it. so why not create a new UIcomponent that extends basicView? why not indeed...

introducing my new class, called CanvasView3D! this little flex gem makes setting up papervision3D in an MXML setting simple. by creating the CanvasView3D component, and initializing it to a local variable, you will automatically create a scene3D, camera3D, viewport3D, and a basicRenderEngine, all the core components of any PV3D application!

first things first, add a new xml namespace to your flex application
in this case, its going to be com.fontvirus.*

mxml code

<mx:Application
      xmlns:mx="http://www.adobe.com/2006/mxml" 
      xmlns:xx="com.fontvirus.*"
      layout="absolute"
      applicationComplete="init3D()">
</mx:Application>

mxml code

<xx:CanvasView3D id="paperCanvas" top="0" bottom="0" left="0" right="0"/>
 

mxml code

<xx:CanvasView3D autoScaleMode="true" interactivity="false" autoClipMode="true" autoCullMode="true"/>
 

actionscript 3 code

var view:BasicView = paperCanvas.view;

actionscript 3 code

var cam:Camera3D = paperCanvas.view.camera;
cam.zoom = 10;
cam.focus = 2;
var scene:Scene3D = paperCanvas.view.scene;
scene.addChild(new DisplyObject3D());
var viewport:ViewPort3D = paperCanvas.view.viewport.
var num = viewport.lastRenderList.length;
var renderer:BasicRenderEngine = paperCanvas.view.renderer;
render.renderScene(cam, scene, view);

or

actionscript 3 code

view.camera.zoom = 10;
view.camera.focus = 2;
view.scene.addChild(new DisplyObject3D());
var num = view.viewport.lastRenderList.length;
view.renderer.renderScene(view.camera, view.scene, view.viewport);
 

the core PV3D team has released a new class called the basicView. the idea here is to create one object that already contains the camera, scene, viewport, and render engine needed to made a 3D scene in flash.

after reading the post about it on andy’s blog, you can see that this is a very simple technique. but lets take it one step further. why not create a new actionscipt project that extends basic view?! its very simple, and makes setting up your scene a snap!

actionscript3 code

package {
	import com.fontvirus.*;
	
	import flash.display.*;
	import flash.events.Event;
	
	import org.papervision3d.cameras.*;
	import org.papervision3d.core.render.data.RenderStatistics;
	import org.papervision3d.lights.*;
	import org.papervision3d.materials.shadematerials.*;
	import org.papervision3d.objects.primitives.*;
	import org.papervision3d.scenes.*;
	import org.papervision3d.view.*;
   [SWF(backgroundColor="#000000")]
	
	public class basicPV3D extends BasicView
	{
		private var thelight    :PointLight3D;
		private var thing       :Sphere;
		private var fps         :FlashFPS;
		private var stats       :RenderStatistics;
		public function basicPV3D():void
		{
			super(0,0,true,true,Camera3D.TYPE);
			stats = this.renderer.renderScene(this.scene, this.camera, this.viewport);
			this.viewport.autoClipping = false;
			init3D();
		}
		private function init3D():void
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			fps = new FlashFPS(0x006600, 0x000000, 0xffffff, 0, "kb");
			addChild(fps);
			thelight = new PointLight3D();
			scene = new Scene3D();
			thing = new Sphere(new PhongMaterial(thelight, 0x00FF00, 0x000000, 4), 500, 10, 14);
			scene.addChild(thing);
			startRendering();	
		}
		override protected function onRenderTick(event:Event=null):void
		{
			fps.update("rendered: " + stats.shadedTriangles + " polys");
			thing.rotationY++;
			super.onRenderTick(event);
		}
	}
}
 

the new pv3d 2.0 release features an entirely new way of dispatching and handling events. earlier versions of the engine utilized two different flavors of materials, regular and interactive. with this new release, you just have materials with a boolean interactive property.

with this simple demo, im trying to learn more about the new interactive scene events. first, you create a 3D scene, and set it's interactive flag to true:

actionscript3 code

 view = new Viewport3D(width, height, scaleToStage, interactive);
 

actionscript3 code

 skin = new CompositeMaterial();
 skin.interactive = true;

actionscript3 code

 terrain = new Plane(...);
 
 terrain.material.interactive = true;

actionscript3 code

 terrian.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, extrude);
 

actionscript3 events

 OBJECT_CLICK
 OBJECT_OVER
 OBJECT_OUT
 OBJECT_MOVE
 OBJECT_PRESS
 OBJECT_RELEASE
 OBJECT_RELEASE_OUTSIDE
 OBJECT_ADDED

working with the new pv3d 2.0 release, there are a lot of new features to learn. one of the most powerful being the new pointlight3D class. using this will allow you to create all kinds of cool shading effects. at first i was having some trouble deciding where the light is positioned by default. i tried setting the light’s visibility flag to true, but it still wasn’t rendering. after a bit of digging i discovered that the position of the light by default it set to (x:0, y:0, z:-1000), no wonder it wasn’t rendering, it was in the same postion as the camera!

so i decided to make a little flex demo for the new pointlight3D class. the flex form allows you to use sliders to move the x, y, and z position of the light, as well a an orbiting function. you can set the orbit to horizontal or vertical spin, as well as setting the radius and speed the light will orbit.

just a little note on the light’s visibility:
by default, your light object will not be visible (though the light casted from the object will be). to make your light visible you need to do two things:

first, when creating your light you need to set the showLight flag to true. second, you add your light to your scene3D (normally you don’t add the light to the scene, you just create it and use it later)

actionscript3 code

 thelight = new PointLight3D(true);
 scene.addChild(thelight);

well the time is finally upon us, for all of you who aren’t avid mailing list readers, papervsion3D 2.0 alpha ((code name: great white)) has been released for testing. and the team bringing real-time 3D in flash has gone all out this release! this versions new features boast shaded materials, custom shaders, the new ascollada (now with animation support), frustrum culling, multiple viewports, rendering to scene, and more.. not to mention the average 26% gain in overall fps!

this weekend my wife nina was out of town, which means that i had some time to sit down and check out some of pv3D 2.0’s new features. i made a simple demo of creating a 3D scene in flex using MXML. The demo basically lets you switch between a few different 3D models, ((the first two are by mr.doob and the rest are by me)) and the material drawn on it. this demo features the new flat shaded, cell shaded, gouraud shaded, and phong shaded materials at your disposal in the new version. as usual models exported from 3D studio max to actionscript 3 with the help of the awesome as3 geom class exporter.

click here to check out the demo
and click here to view the source

i guess this is more of a test then a real demo. in flex its extremely simple to access the bitmap data from any component on the screen as it is styled at that time. this includes things like text with in a text box.
In this example I create a flex panel
<mx:Panel id="myPanel" />

then create a bitmapdata object
var formTexture = new BitmapData;

then I draw the panel right into it
formTexture.draw(myPanel);

then I use that texture on a 3D plane with the help of papervsion3D. and a little glow filter just because...

heres the full source:

mxml and actionscript 3 code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:xx="com.fontvirus.*"
	layout="absolute" 
	backgroundGradientAlphas="[1.0, 1.0]" 
	backgroundGradientColors="[#000000, #555555]"
	creationComplete="init3D()"
	enterFrame="loop3D(event)">
<mx:Script>
	<![CDATA[
		import mx.controls.Alert;
		import org.papervision3d.cameras.Camera3D;
		import org.papervision3d.scenes.Scene3D;
		import org.papervision3d.objects.Plane;
		import org.papervision3d.objects.DisplayObject3D;
		import org.papervision3d.materials.BitmapMaterial;
		import com.fontvirus.FlexFPS;
		
		private var theFPS:FlexFPS;
		private var basePoint:Point;
		private var rect:Rectangle;
		private var formTexture:BitmapData;
		private var scene3D:Scene3D;
		private var camera:Camera3D;
		private var rootNode:DisplayObject3D;
		private var plane:DisplayObject3D;
	
		private function init3D():void {
			theFPS = new FlexFPS(0x006600, 0x000000, 0xFFFFFF);
			this.addChild(theFPS);
			var formwidth:Number = myPanel.width;
			var formheight:Number = myPanel.height;
							
			formTexture = new BitmapData (formwidth, formheight);
			
			scene3D = new Scene3D(paperCanvas.canvas);
		
			camera = new Camera3D();
			camera.zoom = 10;
			camera.focus = 200;
			
			rootNode = scene3D.addChild(new DisplayObject3D("rootNode"));
			rootNode.container = paperCanvas.canvas;
			
			var material1:BitmapMaterial = new BitmapMaterial(formTexture);
			material1.oneSide = false;
		
			plane = rootNode.addChild(new Plane(material1,formwidth,formheight,4,4), "plane");	
		}
		
		private function loop3D(event:Event):void {
			theFPS.update("rendered: " + scene3D.stats.rendered.toString());
			if(camera != null) {
				camera.x += ((mouseX * 5) - camera.x) * 0.10;
				camera.y += ((mouseY * 5) - camera.y) * 0.10;
				
				formTexture.draw(myPanel);
				rootNode = scene3D.getChildByName("rootNode");
				rootNode.container.filters = [new GlowFilter(0x00FF00, 1, 90, 90, 1, 1, false, false)];
				scene3D.renderCamera(camera);	
			}
		}			
		private function reset():void {
			txtname.text = "";
			txtpass.text = "";
		}
		private function hit():void {
			Alert.show("login success!", "fontvir.us", 1, this);
		}
	]]>
</mx:Script>
<mx:Panel id="myPanel" title="flexComponet3D" shadowDistance="6" shadowDirection="left" backgroundColor="#000000" color="#fFFFFF" cornerRadius="0" headerHeight="22" headerColors="[#000000, #666666]" width="209" backgroundAlpha="1.0" height="162" borderStyle="solid" x="10" y="62">		
	<mx:Form width="204" height="135" backgroundColor="#000000">
		<mx:FormItem label=" "/>
		<mx:FormItem label="name">
			<mx:TextInput width="83" backgroundColor="#666666" themeColor="#00FF00" color="#FFFFFF" id="txtname"/>
		</mx:FormItem>
		<mx:FormItem label="password">
			<mx:TextInput width="82" backgroundColor="#666666" themeColor="#00FF00" color="#FFFFFF" id="txtpass"/>
		</mx:FormItem>
			<mx:HBox width="100%">
				<mx:Button label="enter" textRollOverColor="#cccccc" textSelectedColor="#FFFFFF" color="#FFFFFF" fillColors="[#333333, #999999]" borderColor="#000000" themeColor="#00FF00" click="hit()"/>
				<mx:Button label="reset" textRollOverColor="#cccccc" textSelectedColor="#FFFFFF" color="#FFFFFF" fillColors="[#333333, #999999]" borderColor="#000000" themeColor="#00FF00" click="reset()"/>
			</mx:HBox>
	</mx:Form>
</mx:Panel>
<xx:Canvas3D id="paperCanvas" backgroundAlpha="0" width="100%" height="100%" x="235" y="0"/>
<mx:Style>
  Alert {
    corner-radius: 14;
    header-height: 27;
    header-colors: #999999, #000000;
    background-color: #000000;
    color: #ffffff;
    border-thickness: 4;
    border-color: #000000;
    panel-border-style: roundCorners;
    shadow-distance: 9;
    shadow-direction: right;
  }
  Button {
    width: 85;
    height: 24;
    border-thickness: 1;
    corner-radius: 4;
    fill-colors: #666666, #999999;
    border-color: #666666;
    theme-color: #000000;
    text-roll-over-color: #ffffff;
    text-selected-color: #cccccc;
    color: #cccccc;
  }
</mx:Style>
</mx:Application>

check out this new ad campaign for sony walkman in japan created by keita, and called RECYOU. this crazy web-promotion site combines flash interactivity with sound and motion visuals created with papervision3D.

clicking "S" allows you to upload a photo, from witch they use facial recognition software to define the key areas of your face. then they crop in a new sony walkman and make you sing.

they also send you a copy of the video they create of you in mp4 format, along with a release form that says you may appear on japanese tv.

i took about a day until i found myself on the site, im in the photo above
(with the beard and the ear goggles)

so i had the chance this weekend to create a few 3D models and export their geometry into papervision3D primitives. so i decided to create a demo, using both my as3 torusKnot primitives and the new flex accordion component. about the time i finished my demo i decided to re-sync my pv3d folder with the svn. at that exact same moment their was a slip-up. somehow one of the new dev materials got leaked into the public svn. the new material features dynamic lighting! so i decided to hack it into my new demo. so enjoy my custom primitive shadedColorMaterial demo created in flex3.
updated with fullscreen support!

view the demo or the source (right click enabled)
stay in the loop, join the papervison3D mailing list.

a new component for 3D studio max has arrived that allows you to export the geometry of you model directly into a format that actionscript 3 can understand. the plugin has options for exporting to papervision3d, away3d, and sandy. it was developed my dreammania.net and can be downloaded here. and exporting a model couldnt be easier.

step 1. create you model, and select it
(you can tell its selected because of the white bounding box)

step 2. open the utilities panel and select MaxScript

step 3. in the MaxScript window, select Run Script

step 4. select the as3GeomClassExporter.ms file,
then select it from the drop down

step 5. a new as3GeomClassExporter panel will appear. select you 3D engine, give your object a class name, and a package location (if necessary) then press the export class button to save it.


now using this object in papervision3D is a snap! just...

actionscript 3

import com.fontvirus.KnotAgain;
var theKnot:KnotAgain = new KnotAgain( skin );

my font, graffonti, has been featured in a new flash and papervision3D skateboarding game called kickflip. the game was designed and programmed by ugur ister (aka tom samson) co-founder of stimunationgames for the wrigley's candystand site.

click here to play kickflip

my latest papervision3d project was a revamp of the video cube. this time around the rotation of the cube is static, not mouse driven, also i added some new filtering, and a diffrent method of using a video texture that dousnt throw an error message. the flv is from the best cartoon ever lupin the 3rd. this episode is called "buns, guns, and fun in the sun"

check it out here.

actionscipt 3 code

package
 {
     import flash.display.*;
     import flash.events.*;
     import flash.media.*;
     import flash.net.*;
     import flash.text.*;
     import flash.filters.*;
 
     //filmed in papervision3d     
     import org.papervision3d.scenes.*;
     import org.papervision3d.objects.*;
     import org.papervision3d.cameras.*;
     import org.papervision3d.materials.*;
 
     [SWF(backgroundColor=0x333333)]
 
     public class main extends Sprite
     {
       // _______________________________________________________________________
       //                                                                  vars3D
         private var container : Sprite;
         private var scene     : MovieScene3D;
         private var camera    : Camera3D;
 
         private var planeObj  : DisplayObject3D;
         private var planeSize : int = 500;
         private var segment   : int = 2;
         private var material  : BitmapMaterial;
         private var bmpData   : BitmapData;
         private var connection: NetConnection;
         private var stream    : NetStream;
         private var video     : Video;
         private var label     : TextField;
 
         private var valx      : Number = 0;
         private var valy    : Number = 0;
         private var count     : uint = 0;
 
         static public const
             TEXTURE_W:int = 320,
             TEXTURE_H:int = 240;
 
         // _______________________________________________________________________
         //                                                             constructor
         public function main():void
         {
             stage.frameRate = 60;
             stage.quality   = "MEDIUM";
             stage.scaleMode = "noScale";
             stage.align = StageAlign.TOP_LEFT;
             this.addEventListener(Event.ENTER_FRAME, loop3D);
             this.stage.addEventListener(Event.RESIZE, onStageResize);
             label=new TextField();
             label.autoSize=TextFieldAutoSize.LEFT;
             label.x = 10;
             label.textColor=0xFFFFFF;
             label.selectable=false;
             addChild(label);
 
             init3D();
 
             connection=new NetConnection();
             connection.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler);
             connection.addEventListener(SecurityErrorEvent.SECURITY_ERROR,securityErrorHandler);
             connection.connect(null);
         }
         private function netStatusHandler(evt:NetStatusEvent):void {
             switch (evt.info.code) {
                 case "NetConnection.Connect.Success":
                     stream = new NetStream(connection);
 
                     stream.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler);
                     stream.addEventListener(AsyncErrorEvent.ASYNC_ERROR,asyncErrorHandler);
                     video = new Video();
                     video.attachNetStream(stream);
 
                     stream.play("lupinIII-s2e002-buns.guns.and.fun.in.the.sun.flv");
                     label.htmlText ="the.fontvir.us presents... \n      lupin the 3d\n          buns guns and fun in the sun";
                      break;
                 case "NetStream.Play.StreamNotFound":
                     label.text="flv not found...";
                     break;
                 case "NetStream.Play.Stop":
			//loop video
                     stream.seek(0);
                     break;
             }
         }
         // _______________________________________________________________________
         //                                                          event handlers
         private function asyncErrorHandler(evt:AsyncErrorEvent):void {
         }
 
         private function securityErrorHandler(evt:SecurityErrorEvent):void {
             label.text="security error...";
         }
 
         // _______________________________________________________________________
         //                                                                  init3D
         private function init3D():void
         {
             this.container = new Sprite();
             addChild(this.container);
             this.container.x = this.stage.stageWidth  / 2;
             this.container.y = this.stage.stageHeight / 2;
 
             scene = new MovieScene3D( container );
 
             camera = new Camera3D();
             camera.z = -planeSize;
             camera.focus = 1000;
             camera.zoom = 1;
 
             bmpData = new BitmapData(TEXTURE_W,TEXTURE_H,false,0xff0000);
 
             material = new BitmapMaterial(bmpData);
             material.oneSide = true;
 
             planeObj = scene.addChild( new Cube( material, planeSize, planeSize, planeSize, segment, segment, segment) );
         }
 
         // _______________________________________________________________________
         //                                                                  loop3d
         private function loop3D( event:Event ):void
         {
             valx -= 0.2;
             valy -= 0.5;
             planeObj.rotationY = valx;
             planeObj.rotationX = 35;
 
             video.attachNetStream(null);
             bmpData.draw(video);
             video.attachNetStream(stream);
 
             var filters:Array = new Array;
             filters.push(new GlowFilter(0xFFFFFF, 1, 10, 10, 10, 1));
             filters.push(new DropShadowFilter(70, 55, 0x000000, 0.5, 9, 9, 1, BitmapFilterQuality.HIGH));
/*
             var blur:Number = 10*Math.sin( (++count/25) );
             if(blur > 0){
                 filters.push(new BlurFilter(blur,blur,BitmapFilterQuality.HIGH));
             }
*/
             planeObj.container.filters = filters;
 
             this.scene.renderCamera( camera );
         }
 
         // _______________________________________________________________________
         //                                                           onStageResize
         private function onStageResize(event:Event):void
         {
             this.container.x = this.stage.stageWidth  / 2;
             this.container.y = this.stage.stageHeight / 2;
         
     }
 }

a fellow papervsion3d enthusiast zeh (creator of the popular mctween) has created a new way of animating full 3d objects in the flash/flex environment with 100% code! Introducing the caurina tweener, witch is now hosted on googlecode, this re-envisioning of tweening is no longer a collection of h4x and prototypes extending existing ones. zeh has written full static classes following the idea of simple, one line commands. tweener is still in development, but is completely stable and functional.

check out the sound visualization demo i created using pv3d and tweener
http://the.fontvir.us/pv3d/spikey/
and its source code
http://the.fontvir.us/pv3d/spikey/spikey.as

UPDATE!

today john grden of rockonflash.com has release his new papervision3D component. this plugin for the flash cs3 ide allows you to...

- render and edit your 3d objects in Flash IDE at design time!
- it supports 3 material types
- you can creates movieScene3D and free or target cameras
- management of resizing / centering of a papervision3D scene
- dynamic masking to constrain the viewable area to set bounds
- full api and access to scene, camera, and collada objects to code around
- automatically loads materials via collada file
- new custom panel for modifying rotation, camera zoom, camera focus, camera Z

john has really outdone himself this time. this takes alot of the tedium of testing and retesting your 3D scenes to make sure the objects are positioned correctly.

- download the component here

watch the rmi training videos
- for developers
- for designers
- source files for training videos

so i finally got a copy of adobe cs3 and flex builder2. flex is amazing, combining mxml and actionscript 3 together into a seamless package. now that im on the as3 tip, i decided to dive into papervision3D. pv3d is a set of actionscript classes that are used to create 3D objects within the flash environment. Currently in beta, the source code is only available to osflash emailing list members. so if yew want it... signup here. i have also posted my first flex as3 pv3d project, the metroid speedrun 3D cube. and here's the source. Thanx to carlos for creating pv3d and thanx to luis for the video texture tutorial.