Posts Tagged Papervision3D

Why Flash is not disappearing

All the debate about Apple vs Adobe really got me thinking lately. Last night , I woke up at 4 in the morning with the idea for this post. It suddenly hit me. Most of the latest trends on the web happened because it was allowed by Flash. If you think about 3D, Augmented Reality and ChatRoulette; all of those could not have happened if Flash didn’t exist and are currently not possible to implement using HTML5.

3D

3D really picked up when Papervision3D ported there library from ActionScript 2 to ActionScript 3. ActionScript 3 made it faster so you could actually do some interesting 3D without automatically killing the user’s CPU. Right after that we saw a wave of Flash website all using 3D in them. I’m not saying that was good; plenty of sites used the 3D for no reason at all except for the fact that it was cool. Now that the hype on 3D as dimmed down, we see better uses of the library. My point is that Flash opened up new possibilities. There are now a few more libraries for 3D (Away3D, Sandy3D, Five3D, etc) and I don’t think those would be possible with the current state of javascript. Right now everybody speaks about HTML5 and the Canvas but, boy, JavaScript is so not on par with ActionScript 3. jQuery makes it better but still. Here is a good example of a site that uses 3D.

3D models in Flash

Augmented Reality

AR was all the buzz last year and 3D is what really made it possible in the browser. AR is a concept that has been around since the 90s but it never picked up until it came to Flash because it made it accessible. For AR you mostly need 3D and a camera. The webcam is easily accessible in Flash and since Flash is so ubiquitous. Now video is possible with HTML5 but webcam won’t happen; maybe HTML6. So as AR evolve we will see tons of new applications coming our way.

GE augmented reality

ChatRoulette

Now ChatRoulette is really interesting. I don’t know if it is going to last or if it is going to disappear or change, but it definitely showed an interesting facet of the internet ( not talking about the impressing number of male exhibitionists out there). ChatRoulette could use the webcam and a media streaming server, but that is not what is happening here. Already all that is not possible in HTML5. What ChatRoulette is using is the new P2P service Stratus by Adobe integrated FlashPlayer 10. That is a new feature in the Flash player that most people are not aware of. What it does is that it connects users directly to send the video without going through the server ( in this case the ChatRoulette server) so it save a lot of money in bandwidth. Is this a cool feature? fuck yeah. Is this close to being included in HTML5? Not in years.

Chatroulette interface

The general conception is tying Flash to video, but that is not all that Flash does right. 3D, AR, and P2P are just some examples I took to illustrate the fact that Flash is pushing the web forward; I can easily think of many more: microphone access, Pixel Bender, ActionScript 3 (so much more fun to work with than JavaScript), AIR, etc. And that is just what is available right now in Flash Player 10. I can’t wait to see what will be available in the future.

, , , , , , , , , , ,

4 Comments


The post of the year

It is that time of the year where I look back and ponder. As I had foreseen, 2009 was really a great year (at least professionally but that’s another story). If my skills improved a lot in 2008 they continued to do so in 2009. I got to play a great deal with Papervision3D (roar4milk, Holiday Humanoes) and I got to modify my project workflow a lot too (I plan to make a presentation on that this year).

In numbers, I got to write 62 posts ( a bit less than once a week) and got 478 comments since September 2008. As for traffic, I am now getting 25 000 visitors a month, this is 10k less than the goal I set myself a year ago, but I don’t think it is so bad; my traffic is still growing steadily month after month. I did not write another article for InsideRIA like I wanted to, but I wrote 2  that got printed in FFDMag ( one of those I intended for InsideRIA but someone wrote on Google Analytics for Flash before me). What I am really proud of is that I got to give 2 presentations; one online and one in person at the Montreal Flash User Group. This is something I want to do more in 2010, 3 or 4 speaking engagements would be really nice. I already got an article nearly done so if I could get 1 or 2 more I would be happy. Lastly, I my traffic could increase to 35k visitors a month I think that would be enough for me. While we are at this, if I could be part of writing a book on ActionScript, that would just be the craziest.

