Archive for the ‘ Papervision3D ’ Category

Papervision3D Training: Saturday, Sept 27th!

Because of hurricane Ike, the training was rescheduled to the 27th 🙂 I apologize for the hassle

The info on this post is still relevant, even though it lists Sept 14th as the date on Papervision’s Blog – Hope to see you there!

Advertisements

Papervision3D Training: Sept 14 this weekend!

I just posted the info on Papervision’s Blog – Hope to see you there!

Flash on Tap conference

You know, i’ve been to quite a few Flash conferences ( not as many as Grant or Keith however ), and I’ve often wondered what it’d be like to put on a conference – what would I do with it? How would it be different and, for love of God – why another one?!

I mean really, do we need another conference? People already have a pretty big selection and usually can only swing one or maybe two with their company to pay for, so it’s really a task to pick very best ones! There are 4 one day workshops, and Andy Zupko and I are teaching Papervision3D at one of them. Andy will be teaching Effects/layers and I’ll be teaching optimization techniques.

Ok yeah, FOT is put on by IR5 along with the guys at influxis (we love you guys!!), so it’s natural I’d show up for this one conference. BUT, what’s unique is that this is a conference BY Flashers FOR Flashers. I have a feeling we’ll see some inspired work for sure, given the atmosphere is zero pressure and it mixes beer tasting from local brewery’s. It’ll probably be one giant “sit back and relax with some flashin’ and friends” party.

Anyway, this one you won’t want to miss – it’ll likely be a one time wonder where everyone had a mindblowingly good time, and nothing like it will ever occur on the face of the planet like it again – ever.

http://www.flashontap.com/fot/index.html

BaywoodGallery – a little somethin’ for my parents

You know it’s pretty sad when your parents have to beg. But it’s shameful when they’re begging you for work you do on a daily, if not a nightly basis!

So, since they’re heading out to do a show in California in a week, I had to get something out there. I’d intended to just throw up another iTunes coverflow app, but I just couldn’t bring myself to do it. Then I thought that doing a triple carousel viewer would be cool, but thought it would be 3x’s as bad as all the other carousel 3D gallerys that keep hitting the web. Don’t get me wrong, it’s a fine way to present gallery’s, I just wanted to do something that was interesting and possibly different.

I’d had this idea to do an “outer gallery” for a while, so this was the perfect time to flush it out a bit. The concept is that instead of being an “inside gallery” that you walk through, this is an “outer gallery” that conforms to the way you might rotate it around for the best view. You’ll notice that the paintings have a particular rotation that would indicate the best viewing angle. As you rotate around, other paintings and pictures are revealed and are already in the rotation you’re currently at.

One thing that makes this work is that Z rotation never happens. You can invert the model for sure, but it never “rolls” on the Z axis, and that keeps the model at angles that make sense as you rotate around. It’s not a “new” way, it’s really very close to how 3D studio Max or Maya handle the free rotation – just without the ability to roll 🙂

But because of limiting that Z roll, the model never gets to a rotation that’s completely out of control or upside down and controlling it with the mouse seems pretty intuitive to even the lowest end users I’ve tested with (you know, graphic artists, and lead singers). I’m just kidding, I love graphic artists.

It’s not perfect, and I would like to clean up a few things. I’d really like to flush out this concept further, but I’m pretty happy with how it turned out initially. All told, it’s 3340 polygons and runs pretty smoothly. The biggest hurdle was creating an intuitive structure for this and then dealing with planes sitting over the top of the center model and fixing sorting issues. What keeps this demo running smoothly is the fact that I don’t have to rely on some run-time tessellation. Because of that, I have much more head room in terms of # of poly’s in the scene.

Papervision3D – fixes to VirtualMouse, Interactivity and using UIComponents

First off, I’ll just say that this kind of work is enough to cause you to go barking mad. Just set yer hair on fire and start running the halls naked now.

I’ll start off by archiving what I found, then go into “best practices” on how to create a plane using a movieclip that has UIComponents in it.

