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!

Tags: , , ,

One comment

  1. I think one of your commercials caused my internet browser to resize, you probably want to put that on your blacklist. Realtime ribbon: the new Audi Q3 webspecial DamnRight is a cool name for a blog BTW ;)