Anyway, what I wish for the coming year is that I keep doing what I am doing. If I keep up the good work, good things will come my way, as simple as that, it worked fine in the past and I am pretty sure it will stay that way, naïvely.  Blogging is all about keeping doing it.

May 2010 be as good for all of us as 2009  was good for me. Happy new year!

, , ,

3 Comments


Dominoes for all for the holidays : Twist Image Holiday Humanoes

Want to see more than 2400 dominoes in 3D ?(why would you not?) Head over the Twist Image holiday card, see the Holiday Humanoes and make some with your friends’ faces on them.

I know that for every project I say that it was the most complicated one that I did, but this one really was the most complicated I ever did. There even was a night where I didn’t sleep because I wasn’t sure I could make it happen.

My big challenge was to create an experience that was close to what the design team was imagining but that wasn’t too CPU intensive (like all my other projects). I think I did manage to do that. It runs pretty smoothly even on some bad computers. I let Papervision3D do all the heavy lifting but I kinda trick the user into think that there are a huge load of dominoes while at any time there is only 300 of them max (you could consider this object pooling). A second challenge was to position those 2400 dominoes so the they make the final path. The design was done in Illustrator so what we did was that we exported the .AI file as a .SVG file. SVG is just an XML so I made another program that would read the SVG and output (trace to the console) ActionScript code that I would paste into the main application. Finally, the last challenge was to show a zoom out with all the dominoes fallen revealing the message. As I said earlier, if I had 2000+ dominoes at the same time that would be too hard for the computer and run really slow. So I replaced the scene with a bitmap. To get that final bitmap I had to make yet another program that would render me the final path with all dominoes fall and that a screenshot of it.

So I ended up doing 2 more ActionScript projects to end up with the finished product: The Holiday Humanoes.

Oh yeah, just a little trick to finish up, when you deal with COLLADA models, make sure your 3D guy exports the model without the textures if you don’t want the Flash Player to query the server each time you create a DAE. That is what was happening at first and it really scared me.

Holiday Humanoes

Holiday Humanoes

, , , , , ,

2 Comments


Loading a COLLADA model without loading a file

You know what is funny? It’s when every project your doing what was cool 2 years ago. Yeah I have been doing a lot of Papervision3D lately, but you know what, I’m fine with it, I actually like it. Anyway, I think Augmented Reality is retarded (ok not that much, but fun to say). So I’m doing all that 3D and usually it’s easier to just load COLLADA models, mostly because you get more complex shapes and the texturing is also easier, all done by the 3D artist. That also help with the workflow, 3D guy does his thing Flash guys does his and they can work at the same time, which is great.

Normally I would just load the DAE file externally, it’s just an xml file but some times it can get quite big. For the project I am currently working on, (stay posted this one is going to be great) I have a lot of very small models, like a lot (omg I sound like the 10 years old daughter I don’t have). So I can’t load all of them externally because this would make too many server call which would in return slow my application greatly. It is not well know (maybe Flex developer knew this more) but you can embed the DAE file inside your SWF by using the Flex embed tag, now available in Flash CS4. I found this info on the pv3d.org site. Here is the code:

[Embed(source="../../../../../assets/domino.dae", mimeType = "application/octet-stream")]
private var daeAsset:Class;
 
var byteArray:ByteArray = new daeAsset() as ByteArray;
var _dae:DAE = new DAE();
_dae.load(byteArray);

Well that is pretty cool and it saves you some loading time and server calls. What I don’t like with the embed tag is that the path to your asset is relative to the class file path not to the project, so sometime it is very tedious to find the right path.

Now let say you were generating textures at runtime (you guessed right, that is what I am doing) you still need to put a listener on the DAE to know when the load is completed, because even though it’s faster than loading an external file it’s still not instantaneous. Here is the full code:

[Embed(source="../../../../../assets/domino.dae", mimeType = "application/octet-stream")]
private var daeAsset:Class;
 
var byteArray:ByteArray = new daeAsset() as ByteArray;
var _dae:DAE = new DAE();
_dae.addEventListener(FileLoadEvent.LOAD_COMPLETE , _daeLoadComplete, false, 0, true);
_dae.load(byteArray);
 
