Tools + Solutions

Aug 11

WebGL on heavy rotation

Surprisingly there’s quite a lot of stuff going on related to the Web here at Siggraph. And even more suprising, those are the session that are really fully packed with people! I don’t know, either they’ve been given the smallest rooms or they didn’t expect so many people interested in the latest efforts behind the words Web3D, X3D, WebGL etc.

Full WebGL session

...last row, but at least sitting.

So, after I could not make it to the Web3D BoF on Tuesday (room was bursting!) I made it this morning to the BoF of Khronos Group, one of the key influencers behind OpenGL or WebGL in particular. Almost 15 speakers in 2 hours (!) showed their stuff and here a some of my favourites:

The Jellyfish simulation by Alexander Rodic makes a beautiful, but useless proof of 3D artwork (his own words…). Alexander is no developer at all, but comes from an artists perspective settling from Maya to WebGL directly (without having any experience in any more “basic” GL programming). With that perspective he claims that JavaScript is very fast – well, compared to C++ it still is NOT ;-) check it out, you can play around with it get behind the secrets for yourself.

Just a short note in between made by an employee of nVidia: they are working on WebGL mobile implementation for the Android browser. His non-public demo showed a small 3D aquarium with about 100 texturized fishes running at 6 fps (on a Motorola Xoom device) …ok that’s almost nothing, but interesting though the initiative of nVidia and their support for WebGL. will finally make my dream come true! Mark Danks of Kodoma Studios presented the robot design studio of their upcoming e-com site where you can design and – yes, they can – 3D print your own robot. Although they would not need too many polygones (the robot must not exceed some limits for the printing precision), the demo was pretty neat. You can even add a lot of textures that would map correctly onto the meshes in realtime, which is straight forward in other technologies but not as easy with the given WebGL standards and JS programming. Anyway, I am looking forward to my own nation ;-)

You should definitely start playing around with PhiloGL from SenchaLabs. It’s a very straight forward framework to start your work on WebGL projects and understand how the parts work together. The site is fully-loaded with examples and the project available on Github. I liked most the realtime color 3D histogram analysis – great work of state-of-the-art web tech!

There’s been another very interesting presentation by Opera Labs. Unfortunately, I couldn’t find anything about it later on the web. Anyway, by trying to develop a modern 3D gaming experience with the abilities of HTML5 they’ve revealed some interesting measurements on performance. For instance, rendering with WebGL comes up to 60 fps while simple 2D drawing on the canvas will result in almost 15 fps (with less quality). Of course, no new fact at all, but it proves how important the knowledge of “real hardcore graphic programming” will be in the future of exceptional experiences in web development.

As all of this stuff is not included on the conference DVD, the guys promised to upload their presentations to the Web GL Blog. Hopefully they’ll hold the promise, so far the site looks a little empty…

Aug 11

Pixar always makes a nice queue

Have a look at this picture:

Wow, it's Pixar!!

That is the end of a queue and the entrance to a production session…and here:

What's going on here? Pixar?

That is the start of that same queue on the OTHER side of the convention center. Though there were many voices telling “oh the people are queueing for just another pixar-something-session” I made my way into the room (of course in the end while waiting till everybody was inside).

It was worth it. Enrico Casarosa, an italo-american animator and storyteller working at Pixar on movies like “Cars” or “Up”, showcased his animation short “La Luna”. It was previously released on several short film festival, starting with Annecy in June. Enrico held a fantastic presentation. Most likely for an animator he presented a bunch of his slides as small illustrations he made by himself.

Have a look at the trailer:

Not only that it’s a very nice (and sentimental) piece, looking behind the scenes reveals how much work you have to put in those 4 or 5 minute animation shorts. Enrico talked about almost every step – starting with convincing animation titan John Lasseter with some sketches up to storyboarding, animating, lighting, sound production and overall delivery.

As always filmmakers show how important a precise and well-established production cycle is, especially for highly creative and even emotional experiences! It makes perfect sense to…

  • not only think but talk, present and discuss your story, idea, product, project to others right from the start (we tend to often think for ourselves until there is the “right point” to reveal our thoughts)
  • produce sketches, workout prototypes and dummies, even with the risk to FAIL at some point (Enrico had the great idea to take his crew out to a moonshine ride with a small boat to discover the feelings of the fishermen….they learned absolutely nothing, but were freezing to death ;-) )
  • hold your schedule and follow the steps you’ve learned to produce an highly professional outcome (though it takes time and you might think of “oh I did that a thousand times, I would not need that skeleton working scheme stuff…”)

I don’t think the above would prove wrong – in any industry, especially the so-called creative programming.

May 11

Realtime ribbon: the new Audi Q3 webspecial

