You’ll need Firefox 4/5 or Chrome and a GPU that supports WebGL to run the examples.

There is more here. I keep adding new stuff almost every week so be sure to check that page from time to time. All the demos are made using a little framework of mine called J3D (didn’t I mention it already?) It is available on github along with the source code of all the demos.

Instead of writing a long article about WebGL pros, cons or whatever, let me just say that if you ever had any interest in realtime graphics, make yourself a favor and try WebGL right now!

“3 Dreams of Black” is an interactive music video directed by Chris Milk for Danger Mouse and Daniele Luppi. It features a song from their latest album ROME, performed by Norah Jones. It’s part of the Chrome Experiments series and was created entirely with HTML5 and WebGL.

This is the second time I collaborated with North Kingdom. It was a big project, and other parties involved were the team from Google Creative Labs, including Aaron Koblin and Mrdoob as well as the teams from Mirada L.A. and Radical Media. I would like to take the occasion and say thanks to guys at North Kingdom for letting me be part of it. I have never been working with such talented group of people!

The project was a big challenge and an incredible learning experience. I intend to write a longer post with more details as soon as I get some time. Meanwhile go to ro.me and enjoy the show!

After that, be sure to check the tech page which features information on the technology we used and a very cool model viewer. You can download the entire code base from there too – the project is open source! Mirada prepared a great case study that is worth reading as well.

Last year I did a few training courses in London. I was quite fun, so this year I plan to do more. To start with, I’m preparing a new workshop about webgl.

I have worked with webgl from the beginning of this year. It’s completely different from Unity or Flash/Away3D, and I guess it doesn’t give the “immediate fun” feeling that Unity does when you approach it for the first time. Quite the contrary, the kind of old-school, C style API can be intimidating, and the scarcity of resources adds to the image of a unapproachable technology.

Fortunately, reality is not as bad as it seems. WebGL can be quite fun to play with as soon as you understand some basic rules. Furthermore, it is based on Open GL ES which is an established standard for 3D graphics on mobile devices (implemented both in Android and iOS). Getting to know WebGL is a good way to introduce yourself to these technologies as well.

I’ll be doing the webgl workshop as part of the Flash And The City conference in New York on June 9. The workshop will focus on how to build 3d content from scratch with Javascript and we will see some techniques for importing 3d models and animations right into your browser.

If you don’t want to miss the event, be sure to get your ticket today. The number of places is limited. Use discount code webGL and they get $50 off!

For the workshop make sure to bring your laptop with your favorite Javascript editor along with the latest version of Chrome or Firefox and prepare for some serious (and seriously fun!) 3d stuff.

See you in New York!

[Photo credit]

I started to work with WebGL a few months ago. WebGL (in case you never heard about it) is a new emerging standard for rendering GPU accelerated graphics in the browser, without any plugins. Not all browsers support it yet, but the latest Chrome and Firefox do and others are about to follow (Safari, Opera, sadly not IE for the moment).

Whatever happens, WebGL seems to be here for good and it is definitely worth learning or at least looking at. It is a pretty low level API unlike Flash Away3d, not to mention Unity. In this respect, it’s much closer to Molehill. This can be discouraging at first, but after I got into it a bit, I found out it’s actually pretty fun to play with.

WebGL is a Javascript API. I always had mixed feelings about Javascript, remembering it from the days of Netscape and the so-called DHTML. But it was 10 years ago, and when I tried it again now I had to change my opinion. It may not be as strict and carefully designed as C# but it is simple, very flexible and easy to share. In the web environment, that last point (often brought by mrdoob) is perhaps the most important.

Based on OpenGL ES, WebGL is a collection of functions to communicate with the graphics card. To those of you who are used to OOP patterns and frameworks, WebGL will come as a shock. It’s mostly plain functions that set some properties, toggle some states or push some data to the GPU. It’s like a giant switchboard with one big global space for all operations. Sounds like fun, eh?

Resources and WebGL demos appear almost everyday, so be sure look around the web for interesting stuff. There aren’t that many comprehensive tutorials yet, but you can try the lessons at Learning WebGL – it’s the best introduction to the subject I’ve seen so far.

What better way to learn a 3D API than to build an engine? I was contemplating writing my own engine in Flash/AS3 a few times before, but never though I had quite enough knowledge to do this. This time I felt much more confident. Also, WebGL gives a pretty good start that Flash didn’t back in the days.

That’s how J3D was born. J3D is a very simple engine that can load 3D models and textures, has a scene with a hierarchy of objects and can render everything using basic lights. Somewhere on the way I added the feature to export models from Unity3d which I thought would make the job of preparing assets much easier.

Although J3D is pretty small and has limited functionality, it works and building it allowed me to learn and understand WebGL pretty well. This was my primary objective.

Last week I uploaded all the code to github and shared the link on Twitter. People seemed to like it and showed quite some interest. This made me very happy and gave me the idea to continue with the project and see where it leads me.

To sum up: demo, another demo, source code on github and more coming soon!

When we first talked about the project, the idea was to use either Flash or Processing, but I though that it’s a good occasion to try Unity3D (of course… :) To achieve the desired visual effect I needed a shader system that’s fast, flexible that and works with 3D. Unity’s ShaderLab seemed like a good option.

The material on the shape is transparent and is composed of a blurred version of an image applied as regular texture and the image itself applied as reflection. The images change over time, and are animated by scrolling UVs.

All the data for the installation is loaded dynamically, the application itself is just composed of some scripts that make it run, so the file is only 55KB! It’s controlled by an external configuration file that allows to define the source images and sounds. There are also quite a few other settings to tweak they way it works, ex. how transparent or how reflective the material should be.

One particular challenge was to make the shape react to the sound. To make this happen I needed to read the spectrum and Unity3D doesn’t offer access to sound data on the code level. One possible solution was to write a plugin that does that, the downside however is that it wouldn’t run in the web player.

I solved the problem by pre-processing the sound in a small Flash app. It dumps the spectrum data to a text file which is then loaded to Unity3D. When the application plays the sound file, it uses this data to check the values of the spectrum at any position in time. Simple, but does the job.

The installation is part of a project called Tango and Hawaii created by Anrick and Luciano. Be sure to check the live demo. It was originally presented at the Magdalena Festival in Maribor, Slovenia.

It was a new experience for me to work on an art piece was. It was very inspiring to see what Anrick and Luciano did with a tool I helped them to create. Thank you guys!

This post is an addition to the last series I wrote about dynamic content loading in Unity3D.

When building a dynamic application, every now and then you might need to load some 3d models at runtime. Either because there's a database with models you want to use or just because you want someone to update the models without rebuilding the project. I actually had this situation a few weeks ago. Surprisingly, this option does not come with Unity out of the box.

Asset bundles and resource folders

But first thing first. I said there's no ready-to-use way to load 3d models at runtime, but it's not 100% true. In fact, there are two options: asset bundles and resource folders. These methods are discussed in depth here.

They can both be useful in some cases, but they both have one fundamental drawback: in order to create them, someone needs to open the project in Unity, import the 3d models, create the bundles or resource folders and then export the whole thing again. To create an AssetBundle you need to run a script in the editor, while the Resource Folders... honestly, I failed to even make them work!