Findings:

  • VirtualMouse has a weird issue when stage quality is set to anything other than LOW and you use coordinate conversion on the values passed in. When set to LOW, it works as expected, but when set to any other setting, the UIComponents only lit up when you moused over the label of a component, not the drawn area and the basic movieclip I had in my test with rollover events didn’t even fire. Only when I moved the movieclip to 0,0, then did getObjectsUnderPoint did it work perfectly under all quality settings. Oye – I don’t know why I’m afraid. But in testing in a pure flash IDE test, quality settings didn’t cause any issues with getObjectsUnderPoint() – so, it’s obviously a VirtualMouse issue.
  • When you have a scrollRect defined on a movieclip, getObjectsUnderPoint() does not return any values IF you move the movieclip THEN call getObjectsUnderPoint. Only AFTER the displayList is updated does it work with the movieclip moved. That kinda sucked for what I had to accomplish with PV3D unfortunately. But fortunately, a new feature JUST implemented by Carlos makes this a non issue altogether. I know, you’re asking, why in the WORLD would you be doing such a thing, but it’ll make sense later on as I explain how to use UIComponents with movies used for materials.
  • You might think that if a movieclip/sprite is invisible (visible = false), that it’s not being rendered and therefore, you’re saving on the CPU – this maybe true to a certain extent of course, but if you right click and show redraw regions in the flash player, you can clearly see that if there ARE any visual changes like an animation or rollover state in your movieclip/sprite, you’ll see a redraw region show up right where the animation/visual change is taking place. Now, I’m not at all sure what this means in terms of how much processing is taken up because of it, but it IS causing the flash player to consider that are for SOME type of work.

Now, on to why I’m actually writing this post: How to use UIComponents in materials used on 3D objects with Papervision3D.

Initially, we have to realize what’s happening with UIComponents and what the initial problems are. The UIComponents are, when first added to a movieclip have a certain size, but it’s not the expected/anticipated size you might see when you add them to the Flash IDE stage at design time. What you see is a nice rendered component at design time, but at runtime, if you have *not* added the components to the displayList, you won’t see anything but the component labels, and they’ll be a size you didn’t anticipate.

This is simply because they don’t initialize until ADDED_TO_STAGE event is fired and the Stage property is set. So, for Papervision3D, this poses some problems right off the bat, since we don’t really want the movie clip and components sitting on stage AND wrapped around our 3D object. This means we have to use MovieMaterial and add the movieclip to the stage. Oh, and by the way, there’s another issue – timing. You *can* create movieclip, put it on stage, then create the MovieMaterial and just go on down the list, but there will be the possibility that the user would see this until the components are initialized AND another render has taken place AND the material is told to update:

One thing you’ll notice in this screenshot is that there is a black are at the bottom and the original movieclip is squished. That’s because the original size of the components is much different than after their initialized. In the screen grab below, I’ve put all of the Flash IDE UIComponents on stage and drawn a green bounding box before they intialize and a white bounding box after they initialize. You can see that their sizes change quite drastically and because my checkbox and radiobutton are at the bottom of the movieclip material, the dimensions of the movieclip are thrown off:

You can see in the pic above that checkbox and radiobutton are much taller than their final render and that textArea really never reflects what you visually see. I’m not sure what’s causing it’s size to remain that way, but it is. And the progressbar, slider and color picker don’t have any visual assets until their initialized as you can see.

Ok so what’s the solution to all these issues?!?! I’ll just step down the list in order, post the code and you can play 😉

  • Create your movie clip and then move it off stage where it can’t be seen. In the code below, I move it to -10000. I did some speed tests and it turns out that just simply setting x/y values is faster than using coordinate conversion methods. So, virtualMouse will move your movie to 0,0, then get the objects it needs, then move it back to it’s original location. Since this executes between frame renders, it doesn’t impact the displayList and you never see it happen.
  • Create a method like parseComponents() below. The idea is that you go through all of your components, addEventListeners to when they’re added to stage, THEN when they’re all added, create the MovieMaterial and Plane objects.

[as]

// import UIComponent:
import fl.core.UIComponent;

// later…

var cls:Class = getDefinitionByName(“Mc”) as Class;
movie = new cls() as Sprite;
movie.x = movie.y = -10000;

parseComponents();
addChild(movie);

protected function parseComponents():void
{
uiCounter = 0;
for( var i:int = 0; i<movie.numChildren; i++)
{
var mc:DisplayObject = DisplayObject(movie.getChildAt(i));
if( mc is UIComponent )
{
mc.addEventListener(Event.ADDED_TO_STAGE, handleComponentReady, false, 0, true);
uiCounter++;
}
}
trace(uiCounter);
}