Although it’s kinda hard to tell – all the transitions and stages in our latest webspecial for the Audi Q3 are rendered in realtime 3D (which sounds easier than it was).

In this article we’ll give a few insights in how we built it, using Away3D 3.6.0 in combination with Collada files and textures exported from Cinema4D.

Before the real production started we did several tests on how to build an endless ribbon. The ribbon should display the loading process and had to form the stages for the actual stage content.

The core of the solution is quite easy: A sequencer which connects several imported meshes combined with a texture animation and a camera animation.

The sequencer

Because the shape of a full dynamic ribbon would be hard to handle in realtime we used a set of meshes which were modeled in Cinema4D. The first and the last face of each sequence has to match the specific face of the previous/next sequence.
This was mostly done in the authoring tool (Cinema4D). To achieve a seamless look the corresponding points of the faces are docked in realtime inside the Flash application.
For each stage a special short connector sequence is available, to help overcome the difference in face width between ribbon and stage.
For the travel between the two different routes of the plot (bright and dark side) specialized sequences are used.
All in all we use seven stages, eight connector sequences (the intro stage needs two), four ribbon sequences and one change sequence.

Let the ribbon flow

The animation of the ribbon is based on a simple but brilliant idea from Richard Olsson: a growing bitmap material. Therefore the UV-texture coordinates of the meshes have to be unwrapped in a special way.
The texture parts of the mesh have to be aligned in the order of the faces from top to bottom. To animate the growth of the ribbon you “just” have to unmask the bitmap from top to bottom in a modified Away3D BitmapMaterial.

In this basic variant the relative height of a UV-Segment can be more or less different to the height of a mesh segment. The result is a not linear animated ribbon. Because we had to apply easings to the animations we had to linearize the texture animation.
In the first step we developed a small tool which sorts the mesh faces from top to bottom. This can be done very easily because in this case two neighbor faces will always share two vertices.
The ordered faces are used to calculate a path which lies exactly in the middle of the ribbon (yellow dots and yellow lines). With this data the height of every mesh segment can be determined. When this data is set in relationship to the height of the depending UV-segments a very smooth and nearly linear animation of the texture can be achieved.

Camera path animation

For the camera animation a similar technique is used. To achieve a smooth movement the centers of the mesh segments defines the camera target path. Because the normal path animator of Away3D does not consider the length of each segment we had to write our own path animator class. It is quite simple: due to the knowledge of the total path length and the length of each segment we can do a linear animation along the path.

To achieve a smooth camera animation on the path and on the way to the final camera position on the stage we used two “magnetic” camera targets. The red one follows the generated path on the ribbon. The green one is used for the transition from the ribbon animation to the final stage position.

Each sphere has a force to the real camera target (visualized by a trident in the picture) which is enforced or weaked due to the situation. At the end of the animation all targets are at the exactly same (predefined position) to assure a seamless look in combination with the other 2D elements.

That’s just a small impression into what kind of problems had to be solved for this webspecial. In the end the performance was better than could be expected and the result is a convincing combination of 3D and 2D elements. At least when taking into account that the whole implementation phase lasted less than 6 weeks – including localization and Q&A!

Mar 11

When touch just isn’t enough

Always wondered how to control your Parrot AR.Drone in a more exact and stable way? Maybe even over longer distances than the integrated WIFI can provide? Well, look no further – Andreas just set up the Ardudrone project on Googlecode (

“This project contains all required binaries and scripts as well as the source code for modifying the Parrot AR.Drone to be controlled by a standard RC Remote Control. The RC receiver is connected directly to the drone and sends the commands directly with the help of an Arduino board. ”

Aug 10

Adobe Media Encoder not hinting MP4 files?

After compressing some clips for a recent project, something strange was happening – the Flash Player would always download the whole mp4-file, before it started playing it. After some research it became clear that there were no streaming information – or as they are called “hint tracks” – embedded in the files. When exporting via handbrake or Quicktime Pro the resulting files would contain those tracks (you have to enable “streaming” in the output options). Bad luck, as neither handbrake (always crashed on encoding raw input files) nor Quicktime (no 2-pass encoding and no batch options) worked for us. As always some command line magic helped, but this isn’t the optimal solution as missing hint tracks can easily be overlooked.

But for the curious readers – the following approaches are working:

Using mp4creator:

mp4creator -hint=1 movie.mp4
mp4creator -hint=2 movie.mp4
mp4creator -optimize movie.mp4

(first hinting video and audio track, afterwards optimizing the structure)

Using MP4Box:

MP4Box -hint -mpeg4 movie.mp4

It isn’t completely clear to me if only the hint-tracks have the outcome that the files aren’t streamed by flash or if it is the fact that the MOOV-atom isn’t positioned at the beginning of the file.