In brief, it's all too complicated for what I was looking for.

A straightforward solution

What I needed and wanted was easy and simple: to load a 3d object (geometry + some materials and textures) at runtime, using just a URL as parameter. The only solution seemed to write my own importer.

Basically, I had the choice between Collada and Wavefornt OBJ. I would choose OBJ any time of the day because it's a simple, concise plain-text format, while Collada is bloated and is XML-based.

It's not that I hate XML (although I'm not a big fan either) but in order to parse XML you need to include a pretty weighty DLL in your *.unity3d file, around 850Kb, which in this case (and in many others) defeats the purpose. Still, it's good to know that it possible, and there are situations when it's ok to use it. If you want to learn more about Unity3D and XML there's a awesome article on this topic by Paul Tondeur.

It turned out that while it's not rocket science to write an OBJ importer, it's not exactly banal either. I spent a few days coding it so I thought I'll share this with everyone - maybe someone will make good use of it.

Here's a package with the source code (v1.1) (or a version that works in Unity 3 (v 1.2)), along with a simple scene demonstrating how it works. In fact it couldn't be simpler. All you have to do is to create an instance of the OBJ class and start a coroutine to load the contents, like this:

Supported features

• Vertex, normals and UV data
• Multiple objects per file
• Vertex groups and multiple materials per object
• MTL files, diffuse and specular materials
• Basic textures

And it's all at a cost of ~12Kb extra added to your final file!

Testing and the universality of OBJ format

In the 3D world the OBJ format is nearly universal - I think that every 3D editor in existence is able to export to this format. This also means that Wavefront files come in many different flavors.

I tested the code against models created with Blender and against common sense assumptions on how an OBJ file can be constructed. If it doesn't work with files exported from your editor send me the OBJ file, and if possible I'll update the code. It's released under the MIT license so feel free to use it in your projects, commercial or not.

That's it! I hope you'll find it useful!

The conference season is upon us!

Following my last year short presentation at Flash On The Beach and at the Warsaw Flash Camp, this year I will continue my adventure with public speaking. In the next months I will be having my sessions at 3 highly interesting events.

1. FITC Amsterdam, February 22nd-23rd

FITC Amsterdam is only a few weeks away. I've been to FITC last year and I really enjoyed the conference (and the parties too). I am thrilled to be back this year as a speaker. If you want to catch my session it's on Monday (Feb 22nd) at 12:30. If you are interested in Unity and in 3D in general you should definitely attend! For more information, here's a detailed session description. I hope to see you there!