function _daeLoadComplete(event:FileLoadEvent):void {
  event.target.removeEventListener(FileLoadEvent.LOAD_COMPLETE, _daeLoadComplete);
  var child:DisplayObject3D = _dae.getChildByName("modelName", true) //modelName is the name of the shape the was outputted from your 3D program, you can see that name in the trace from Papervision3D
 
  var bitmapMaterial:BitmapMaterial = new BitmapMaterial(_texture, true);//_texture is you runtime generated bitmapData
  child.material = bitmapMaterial;
}

Ok, only 4 more articles to write to remove the annoying roar4milk widget from my homepage (the reason for the sudden music).

, , , , , ,

4 Comments


Prepare to Roar

If you have been wondering why I haven’t been writting a lot this summer, well it’s been mostly because of this project. I learned a great deal on Papervision3D, using the webcam, on playing with bitmaps and on Facebook connect (even if I wasn’t the one doing that part) while building this project. So here you go, create some roars:

http://www.roar4milk.ca

The goal of the campaign was to get teens involved with milk and to build on some ad spots that performed very well on MTV. So what you are doing with this application is recreating the ads but adding yourself at the end instead of the cow. Now I knowthat the site is a bit (to say the least) CPU intensive (3D tends to do this), but believe me it was worse than this before and I wish I would have had a bit more time to perfect this site.

The technical cool part is that you can use your picture, be it by uploading it or using your webcam, and using the derivate bitmap I will composite it with the cow skin and apply that to the loaded Collada model. That was kind of the premise of this site and we built around it with a vintage design. I hope you like it.

Here is a short list of librairies we used: as3corelib, TweenLite, Alcon, facebook api, google analytics for flash and Papervision3D.

Another cool feature is that you can embed your roar on your blog like this:

, , , , , , ,

No Comments


How to make Collada model double sided in Papervision3D

Well I searched for this for a little while and even tough it is pretty easy, if I didn’t figure it out at first probably other people had the same absence of mind. Also I find it hard to find example of Papervision3D and know which version was used; you find a lot of examples but you never know if the API changed since then so I am going to do a complete example with the version used.

The version used for this example is 2.1.92.

What I wanted to do was to load a Collada model in Flash an animate it. Every thing was going fine with the test models until I used the real models. You see the real models had holes in them that allowed you to see inside the model. Now if your material is single sided, when looking inside, you are going to see through the material and it will look buggy. The solution to this is just to make all material in your model (you can map multiple textures in one loaded Collada model), but that is not as easy as it sound. I tried a couple of options before hitting myself on the face. What did you learn back with ActionScript 2; wait till something is loaded before trying to modify it. This also applies to loaded models. Once loaded I made a little function that would cycle through all materials and make them double side.

Here is the code for the example :

//create all the actors of a Papervision3D scene
 
var viewport:Viewport3D = new Viewport3D(1000, 800);
addChild(viewport);
 
var renderer:BasicRenderEngine = new BasicRenderEngine();
var camera:Camera3D = new Camera3D();
var scene:Scene3D = new Scene3D();
 
//create the DAE/Collada object and load the model
 
var model:DAE = new DAE(false);
model.load("model.dae");
model.addEventListener(FileLoadEvent.LOAD_COMPLETE , daeLoadComplete, false, 0, true);
scene.addChild(model);
//finally add the enter frame listener to render the scene
 
addEventListener(Event.ENTER_FRAME, render, false, 0, true);
 
function render(event:Event):void{
  renderer.renderScene(scene, camera, viewport);
}
 
//this is where the magic happens, we cycle through all the materials of the model and make them double sided
 
function daeLoadComplete(event:FileLoadEvent):void{
  var matList:MaterialsList;
  var mat:MaterialObject3D;
  matList = model.materials;
  if ( matList ) {
    for each (mat in matList.materialsByName) {
      mat.doubleSided = true;
    }
  }
}

I didn’t include the import statement because I plainly forgot to send them to myself, but I will update this post to add them. Have fun loading models!

, , ,

6 Comments


My review of FITC Toronto 2009