protected function handleComponentReady(e:Event):void
{
var uiComponent:UIComponent = UIComponent(e.currentTarget);
uiComponent.removeEventListener(Event.ADDED_TO_STAGE, handleComponentReady);
uiCounter–;
if( uiCounter == 0 ) createPlane();
}
[/as]

NOTE: if you’re working in FlexBuilder or Eclipse, you’ll need to add the fl classes so that you can add the UIComponent import

  • Now, after we’re sure all components are loaded, create the MovieMaterial and apply it to your 3D object and pass one more NEW argument: Rectangle:

[as]
protected function createPlane():void
{
movieMat = new MovieMaterial( movie, false, true, false, new Rectangle(0,0,256,256) );
movieMat.oneSide = false;
movieMat.setQuality(StageQuality.HIGH, stage, true);
movieMat.interactive = true;
movieMat.smooth = true;

plane = new Plane(movieMat,256,256,6,6);
plane.yaw(-20);
view.scene.addChild(plane);
}[/as]

Now, one extra cool thing to note here is, that the checkbox and radiobutton are STILL to low and actually cause a hairline black area to be drawn on the material. So, to be even MORE dogmatic about making sure our material stays the same dimensions, you can now pass in a rectangle object to the MovieMaterial. The great thing about this is, it’s used that the time the bitmapData object is created from the source movieclip. Soooooooooooo the scrollRect issue I mentioned earlier is no longer an issue, and you don’t have to incure that cost on your movieclip just for the sake of making sure the UIComponents don’t have inappropriate relations with your dimensions 🙂