FITC it's of course much more than my presentation. There are 2 days packed with interesting sessions, so be sure to checkout the schedule to see what's interesting for you. There is also a party every evening - a great opportunity to do some networking and to have a few beers and some other stuff (remember, we're in Amsterdam!). So grab your tickets before they're all gone!

2. London LFPUG Meeting, March 25th

If you can't attend FITC and you miss my session in Amsterdam, don't panic! You can catch me again next month in London. On March 25th I will speak at the next in the series of LFPUG meetings.

It will be a evening packed with realtime 3D, as I will be speaking together with Rob Bateman from the Away3D team. Here's some detailed info about the event. The event is free, all you need to do is register, so if you are in London don't miss it!

3. FITC Toronto, April 25th-27th

Finally in April I'll be making the move over the Atlantic all the way to Canada for FITC Toronto, where I will also be talking about Unity. There is no schedule yet, but it's should be coming soon. However, the tickets are already on sale. If you hurry you might even get a early bird price!

This is very exciting for me for several reasons. First, it's a major conference with 3 days of sessions, workshops and even a recruiting event. It's not to be missed not only if you live in Toronto, but for anyone in the region. And I've heard people come for FITC from all over Canada and US.

Second of all it's my first time I will attend a conference in North America. I looking forward to meet a lot of people whom so far I knew only from blogs and twitter. So if you are around don't hesitate to get in touch!

Finally, it will be my first visit to Toronto and I heard a lot of good stuff about the city. We also plan a short family vacation afterwards to visit Montreal and Quebec Miami and the Florida Keys.

Next?

I'm currently entirely focused on those upcoming events, preparing all the materials and the presentation. However, I hope for more opportunities in the future. If you happen to organize a Flash and/or Unity event and you are looking for speakers be sure to let me know!

I don't have any further plans at this moment, except that I will also attend OFFF in Paris in June (as guest, not as speaker).

Photo credits [1] [2] [3]

I am proud to announce my latest project. It's a 3D racing game done in Flash with Away3D. I worked on this project together with Calisto Labs and our client was Snowball Media. My task was to create the 3D game part. It was great fun to work on this project. The team at Calisto Labs did a awesome job and everything went smoothly!

The project required to use my Actionscript and 3D modeling skills together on a scale like I never did before. I spent a lot of time with Blender and Unity in the last months, and without this experience I feel the project would be beyond my abilities. Also, having a direct comparison between Flash and Unity allowed be to see things in a larger perspective.

Flash vs. Unity... again

I built the game with Away3D FP10. I must say that Flash 3D has gone a long way since I first started to play with it, and Away3D is a very solid engine. The 2K polygon limitation is a thing of the past, and the correct perspective projection in FP10 makes everything look so much better. The team also added some other crucial features to create 3D environments - ex. frustum clipping.

Before starting this project I was working on a Unity3D racing demo, so I managed to get quite a few ideas on how to build such a thing. However, when I moved back to Flash, I was a bit desperate because I realized how much stuff I got used to in Unity is just not there in Flash. A built-in physics engine would be the most important one.

Home-made physics and collision detection

For physics in Flash I was tempted do use JigLib at first. But soon I found out that JigLib is way too complex, creating a realistic car behavior would be very difficult and it would probably eat too many CPU cycles. I estimated that Away3D will take around 90-95% of available processing power, so there's no space for any other complex piece of code to run in the same time. I always think that when it comes to 3D in Flash performance is quality, and there is no excuse for poor performance, even if you want something to look "realistic". So I ended building something very very simple.

Once I got the car driving around, I needed to add some collision detection. In Unity you quickly get used to the fact that any 3d object is a collider which makes collision detection a no-brainer - just implement a listener method and get a call whenever your object collides with another one. And if you need to add realistic collision response, you just make the object a rigid body and there you go! (Ok, you may need to adjust some settings, but still it's pretty straightforward).

In Flash it seemed like a much more complex task. I was thinking in the lines of creating a system based on the geometry of the track. I started to study curve equations just to realize I wouldn't make it even if I had a year to complete the project! Then I remembered, that a good way to test collision with complex shapes is a bitmap.

The way it works is that it takes the car's position and checks against a map of the track that has different colors for different areas - ex. red for the road, green for the sideways and so on... Since it samples only a few pixels per frame and all it does is check their RGB values, it's lighting fast. Truly, Flash is the art of minimal!

Scenery

The most fun part was to create the scenery. I've never tried to import such a large 3D scene into Flash so I wasn't even sure if Away3D would handle it. It turns out it did handle it pretty well. Instead of using Collada I went with Wavefront (OBJ) format for the meshes as I feel it gave me more flexibility. OBJ is a simple format which makes it a bit easier to see what's going on while Collada is bloated and overly complex for my taste. I used Blender to model the track and the few objects that you can see around it - lampposts, houses and the tunnel.

Lightning

Lightning is very important in low poly scenes, because it adds a lot of detail and atmosphere to the scenery, without adding any polygons. Even thought the scenery is simple, I ended up having more that 60 lamps. Of course all those lights needs to be baked on the textures, there's no way to run them in real-time. Blender has a very good texture baking tool and all this works fine for static objects. But what about objects that move, like the car?

For lightning the car, I reused the concept from collision testing. But instead of a collision map I made another one - a light map. Basically it's a bitmap with white areas where the scenery is lit and dark ones where it's not. By sampling a single pixel on every frame I can see if the car is passing through a lit area. Then, all I have to do is to apply a color transform on the car texture to make it brighter. Again - a minimal solution, but it works!

Now that you know all about it, go ahead and try it out!

Ringo from FlashBookmarks asked me if there were modifiers similar to AS3Dmod in Unity. I searched for something similar some time ago, but didn't find anything interesting.

However, when I was starting C# scripting, I ported two of the modifiers from AS3Dmod - Bend and Twist. So I thought to share them with everyone. Don't expect much, it's not the full library, just two classes. If I have some free time, I'll look into how to implement stacking, since for the moment you cannot apply two modifiers to the same object (the second one won't have any effect).

To play around with them grab this package and import it into Unity. Keep in mind that the modifiers work at runtime, so you won't see any effects in the editor until you run the game. If you want to animate them, just add another script that will have a reference to the modifier instance and change it's properties at each Update() call.

If you are interested in this kind of "bricolage" with 3D geometry, I recommend to take a look at the Procedural Examples project provided by Unity. You will find there some highly interesting samples like dynamic extrudes or perlin noise. It's a great starting point to explore runtime geometry transformation.

Of course, take a look into the sources of the modifiers too! You'll see how simple it is to access the geometry at runtime and do some modifications. Basically it goes like this:

Things worth notice: In Unity a vertex is just an instance of Vector3 - there isn't any special class for this, as in Flash-based 3D engines.

You can see a bit of the casting-drama I need to do (lines 1-2) to get to the object holding the actual geometry information (Mesh). That's a bit annoying in C#, with JS that code would be more readable. Anyway, it's better to make that only once, in Start() and not at every Update().

To get correct lightning effects on the materials, do not forget to call mesh.RecalculateNormals() after you've modified the positions of the vertices.

If you want to modify your mesh continuously (i.e. to animate it) it's necessary to keep the original array of vertices, because the code above overwrites the original positions. Take a look at the source code in the package to see how I did it.

That's all for now, hope you enjoy it!

UPDATE Nov 2009 There is a better quality video posted by John from Flash On The Beach. It is available here: http://vimeo.com/7292505.

As I promised during my "3 minutes" in Brighton, I publish all the sources of my presentation. I added some comments in the code and removed the part with the slides.

Here's also the demo and a video of the mini-session. The demo is pretty rudimentary - I made so because I wanted to keep things simple during the presentation. I hope that it will be a solid base for someone who wish to create a full featured bowling game in Flash.

There were a few other implementations of a bowling game in JigLibFlash and Papervision3D. Initially, guys a Blitz Agency published a few interesting experiments with JigLibFlash, including a simple bowling simulation. Devon O. Wolfgang has written a great tutorial about building such a game on Tech Labs - be sure to check it out. I found it only after the presentation and since the tutorial explains a lot of things in details I felt like I was reinventing the wheel here. But hopefully there are still a couple of things I can add.

Thanks to the new plugin API we developped some time ago, setting up a scene with JigLib and an 3D engine has got a bit less complicated. However, tweaking the engine can be a hell. Here's a few things I found out:

1. Simulation speed

When you create the physics engine instance, the default speed of the simulation is 1. This is very slow and unrealistic. It will look much more natural if the speed is increased. Beware however - at higher speeds the collision detection system can be very inaccurate and result in objects running through each other without any collision being detected. I don't think there is a single setting that works fine in every situation, but for this case 9 worked fine for the regular speed simulation, and 2 for the "slow speed". You should always try different settings.

2. Mass

Each rigid body has a mass property. It's easy to forget about it since it has a default value and it never complains if you don't change it. However, setting the masses right is crucial for a realistic simulation. In real world object have different masses, and so they should in a simulation. This is particularly important for a bowling game, where the ball is pretty heavy and the bins are not (I guess... has anyone ever had a bowling pin in his hands?) The trick is that the masses are relative to each other, so the more different objects you have the more you need to tweak the masses to get the results right. Also remember the effect of any forces applied to an object is related to it's mass.

3. Physics material

Each rigid body has a property called material which is an instance of the MaterialProperties class. It has two properties: friction and restitution. I found out that playing with this values has a quite big impact on the simulation. Ex. setting a high value of the restitution results in the object becoming bouncy - I used this for the ball in my older ping-pong example. In the bowling demo I used lower friction on the ball to make it slide more - just as a real bowling ball does.

4. Object rotation

Once a DisplayObject is wrapped into a physics rigid body you can't rely on it's rotationX, rotationY and rotationZ propeties anymore - because they are not being set. The physics engine sets the transformation matrix directly on the DisplayObject, so if you need to check it's rotation you need to extract it from the matrix. Fortunately, there's an easy way to do this:

5. Object activity

As a result of multiple forces being applied to an object and multiple collisions sometimes the objects are left in a state where the shake a bit endlessly. This can also happen when the objects are initially positioned. Calling the RigidBody.setInactive() will fix that. And you can call more than once.

Important conclusion: tweak, tweak, tweak...

It is generally agreed that hardcoded ("magic") numbers are not a good coding practice. However in 3D animations, and especially with physics the important thing is not the beauty of the code, but the what you see at the end. If you browse the source code from this demo you will notice that I not only hardcoded a lot of values, I even left ugly lines like that:

In fact this is what I like the most in doing all those demos and experiments - the moment when code stops being just a list of instructions for the machine and becomes an art of making things look good by adding little tweaks here and there. If you tend to write very clean code and use all possible standards and conventions, from time to time make it ugly... you'll see how good it feels :)

I hope that this few tips will help you with your next JigLib project!

Last but not least, I'd like to say thanks to everyone who woke up early to see the Elevator Pitch session. It was a great experience being there and talking to you. The Brighton Dome packed with people can be intimidating and 3 minutes is not much time, so there was no place for mistakes. Fortunately, the FOTB technical crew made it all seamless. Great job guys!

Finally, I would like to give a special thanks to John Davey for inviting me to Flash On The Beach and for making this great conference happen!

Hope to see you next year!

How I learned to stop worrying about plugin penetration and love Unity3D

I started this blog almost 2 years ago with an idea to explore the world of 3D in Flash and learn new stuff on the way. I quickly fell in love with Papervision3D. It offered a whole new world of possibilities for someone like me - bored with buttons & dropdowns and not particularly interested in building Flex-type applications.

Unfortunately the performance limitations of Flash Player prevented me from going far beyond the demos I posted on this blog. Creating a solid piece of 3D in Flash, with a decent frame rate is either impossible or requires an insane amount of code optimization. It often means resorting to low level programming. I think it is dangerous, because it's easy to loose track of the overall picture then. I feel that this is what happened to me the last few months.

I sure heard about Unity3D before, but, as it often happens, I did not have time to take a closer look. I applied for the Unity 2.5 beta test program back in February. I was accepted and got a 30-day copy of the software. What happened next? I opened it only once before the trial expired.

It's just hard to move to another software/platform when you are so completely immersed in Flash. Unity3D ended on my perpetual to-do list alongside with so many other things. I am sure many of you feel the same way.

A new toy

Recently I bought a Macbook Pro. My first Mac ever! A friend suggested that I move all my projects and workspace to the Mac immediately to make the transition fast. Unfortunately I had some difficult and urgent projects to finish, and ultimately I decided to stick with Flash on the PC for a while.

I had to do something with the Mac then... and that's where Unity3D comes in. Additionally, this time I decided to buy a license, thinking that spending those 150 EUR extra will make me even more motivated.

After just a few hours I was amazed. And I mean AMAZED! You can check the Tropical Paradise demo if you haven't seen it yet, download the trial copy and start exploring the 3D Game Tutorial to see what I mean.

It's not only how fast the 3D rendering is. Unity3D has a very intuitive interface organized around a simple and clear concept. I can literally see myself doing 3D games in a matter of weeks from now. Doesn't take long to realize the sad truth that Flash is far behind in almost every aspect.

The myth of high penetration

I do not want to do a list of pros and cons or some Flash vs. Unity3D comparison here. For a person who wants to do 3D for the web Unity3D is the winner by knockout and it makes no sense to elaborate on the subject.

However, there is one common argument against Unity3D. It's the low penetration rate of the web plugin. While Flash Player is at 98%, Unity3D is probably at < 1%. Aye! That sounds bad, doesn't it? I thought so too, but I made some thinking and researched a bit. Now please consider these points:

• Unity3D plugin is only ~4MB and it's installation is seamless. In most cases, it doesn't even require browser restart. Thanks to this it has a high successful-install rate, which means it's share of the market will be quickly growing. You can read a whole article on this topic here.
• Content created with Unity3D can be visually and interactively much superior to anything you can do with Flash. This will convince people that the little extra effort required to install the plugin is worth it.
• Most important argument: people access content from different devices. There are mobile phones, consoles, multi-touch interfaces etc. PC is no longer the king. Unity3D can be published for two of the most successful platforms out there: iPhone and Wii. "Web penetration" has no practical meaning in this case.

So, if you think Unity3D is not worth looking at because of the low penetration of the web plugin, think again!

This blog note may seem emotional. It is! I feel I have discovered the perfect technology, that I have been looking for and I just wanted to share. Now I need to master Unity3D as quickly as possible. On my way I will certainly discover it's flaws... it must have some. Maybe later I will find a more objective way to compare Flash and Unity.

Flash is much more than 3D and there are multiple directions it is evolving in. I am not predicting "the end of Flash" or anything like that - it would be ridiculous. Unity3D on the other hand, with all it's coolness is still the new kid on the block. It might be a huge success but it might as well share the fate of Wild Tangent and Shockwave players (I hope not!).

One thing is sure: if you are into 3D, you can't miss it!

JigLibFlash is a new library for 3D physics simulation in Flash. It is ported from a C++ open source engine. It's been around for a few months now, and if you haven't heard about it, you need to catch up!

I believe physics simulation is the next step in the Flash 3D world, so I got very excited when Ringo from FlashBookmarks invited me join the JigLibFlash team a couple of months ago. One little problem: I am perfectly lame when it comes to physics... In this situation, the only logical thing to do was to join the team and learn all the stuff I need to know about it in the meantime. Sounds like a challenge!

Now I slowly fill my knowledge gap. However, I also managed to do some actual work on the library. Together with Reyco we remodeled the API. We started by making it more Flash developer friendly, less C-style and more AS-style. All the methods start with a lowercase letter now, and instead of having to set the position and rotation using vectors and matrices, the new API offers simple getter/setters for properties like x/y/z and rotationX/Y/Z just like in Papervision3D or in the new Flash Player 10 API.

Last but not least, we also created a plugin system to easily integrate JigLibFlash with the popular 3D engines like Papervision3D or Away3D. Now there are specialized classes to interact with those two engines and it should be pretty easy to create a plugin for another engine if one needs. If you worked with AS3Dmod you should notice that the concept is similar to the plugin architecture in there. Update: I just saw in the sources that someone already created a plugin for Sandy3D.

To learn more about these changes you can refer to the tutorial I wrote which is posted on the projects wiki page. Reyco also wrote a great article about this on his blog.

The demo above is my first little experiment with JigLibFlash and Papervision3D. My idea was to integrate a Collada object with the physics system and to add some interactivity to it. I extended the Mouse constraint class created by Reyco to control the racket. I encountered some problems with stabilizing it in the long run. After having bounced the ball a few times the racket starts to rotate as if the constraints were broken... well, I still need to do some research on that.

Source code. You can browse the sources for the demo here.

Links. Some links to get you started with JigLibFlash:

• Official blog, Google code
• Wiki tutorial on new API and Reyco's article
• Really cool demo by Andy Zupko

PDFBook3D is a Flash application that allows to transform a PDF document into a 3D model, that later can be viewed pretty much like a real book. The product was just released by Powerflasher, and I was involved in creating the front-end 3d Flash part of it.

This application belongs to the family of flipbook engines. I am sure you have seen the classic 2D version of a flipbook at least once. It is widely popular around the web! PDFBook3D replaces this classic piece with a more accurate and realistic 3D version of the effect created with AS3Dmod bend modifier. The bend modifier allows to create paper simulation in Flash, which is something I already posted about back in November.

The application has a rich set of configurable properties, including dimensions of the book (for non typical page sizes) and a number of quality settings to get a decent framerate on slower machines as well. The Powerflasher team created an admin interface to generate 3d books on the fly. You can see it in action here. The product functionality also includes links editor and video embedding. If you are interested in more information please refer to the Powerflasher Solutions site.

PDFBook3D is also my first commercial project made using Away3D. There are a few features in Away3D that made me choose it, but mostly it was the curiosity to try "the other" engine. I must admit Away3D turned out to be pretty cool!

It is most famous for its advanced features like normal maps, path extrudes and bones animation. However, this project does not rely on those advanced functionalities. Most of what I used in here is pretty basic, but still I was able to find some cool stuff.

One very useful feature is being able to assign back material to planes. It might not seem like a huge thing, but since it is used to create the flipping page, it helped me a lot. Actually any mesh in Away3D can have a back material assigned to its faces using the back property of the class:

Notice, that it is not the same thing as having a double sided material - that is, the same material used for both sides of a face. In this case - one material is used for one side, and a completely different one for the other. This is why it was perfect for creating a page of a book.

Another cool feature of Away3D is triangle caching - it is a built in functionality, that doesn't require any extra coding and it can give a significant performance boost. Thanks to triangle caching, whenever the page flip animation is on, the rest of the book that does not move at this moment is not re-rendered at each frame. A similar optimization can be achieved in Papervision3D using render layers, but it's not as easy to use.

Last but not least, I'd like to thank Fabrice Closier from the Away3D team for support and feedback during the project!

Augmented Reality (AR) generated so much buzz in the community in the last few weeks that I had to give it a try!

I suppose most of you know what AR is, however just in case you don't, here's some basic facts from an Actionscript developer perspective: augmented reality uses pattern recognition to render 3D graphics on top of a video display. A pattern, also called marker, is a rectangular shape that you need to print and position in front of your camera. The stream from the camera is analyzed and the marker is used to determine the coordinate system of the world captured by the camera. This coordinate system is passed to a 3D engine which renders objects on top of the video image. Pretty simple, huh?

As far as Flash is concerned, the API for augmented reality is called FLARToolkit, which is an AS3 port of library written in Java and C done by Saqoosha. If you want to know more about this project, here's a great intro to the subject written by Mikko Haapoja.

In most of the cool AR projects I have seen so far [1] [2] the user is supposed to hold the marker and move it around in front of the camera and the 3d object follows the marker. I had a slightly different idea: why not just leave the marker and the camera in one place and use your keyboard to move around the 3d objects?

Some time ago I posted a demo featuring a Mustang that you could drive around a desert scenery. I thought it would be cool if I could now drive it around my bedroom floor. I was very surprised how easy it was to integrate my model with FLARToolkit and Papervision3D. All I had to do was to scale and rotate the model a bit and that's it!

The above video shows a recording of the experiment. If you have a webcam you can try it yourself. To do this, follow this instructions:

1. Print the marker (You can alternatively display it on your iPhone)
2. Click on this link, and choose "Allow" from the security dialog
3. Point your webcam so that the marker is fully visible
4. When the car is loaded (~250kb) it will appear on top of it
5. Use cursor keys to drive the car and CTRL key to apply hand brake
6. Have fun!

If you want to dig further here's the source code. The whole magic is in the FlarMustang.as class. The rest of the classes are an adaptation from the FLARToolkit basic example and some classes I used for the Mustang demo.

Unrelated note. In case you are reading this post in your RSS reader, you might not have noticed that I redesigned the blog. It's good to change from time to time! Among other stuff, there's a new list of previous 3D experiments and new links in the blogroll, so take a look.

Demos: [ 1 ] [ 2 ] [ 3 ] [ 4 ]      Flash Player 10 required (obviously)

Flash Player 10 has been around for a few months now. As most of you know, it brings some native 3D support. It's not as robust as Papervision3D or Away3D, and in fact was not designed to compete with those engines. Rather than that, it contains classes that perform 3D calculations and allows basic 3D manipulation of display objects.

The last months I focused on catching up with 3D math. I ordered a book called "3D Math Primer", which explains in detail all the vector and matrix operations involved in 3D graphics. Even though the examples are in C++ I recommend this book to anyone doing 3D in Flash. The authors made a great effort to explain the subject with clarity. It worked pretty well for me and I understand the math behind 3D much better now.

Both Papervision3D and Away3D were created so that we don't have to deal directly with 3D calculations. If you are working on a project that involves non-trivial 3D and has a deadline, it's better to choose one of those engines instead of "pure Flash Player 10".

However, if you just want to do some casual experiments and learn something on the way, FP10 is great. It offers a small number of tools, focused around Vector3D and a Matrix3D classes. These classes offer low level functionality, so to use them one needs to understand what's going on under the hood. This is a great way to learn!

Then I had this idea to port AS3Dmod to Flash Player 10 and try to run the modifiers on objects created using FP10 3D classes. It turns out it was not so difficult. Instead of rendering textured 3D objects I just render a single pixel for each vertex. Thanks to this I get a relatively good performance even with as much as 8000 vertices. I found that a modifier applied to such a large amount of vertices, gives interesting visual effects. I even wrote a very simple Wavefront OBJ importer, and I could import the 3d pants model from one of my previous posts to render them in Flash Player 10.

All my previous demos with AS3Dmod involved pretty small amount of vertices - most often no more than 500-600. At this level the performance of the modifiers was not a problem. But with 8000 vertices the modifiers start to have an big impact on the frame rate. A Perlin modifier alone takes 4-5 FPS, which is quite a lot and it got me worried. I believe code optimizations are in order. An interesting solution could be to implement the modifiers as a Pixel Bender kernels. Anyway, I need to do some more research...

In the AS3Dmod SVN you'll find the FP10 branch. The main difference between this version and the trunk is that it uses FP10 built-in Vector3D and Matrix3D classes as well as Vectors instead of Arrays. The sources for all experiments mentioned above, including a simple AS3Dmod plugin for FP10, are available here.

Take a test drive with a powerful Mustang GT in a desert scenery! This demo features a car model imported from Maya into Papervision3D. It uses some home-made physics to simulate the car movement and a couple of new AS3Dmod features to manage the model (more below).

I created this demo together with Krister Karlsson. Krister is a 3d artist working with Maya and founder of Modesty - a Stockholm based creative agency. The (super)low poly Mustang used here is based on a concept model made by Krister that was later used to create an actual car! You can read more about this project here.

Working with this demo has been an occasion for me to explore all the spectrum of Flash 3D related development, like importing and managing a complex model, adding interaction and scripting car physics. All this with a reasonable performance in mind, of course.

There is quite a lot of source code involved in this demo. I won't be publishing it all as parts of it are rather messy. Instead I'll focus on some particular problems I've encountered and solutions to them.

Pivots. I can't tell if this is a problem of the Maya Collada Exporter or if we have been doing something wrong, but the fact remains that moving the pivot point of an object in Maya is not reflected in Papervision3D. Instead, all pivot points default to the center of the whole object when the DAE file is imported.

To fix it, I had the idea to move the pivot point in Actionscript. Unfortunately, there isn't an easy way to do that in Papervision3D. This problem is generally solved by putting the DisplayObject3D inside another and move it in relation to its parent. But when all the objects are part of a structured DAE it becomes quite painful and requires additional steps. So instead, I wrote a modifier that takes care of that. It's called Pivot, and this is the way it works:

This piece of code will move the pivot point -200 units on all 3 axes. In case of this cube it will end up in the lower left corner. It does it without creating any additional display objects, but rather by offsetting all the objects vertices.

Please note that I collapse the stack after applying the pivot. Otherwise the pivot would be moved at every call to stack.apply(), which is not what we are looking here for.

The problem with the Mustang model was that all 4 wheels were rotating around the center of the car rather then around individual centers of each object. I needed to move the pivot point to the center of each wheel. I thought that moving the pivot to the geometrical center of the object is a typical thing to do, so I create a shortcut method for it:

Calling this function automatically sets the pivot point in the geometrical center of the mesh. At this point I thought I was done with the wheels, but there was one more problem...

Roll & steer. I think anyone who ever created an interactive 3d car model must have faced this one. A wheel rolls around the Z axis and the steering goes along it's Y axis. So, the first think that came to my mind when I started to code it was:

While this code seems perfectly logical, when put in action things go wrong and the wheel starts to act like if the car had undergone a severe crash.

The reason for this is that once the wheel rotates along the Y axis (turns), the Z axis is no longer the right axis for roll. The correct axis would be the Z axis rotated 30 degrees on the XZ plane.

Again, a solution would be to enclose the wheel into a parent DisplayObject3D and then use the parent to steer and the child to roll. However, since I had already an elegant solution for the pivot I didn't want to clutter my model with an additional set of elements for this one either.

There comes the Wheel modifier. Apply it to an object - typically of a cylindrical shape - and use its speed and turn properties to manipulate the wheel.

Internally the modifier applies some math to rotate the roll axis according the the current turn value so that everything looks fine and you don't need to worry about it ;) Read the documentation of this class for more information.

All this new features are available in the latest SVN revision of AS3Dmod. So, go ahead and grab it later. But first, enjoy your ride!

An Actionscript-based 3D bone system is something I wanted to do for a long time, but I couldn't figure out how to approach this problem for several months. A few days ago, I finally made a breakthrough. Here's a first demo I quickly put together: a 3D walk cycle.

So far the only way to have a walking character in Flash 3D was to create an animation sequence in a 3D editor and export it as an animated DAE and/or use Cast3D. For sure, this method allows to achieve awesome results, but it is not nearly as flexible as being able to control the animation directly from Actionscript.

So, how does the above demo work? First of all I created a model of pants in Blender. This is the 4th model I ever did with Blender so it not perfect, but is good enough for the job. The important part is that both legs and the waist form a single mesh.

After I imported the model into Papervision3D I applied several Break modifiers to the model. The Break modifier is a new class I wrote for AS3Dmod and is of key importance for this demo. In brief, it allows to apply rotation only to a group of vertices while leaving the rest untouched. The resulting deformation makes the mesh look like it was broken, hence the name.

I created a modifier stack and added 4 Break modifiers to the pants. One for each tight, and one for each knee. The angle for each of them can be modified separately, which allows dynamic animation.

You probably wonder how I did indicate which vertices belong to which part of the mesh (waist, thigh, calf) and how I even know where those parts start or end on the code level. That is crucial in creating an armature and it is also the tricky part. Most of the 3D IDEs, like 3Dsmax or Blender have some kind of visual interface that allows the user to select vertices and attach them to a bone. In AS everything is code, so this is a challenge. I must confess that for this demo I hardcoded some values and did some assumptions to make it work, but I think there is a way to make this task relatively easy or at least possible to apprehend.

In the long run, it would be cool if bones could be exported from 3D IDEs and exposed as objects in Actionscript. As far as I know, there isn't anything like this available for the moment. Away3D supports collada bone animation but, despite its promising name, it serves a different purpose (correct me if I am wrong.)

Let's go back to the demo. Once I had the Break modifiers in place and applied to the correct areas of the mesh, the rest was rather easy. To create a proper walk cycle, I just took Keith Peters' book "Making Things Move", Chapter 13 on Forward Kinematics, and I adapted the code from the examples.

In case you don't know that book, I would strongly recommend getting it. It contains all the essential stuff you need to know, if you want to call yourself a serious AS3 developer. I never leave home without it! There is also a sequel, with stuff for Flash Player 10.

This walk cycle is only a first step to create a bone system in AS, but I wanted to share it with you without spending another few months making it fully featured. Break modifier is available in the latest AS3Dmod SVN repository. I should warn you however that this is a very early version, not really usable for the moment.

Of course, updates are coming so stay tuned!

I did some research in the blogs and on Twitter, and often when someone mentioned AS3Dmod, the recurring theme was the lack of documentation. Yeah... but creating proper documentation is such a difficult task!

First of all, it's hard to find enough free time. Then, even if you find some, most of us, including me, will always find it more fun to write code instead. Eventually, I profited of the calmer period in the last 3 weeks and made some progress with that. The result is the AS3Dmod tutorial.

In the tutorial you will find answers to the following topics:

• how to integrate AS3Dmod with the Flash 3d engines
• how the modifier stack works
• how to create and apply modifiers
• how to animate the modifier properties
• how to use the collapse feature

Beside the tutorial there are API Docs available for some time now.

Another thing are simple interactive demos for each modifier. So far I created it for one: Skew. You can view it here. The demo allows to see all the properties and features of the modifier in action, instead of explaining it in writing. If this concept gets some positive feedback, I'll try to do more of those.

Hope you will find all this useful, and remember that feedback is very welcome (and much needed). And of course Happy New Year everyone!

Those of you who follow my blog, may remember the Paperskate3D demo I published back in the summer. Back then I said that I'll post the rest of the story someday. So here it is.

It was originally created for the Paperking3D contest organized by the Pv3D team. There were many awesome project sent it for this contest, including Vectorvision - the cool 3d vector library. The skate demo didn't make it to the top 3 but it received a honorable mention, which made me very happy.

But the best came a bit later, when I was contacted by Revolutive Design from Vancouver. Based on the original application, together we created a demo for Skateit, a new skating game from Electronic Arts targeted for Nintendo DS.

To biggest improvement over the original version is the new way the skateboard is controlled by the user. While before it was based on keyboard, in the EA demo it is modeled on the "Flickit" system which allows to control the skateboard with the stylus on the DS. To simulate this in Flash, I used mouse gesture recognition based on the excellent class provided by Didier Brun. This class was originally intended to identify written characters, but I was able to adapt it to my needs pretty easily. In the demo, it is used to recognize gestures for 20 different tricks.

To access the demo go to the EA website and click the large button in the middle right of the screen. Have fun!

WOW-Engine is an Actionscript API to simulate physics in a 3d environment. The code is based on a popular 2d physics library - APE. It offers some very interesting possibilities in 3D animation, and everyone doing 3D in Flash should have it in their toolbox.

WOW engine simulates a physics world model composed of entities called particles. Particles can be connected using constraints and exposed to different forces that make them move around. Some more information as well as a few tutorials can be found on the projects home page.

The basic technique of using WOW and 3D in Flash is to map those particles to objects on the 3D scene, and before each render read synchronize their x, y and z coordinates. But there are other ways too... On the WOW page, here and here you can find some examples of particles mapped not to whole objects but rather to individual vertices.

Animation based on vertices has been my main preoccupation for some time now, so I got immediately interested. Unfortunately those WOW examples come without source code, so I had to figure that out on my own. The above demo comes as a result.

Some quick details: the windsock was modeled in Blender and the textures were baked using the technique I mentioned in my previous post. On the flash side Papervision3D engine is used and a couple of AS3Dmod modifiers - Taper and Perlin.

This is my first experiment with WOW physics engine, but after getting a basic understanding of how it works, I am convinced there is a big potential in combining AS3Dmod and WOW, so more stuff will be coming hopefully!

As usual here's the source code. Please mind that this code is a result of a late night coding session ;)

Texture baking has been known to the Flash 3d community since a long time, but a quick look into Google shows us that it is not a very popular topic. I think it definitely should get more attention. In Flash performance is always an issue, and high quality is always expected by our clients. Texture baking helps to achieve this goal.

In short, it consists of getting all the lightning effects of a material and "burning" them directly on the material itself. After such operation, the lights cannot change anymore, but the material gets a nice effect of depth and it doesn't require any more computations at runtime.

Most of the available 3D software offers a texture baking function. For the demo above, I did choose Blender because it's free (it also has a very weird user interface, but I digress). On the Flash side, it runs on Away3d.

To create a model with baked textures in Flash I followed this steps:

1. Create the 3d model of the chair in Blender
2. Project all the faces of the model on to an bitmap (in Blender its called UV Unwrapping)
3. Paint the texture in Photoshop
4. Import the texture to Blender and apply it to back the model
5. Add lights and bake the texture on to another bitmap
6. Export the geometry with the UV information included (Collada or Wavefront)
7. Export the baked texture as a jpg
8. Import both into Flash and use your favorite 3d engine to render

Each of the steps above could require a separate tutorial, so instead I published some files created in the process to give you a better idea. You can get them here. Please note, that this is only a reference material - it is not supposed to be built or compiled or anything.

Additionally, for those of you who use Blender a nice tutorial on both UV Texture Mapping and Texture Baking is available here.

In the current state of Flash 3D and its overall performance, texture baking is a highly useful technique that allows to achieve very good results. If you do not believe me, take look at some of the most awesome Flash 3d pieces that came out in the last few months:

• Bunker demo by Alternativa3d team (sources available here)
• EcoDaZoo by Roxik

I am sure you've seen them before anyway. They both combine great visual effects with a very high performance. And guess what... in both of them, you'll find baked textures all over the place!

Since I released the bend modifier a lot of people have been asking how to bend an object not only along one of its axes, but along any angle. That was clearly a feature missing, but I also didn't have a clue ho to do that. Now, a after a good few days of struggle, and with a little help from my friends - here it is.

The Bend class now takes 3 arguments in the constructor, the third being the angle at which the bend is executed. Please mind, that this argument expects an angle in radians. In the code it looks like this:

Of course, there is also a getter/setter for the angle, which allows to change the value dynamically, and to use libraries such as Tweener to animate it.

The Bend modifier is now part of the AS3Dmod library. Since AS3Dmod is cross-engine, the above demo was done with Away3D, but of course, the same functionality can be used with other engines, including Papervision3D.

For those of you who remember the initial bending demo, I used a 100$ bill as a graphic element then. I thought it would fun to be consistent and to stay in the American theme. Therefore, this time you can play with the Declaration of Independence. Fans of "National Treasure" should be delighted.

As usual the sources are available and you can get them here. I hope you like the demo and that you will find the code useful. To compile it you need the latest versions of AS3Dmod, Away3D and Tweener libraries.

First of all AS3Dmod has a new team member - Makc. Makc has been involved in several AS open-source projects, most notably Sandy3D. You can read more about Makc, here, where you will also find some cool Flash experiments.

The code has also evolved, and was moved to a modest 0.2 version. The most important changes are some fixes in the imports that prevented the compilation of the project so far.

The 0.2 version has 5 new modifiers: Bloat, Twist, Taper, Skew and a UserDefined modifier that allows to create custom vertex manipulation and easily integrate it into the stack.

Other then that, there is now an ANT script that allows to compile the demos for all 4 engines, and also to generate API Docs. Of course the documentation is ever evolving, but the latest version is always available here. Please note, that API docs are synchronized with the contents of the SVN repository. The zipped sources available on the project home page are there for reference, but they quickly become outdated.

Last but not least, there already are a few demos that use AS3Dmod. I allowed myself to gather a short list of what I found out there:

• Interactive demo by Dehash. I think the first AS3Dmod ever made ;)
• Elephant demo by Tres Graficos
• Away3D + AS3Dmod by note.x
• VectorVision + AS3Dmod by Billy Lamberta
• Bending example with Pv3d by ClockMaker

Thanks to everyone! We will try to put in more and more features, document the code and also create a tutorial, so stay tuned.

Meet AS3Dmod, a cross-engine 3d modifier library for Flash. Sounds cool? Yeah, I am sure it does! Just in case, however, let's see what it does step by step.

A. Cross-engine. 3D in Flash is around here for some time now, and it resulted in quite a few engines available. Each engine has some cool features of its own, and sometimes having to choose between them can result in a headache. While AS3Dmod won't solve this situation, it is an attempt to create some functionality that will be available across different engines.

B. Modifier library. The readers of this blog probably remember the Bend modifier I wrote for PV3D. Well, it is one of many possible modifiers. Classic 3d packages come equipped with at least a dozen of them, which include: taper, twist, noise, skew, etc. Modifiers are basically functions that can be applied to a 3d object to transform it in a certain way. They can be used separately, but when combined they become a very powerful tool. In this, they are much like filters in Photoshop.

C. Flash. Instead of explaining how modifiers work in Flash, here's a short list of some of the possible uses: a sheet of paper, a ribbon, a waving flag, water, cloth, a tree or other plant, a butterfly, a birds wing... They could also be helpful in animating a human face, and in many other situations where animations exported from 3d editors might fall short.

Does it sound cooler now? It sounded to me when I had the idea a few days ago. As you can imagine I was not able to develop anything close to a full featured library in this short time. Nevertheless, I publish what I was able to come up so far, so that you can all see where I am heading. For the moment, here's what's in there:

- a framework for creating static and animated modifier stacks
- 3 basic modifiers: Noise, Bend and Perlin
- plug-ins for the most popular engines: Papervision3d, Away3d, Sandy3d and Alternativa3d
- a simple demo for each engine
- basic documentation not yet :)