Well I’m on the train (not anymore) and I have 5 hours to kill so I thought I might use this time to write my recap of FITC Toronto 2009. In a general way, I liked this iteration of the festival more than last year. I think that my choice of presentations had a lot to do with it. Looking back, there are sessions I would have changed in my schedule but since they were filming most of the presentations I can just go and watch those that I heard good feedback from. The downside of this year was that I was alone so I kinda not fulfill the Connect part of the festival mission (Inspire, Educate, Challenge, Connect) but I will work on that next year.

What I learned

Here is interesting stuff I wanted to share:

  • I really liked the presentation from PowerFlasher (makers of the FDT tool to write ActionScript). It gave insights on their creative process and how they deal with in-house projects. They said they would put the presentation on youtube so I will point it out when it is there.
  • GAIA Framework: I wasn’t convinced before the presentation. Now I would like to try it out on certain type of project. What convinced me: the fact the it handles SWFAddress for you. I like SWFAddress a lot, but sometimes I would like it to be a physical object so that I could throw it out the window.
  • Joshua Davis is an awesome presenter. If you get the chance to see him talk, seize it.
  • I chose a couple of business presentations and they were probably not the best choices to make but I still got a couple of usefull links out of them:
    • IconBuffet : Nice for Icons but also nice to know that they are made by Firewheel Design and given freely; nice way to get known.
    • CoComment : Nice way to track your conversations, will definitely try it out.
    • 37 signals : Heard so much about them that I should probably at least follow their blog
    • BaseCamp : An online application to manage projects, made by 37 signals
    • HARO : Help a reporter out : a nice way to get your name out there by helping a reporter and getting quoted
  • VizualPV3D : Layout tool for Papervision3D that looks great. Can’t believe it was done by only one dude: Gary Stasiuk.
  • Finally Colin Moock‘s presentation held a couple of gems. First he his starting a company called User1 that will offer and develop the union platform which will facilitate the production of multiuser applications be it on the web or the desktop. Also he teamed up with MegaPhone, a company that provides  a framework to manipulate any screen using any phone. I foresee lots of new marketing opportunities.

On a personal note

I own a HP mini 1000, one of those new netbooks. It’s a pretty nice netbook: it has a 10 inch screen, but I believe I need more than that. 10 inch is good for writting and browsingthe web, but not that good for coding. I really hope that they will develop folding LCD soon so that the laptop can stay small but the screen can get bigger.

Lastly, being in Toronto made me realize how much I like Montreal. More trees, smaller streets, no tramway; it’s just warmer. The only other city that compares (and that I have been to) is Amsterdam. I think Montreal deserves its own Flash conference.

, , , , , , , ,

5 Comments


Difficulties with Papervision3d when embed width and height in html are 100%

Well it’s not really difficulties; more something you have to keep in mind when, in your HTML, you set the width and the height of the flash portion to 100%. In my case I did this so that my swf would take all the browser space.

So I was doing some minor papervision3d programming and everything was going fine until I embedded my swf in HTML. Since the embedded flash size (width and height) wasn’t the same as the exported flash size I had some glitches on the papervision3d side. The Viewport3D was the part that moved when I resized the browser. In order to fix this I had to assign it a new x and y at creation that was dependent on the stage width and height. This is how you do it:

1
2
3
4
viewport = new Viewport3D(stage.stageWidth, stage.stageHeight, true, true);
viewport.x = -((stage.stageWidth - 800) / 2);
viewport.y = -((stage.stageHeight - 600) / 2);
addChild(viewport);

800 being the original width of my stage and 600 the original height. So by modifying the x and y of the Viewport3D at creation when I loaded the site or reloaded it it was always at the right place. At least that is what I thought until I tested it in Internet Explorer. I guess Internet Explorer doesn’t handle resizing of the browser in the same way as Firefox or Opera, because if you loaded the site, then resized the browser and then refresh the page it would not work properly in IE, the Viewport3D would be offseted. Actually in any browser, resizing the browser would offset the viewport making alignment not fit anymore. This is more obvious when you have some parts of your site in papervision3d and some parts under it not in 3D. To fix this I had to add a listener for the RESIZE event on the stage:

1
2
3
4
5
6
7
stage.addEventListener(Event.RESIZE, stageResizer);
 
private function stageResizer(e:Event):void{
viewport.x = -((stage.stageWidth - 800) / 2);
viewport.y = -((stage.stageHeight - 600) / 2);
 
}

Every time the browser would be resized this code would align the viewport in the middle of the stage.

This was a minor problem I encountered while using papervision3d; it wasn’t really hard to solve, but I guess it will be easier for you to find the answer than for me (since it’s all here).

, ,

5 Comments


Interactive scene with Papervision3D (Great White)

I updated my previous experimentation with papervision3D to version 2.0 (Great White). I can say that it wasn’t too hard thanks to this John Grden article.  But is article doesn’t explain everything. A lot of things have moved since the phunky branch; as an example, Planes are now in the org.papervision3d.objects.primitives package. Once you adjusted all the package you previously used so that they can now compile, you can start playing with the new toys. I didn’t try anything fancy; I just wanted to make my materials interactive. It actually was easier than with the previous version even if I had less documentation. I didn’t quite get how to use the Interactive Scene Manager in the previous version.

So if you want to make your 3D objects interactive, you first have to advise the viewport3d object. You do it in this way:

1
viewport = new Viewport3D(0, 0, true, true);

The fourth parameter of the Viewport3D constructor is the one you want to set to true. Once that is done you have to make your individual materials interactive also.

1
2
3
4
5
6
var mam:MovieMaterial = new MovieMaterial(myMovie);
mam.interactive = true;
 
var p:Plane = new Plane(mam, 100, 100);
p.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, handleMouseOver);
p.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, handleMouseClick);

You can see that you have to set the interactive property of the material to true in order to interact with it. In the previous, I also created a plane and used the MovieMaterial on it. I then added the listeners on the plane itself. I don’t know if it is better to add the listeners on the plane or on the material but it worked fine this way, if you have more insight on this feel free to make a comment about it.

You have to import the org.papervision3d.events.InteractiveScene3DEvent package in order to use the 3d events. The events you can use are these ones: OBJECT_CLICK, OBJECT_OVER, OBJECT_OUT, OBJECT_PRESS, OBJECT_RELEASE, OBJECT_RELEASE_OUTSIDE , OBJECT_MOVE, OBJECT_ADDED. They are all self explanatory so I won’t explain them.

You now have everything you need to make an interactive flash movie using papervision3D, I hope I shed some light on that.

,

8 Comments


Impacts of Silverlight for a Flash Programmer

I have been thinking lately about what impacts will Silverlight have on me as a Flash Programmer. I came to the conclusion that it wasn’t really threatening. It could have been threatening in the sense that it could have made Flash obsolete and make me loose future jobs at the same time. But the thing is, Flash is such a good technology, it’s been around for a long time, the community supporting it is amazing and Adobe has big plan for it, Silverlight would have to be packed with a lot of feature in order to shake Flash’s position in the market. I don’t think it has just that.

It’s true that videos in Silverlight look good, but now with the moviestar release of the Flash Player, I don’t think one is better than the other on that characteristic. It’s nice for programmers who know .net, they can just jump right in and start programming Silverlight applications (maybe with a small learning curve). Good for them, .net programmers are already in demand, now they are going to be even more in demand, their salary is going to increase, so does the cost of building a Silverlight application.

One of the thing that Flash as always suffered was the penetration rate of the Flash Player, as a proof, website using flash 9 are now starting to emerge even if its been more than 6 month since it’s been release. Silverlight will suffer even more as people are not willing to download anything anymore. Flash as the chance to be adopted by huge website like Youtube and Facebook and has been around for way longer, people trust the Flash brand.

A big advantage Flash has over Silverlight is all the documentation lying around the web. If you want to know how to do something in Flash, just Google it, it’s that easy. Also open source projects like papervision3d and Tweener are just amazing.

For all these reasons, I don’t think Flash programmers have to be afraid for their jobs because of Silverlight and that for at least five years. I actually think Silverlight is a good thing; a little competition never hurt anyone, Adobe will have to keep improving Flash which is very good for us.

, , , , ,

4 Comments