[kml_flashembed movie=”http://www.rockonflash.com/demos/pv3d/ComponentMaterialTest.swf&#8221; width=”550″ height=”400″/]

Get the source

Final code:
[as]
package
{
import fl.core.UIComponent;

import flash.display.DisplayObject;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageQuality;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.geom.Rectangle;
import flash.utils.getDefinitionByName;

import org.papervision3d.cameras.CameraType;
import org.papervision3d.materials.MovieAssetMaterial;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.view.BasicView;
import org.papervision3d.view.stats.StatsView;

public class ComponentMaterialTest extends Sprite
{
public var mc :MovieClip;

public var view :BasicView = new BasicView(0,0, true, true, CameraType.FREE);
public var plane :Plane;
public var mat :MovieAssetMaterial;
public var movieMat :MovieMaterial;
public var movie :Sprite;
public var uiCounter :Number = 0;

public function ComponentMaterialTest()
{
super();
addEventListener(Event.ADDED_TO_STAGE, init, false, 0, true);
}

protected function init(e:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
stage.quality = StageQuality.MEDIUM;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

var cls:Class = getDefinitionByName(“Mc”) as Class;
movie = new cls() as Sprite;
movie.x = movie.y = -10000;

parseComponents();
addChild(movie);

view.camera.zoom = 1;
view.camera.focus = 1100;

addChild(view);
addChild(new StatsView(view.renderer));
addEventListener(Event.ENTER_FRAME, loop, false, 0, true);
}

protected function createPlane():void
{
movieMat = new MovieMaterial( movie, false, true, false, new Rectangle(0,0,256,256) );
movieMat.oneSide = false;
movieMat.setQuality(StageQuality.HIGH, stage, true);
movieMat.interactive = true;
movieMat.smooth = true;

plane = new Plane(movieMat,256,256,6,6);
plane.yaw(30);
view.scene.addChild(plane);
}

protected function loop(e:Event):void
{
view.singleRender();
}

protected function handleComponentReady(e:Event):void
{
var uiComponent:UIComponent = UIComponent(e.currentTarget);
uiComponent.removeEventListener(Event.ADDED_TO_STAGE, handleComponentReady);
uiCounter–;
if( uiCounter == 0 ) createPlane();
}

protected function parseComponents():void
{
uiCounter = 0;
for( var i:int = 0; i<movie.numChildren; i++)
{
var mc:DisplayObject = DisplayObject(movie.getChildAt(i));
if( mc is UIComponent )
{
mc.addEventListener(Event.ADDED_TO_STAGE, handleComponentReady, false, 0, true);
uiCounter++;
}
}
trace(uiCounter);
}
}
}
[/as]

Online Papervision3D courses – Optimization techniques

*UPDATE*
Apparently adobe scheduled maintenance this saturday during the scheduled time for the course (which blows tremendously -they could have asked if anyone was doing something during those hours) I guess it could be argued that no time is a good time, but I’d argue back that midnight would be 90% better option I’m willing to bet… Just sayin’

Anyway, we ARE going to reschedule it asap (like in the next week or 2), and RMI is extending the viewable recording of the session to 2 months for the inconvenience to the students. Sorry for the hassle guys

I’m sorry I’m late on announcing this, I’ve been super busy with this current client and trying to get everything else done for the course has just consumed all motor skills and brain cells ;(

I’m taking a break from traveling for a while, so RMI has set me up with some on-line course time and this weekend (saturday), I’m going to pouring over the Winterwonder Land application and talking about optimization techniques for Papervision and the flash Player in general.

In the course files, I’m including nearly all the demo’s I used for the classes I taught in person as well as the source for Winterwonder Land’s animation engine etc.

If you’re interested, you can sign up over at RMI’s site:

http://www.richmediainstitute.com/node/142

Hope to see you there!

Well, Go3D is official – We need base 3D classes that all engines can use

What turned out to be just something to finally scratch a strict typing itch i’d had with tweening has no become and full blown side project. Not only did Moses get me started, but Graeme Asher and John Lindquist fueled the fire as well. Graeme’s been working on Tween3DCamera and John’s been helping me add some other properties like scale/scaleX/scaleY/scaleZ to the property types as well as a small refactor.

If you’ve tried Go3D lately, you’ll notice that I had put static property methods (yeah kinda weird name, but that’s what they do ) in Go3D.as, but have now moved them to Value.as in the properties directory. It seemed to make alot more sense with what their function was, and Go3D.as has been deleted for now since it serves no purpose.

check out the project here:
http://code.google.com/p/goplayground/wiki/JohnGrden

svn:
http://goplayground.googlecode.com/svn/trunk/JohnGrden/GO3D

One thing I added just today was the ability to pass a tweenTarget for a 3D object. If you look at the code samples below, you can now just pass a target and it’s position and rotation will be used to tween to. You can also use constants to just tween to position or just rotation. You can also pass custom properties for it to use with the target. The swf demo I’ve posted in the playground basically tells the Cylinder object to use the properties of the orange sphere.

[as]
protected function tweenAll(e:Event=null):void
{
resettargetObject();
tween = new Tween3D(targetObject, [Value.tweenTarget(middleObject)], duration, Easing.easeOutElastic);
tween.start();
}

protected function tweenXYZ(e:Event=null):void
{
resettargetObject();
tween = new Tween3D(targetObject, [Value.tweenTarget(middleObject, Value.XYZ)], duration, Easing.easeOutElastic);
tween.start();
}

protected function tweenCustom(e:Event=null):void
{
resettargetObject();
tween = new Tween3D(targetObject, [Value.tweenTarget(middleObject, [Value.X, Value.Y])], duration, Easing.easeOutElastic);
tween.start();
}

protected function tweenRandom(e:Event=null):void
{
tween = new Tween3D(targetObject, [Value.x(getRandom()), Value.y(getRandom()*.5), Value.z(getRandom())], duration, Easing.easeOutElastic);
tween.start();
}
[/as]

Value.tweenTarget() returns an array of Go3DProperty objects that Tween3D expects to get to do the tween. It’s basically a convenient, yet strictly typed way of doing things. I’d say we’re having as much fun as untyped objects at this point – Even more probably 😉

Note:
I’ll be teaching on Go3D at the Toronto class in 2 weeks, and if you haven’t signed up yet, I seriously suggest getting out there asap – seats are filling up

Now, the reason I say we need base 3D classes for all 3D engines to use is because in a situation where I want to open this up for Sandy3D or Away3D or any other 3D engine that uses x/y/z/rotationX/Y/Z/scaleX/Y/Z, I’d have to write specific classes tailored to their api and object types.

We need to have one set of common 3D classes that define the atom level of a 3D object with the main 10 properties:

x, y, z, rotationX/Y/Z, scale, scaleX/Y/Z

So, I’m going to be starting such an effort and see how that pans out 😉 It makes too much sense especially when you consider any project that has to work with a 3D engine, but isn’t integrated with the code base. ASCollada being one, and Go3D being another.

I’d love to hear people’s thoughts on this matter.

Advertisements