Source files. The project is at Google Code. You can do a checkout from SVN or download a ZIP.

Demo. In the repository you can find 4 demo SWFs, one for each engine. It features a basic stack of 4 modifiers - Noise, Perlin and Bend x2. You can also compile the project yourself. Just follow the instructions I added in the document class code.

Notes.
1. There is no plug-in for FIVe3D - that is because this engine works in a quite different way and doesn't use vertices which are fundamental to modifiers.
2. The Alternativa3d version works in a bit weird way. I think, it is because there's something I don't understand about this engine, but I will be figuring this out.

Papervision3D comes with a set of primitive 3d shapes - such as a plane, a cube and a sphere. It is possible to do quite a lot with those, but the real power lies in importing objects from 3d editors like Maya, 3dsmax or, in that case - Blender. In Papervision3D, the format of choice for importing meshes from 3d editors is Collada.

Some time ago I actually did export a Collada file from Blender and import it into Papervision3D. You can see the result in one of my early posts. Back then, it was like riding a bike, downhill, in a forest, blindfolded - you don't register much, and at the end you are just happy that you made it. This time I wanted to actually understand what is going on.

For my first experiment I decided to export only the geometry and not the texture. I wanted to see my bend modifier applied to such an object. The task turned out to be not difficult at all. The only thing I needed to understand was the way Collada files are represented in Papervision3D.

A Collada is basically an XML file (with a *.dae extension), so it is perfectly human readable. It contains a part that describes its contents. In my file it can be found somewhere towards the end, and it starts like this:

The first interesting point is that a Collada file represents a scene, not a single 3d object. In my case the scene has only one object, but it is still a scene. That is why Papervision3D will first create a DisplayObject3D that represents this scene, and only then it will add a child that represents the 3d object itself. So in the code, once the Collada is loaded, I can access the object "LadyDae" like that:

Note that the scene is named "COLLADA_Scene" not "Scene" as you could expect from the XML. It's because this name is hard coded and it will always be the same, no matter what the name is in your file. Also note that the attribute you need to refer too is the 'name' attribute, not 'id'.

Now, that the 'mesh' variable contains a reference to the object holding the geometry applying the Bend modifier is pretty simple:

So, I'd love to tell you stories on how, after a many sleepless nights, I finally made a breakthrough and now the Bend modifier works with Collada... but the fact is it always did. The thing I failed to grasp so far was the structure of the Collada object itself.

This unexpected success left me some time and energy to play a bit with another topic from my must-explore-soon list - ShadedMaterials. I did not do much. Basically I just followed some of Ralph Hauwerts old demos, but it resulted in some effects that are nice to look at.

Credits. The model of the girl is a very simplified version of the original made by Tiziana. The background tile comes, as usual, from SquidFingers.

Source. The source code is available here. In the example, I load a ZIP containing the Collada file. A class called KMZ is able to load and unpack it correctly, and it saves a lot of bandwidth. I got this tip on the Pv3d forum (thanks!)

A long, long time ago I used to skate. It was a time when Tony Hawk was still in his teens, boneless was the coolest trick and Future Primitive was the latest skateboarding movie, available exclusively on a VHS tape (remember those?).

I was never very successful at skateboarding. However, I always admired the smooth moves of the deck under the feet of guys more talented then myself. So, many years later I thought it would be nice to pay tribute to this sport, and Papervision3D seemed like the perfect tool. The execution however appeared a task much more difficult than I imagined. Fortunately, I had some free time in July and August so I sat to my desk and started coding. Today you can see the results.

Source. As usual, I post all the source files - you can get them here (this time under CC license, not MIT). I also plan to write some technical details on how the application works soon. For the moment, I will just mention that it is built with Papervision3D and the animations are done with Tweener.

Now, no more talk. Just click here and bust some perfect ollies, dudes! And to be sure not to miss the rest of the story, subscribe to this blog's RSS or just bookmark this page.

Recently I wrote a tutorial for The Tech Labs, and it has been published yesterday. It is a tutorial which shows how to build a simple 3d photo album using the FIVe3D and TweenLite libraries. You can read it here. I hope you'll will find it useful!

The Tech Labs is a website recently started by Carlos Pinho. It "is intended to be a tool to contribute for the research, information and knowledge for the IT professionals as also for the non-techies." Be sure to check it out. There's already a few good tutorials in there and new stuff is coming every week.

Carlos also runs the Flash Enabled blog, which features cool stuff from all over the web. You will find there plenty of links to resources ranging from Photoshop tips, to Actionscript and Flash/Flex tutorials. It is a great source of information, so be sure to visit!

I used to work for a company that made of the concept of pixel perfection one of the pillars of their success. Today most of the top clients and agencies demand high quality, and pixel perfection became one of the important components of a great website. Obviously, it concerns 3D as well.

To achieve it, sooner or later in your 3D adventures you will come across one of these problems:
1. A material should be rendered as in 1:1 scale of the original texture
2. A precise, pixel level match between 2d and 3d content is necessary

In order to check how to solve these problems, I created a very simple demo. First, I had to make sure my textures are not scaled. I started to browse the Papervision3D forum and it wasn't long before I found the magic formula:

Many thanks to unnormaJH and kjangsa3 for this tip. I would add that it works just as it is only with planes. In my example I worked with a cube, and a cubes Z position is defined by the point in the center of it - which means that the face facing the camera will be closer half the cubes width, so remember that this needs to be adjusted.

UPDATE. With the new Camera classes (GW rev. 639 an higher) the formula changes a bit. The "-1" in "zoom-1" is no longer needed. So it looks like this:

The second problem - a pixel perfect match between 2D and 3D - is mainly about being able to figure out the screen X and Y coordinates of the 3D object. They can be obtained that way:

That, I found in an article on PV3D.org which shows how to do this. There is also an example of how to get the X and Y coordinates of a single vertex.

In the demo above, knowing the screen coordinates of the cube, I use the BitmapData.draw method to take a snapshot of the 2D background at this position for use as the texture. If you scale the browser window you can see how the texture on the cube is being updated to exactly match the background tile.

In the real world, what you'll need much more often is to do the opposite, that is drawing 2d content exactly on top of a 3d object. An example would be replacing a texture with a Sprite containing some interactive elements. By knowing the screen coordinates of your 3d object, and by making sure it is scaled 1:1 it is a quite easy task to make that look seamless & perfect!

Source code - get it here.

Credits The tile graphics come from Squidfingers.

This time I have something less mind-twisting then the bend modifier and all that math. The idea was to create an animation of leaves flying around, propelled by wind controlled with the microphone. This little experiment was also a good occasion to work with some new Papervision3D features.

Effects. The Papervision3D team decided to merge the Effects branch with Great White earlier this month. All the detailed information about that can be found on by Andy Zupko's blog. There is a lot of cool stuff, so be sure to check it out. One of those is a new property of the DisplayObject3D called 'useOwnContainer'. When set to true, all the classic bitmap effects can be applied directly to a mesh. In this case I used the BlurFilter, and the ColorMatrixFilter for the depth-of-field effect. The inspiration came from the really cool depth-of-field experiments by Mr.doob.

SimpleLevelOfDetail. With this one, the idea is that the further an object is from the camera, the less faces it has. That way we can get an important performance gain without sacrificing the quality too much. I tried to implement it, but I ran into some trouble. Later, after a brief discussion on the PV3D forum, Andy Zupko added the 'SimpleLevelOfDetail' class that implements this concept. I used it here. Thanks a lot, Andy!

Bend modifier. Finally, I use the Bend class to give the leaves a slightly more natural look.

Now, the fun part. The leaves react to the activity level of the microphone, so if you take yours and start to blow into it, they will take off and fly around. Be careful, if you blow too hard you will get a head rush! :)

If you do not have a microphone use your mouse wheel to create wind. Keep in mind however that it isn't as much fun as with a mic. Also, on Windows, the microphone volume settings are really tricky and well hidden in multiple places, so if something is not working - double check those in the first place.

Last but not least, here's the source code (updated Dec 17th 2008 to work with latest PV3D trunk).

UPDATE Sept 9th, 2008. The Bend modifier is now part of AS3Dmod library. Use that one instead of the class linked below.

First of all, thanks for the great feedback I got after the first post on bending. I really appreciate it.

This time, I post an updated version of the Bend class for Papervision3D that works with every simple DisplayObject3D - that is, a DisplayObject3D that does not contain any child objects. Click here for a demo. The algorithm has been refined and the class public methods have been changed. Here's an updated use-case:

The bend() method accepts four arguments, out of which the two first are new:

• The axis of the bend
• The direction of the bend

Now: I tried to write the theory behind those axes. I really did! But then this post was becoming boring and highly incomprehensible, so I gave up.

The best thing to do is to experiment with those setting. Each argument can take one of the three values: Bend.X, Bend.Y and Bend.Z. Different primitives will need different settings for the bending to look correct, but on the other hand, playing with them can lead to quite fascinating and weird-looking shapes, so be sure to try different combinations.

If you do not have time to experiment however, I created a special method, that magically bends the object the right way:

The two other arguments are 'force' and 'offset'. Both are described in detail in the source code. Additionally, I also published the source of the demo here. Have fun!