We recently had the pleasure to participate in the Starbucks Love Project website for Tool of North America and BBDO NY.

In partnership with Product (RED), Starbucks has launched a campaign to help raise funds for and awareness of AIDS in Africa, featuring a CD with music from artists such as U2, John Legend and the Dave Matthews Band.

Our task was to build an interactive version of the CD for the website using Papervision3D. You can drag and spin it to see the list of tracks, click on them to listen to the songs and open the CD sleeve to watch the video.

Other elements of the site have been carefully crafted by a fantastic team of professionals and friends: great design and animations by our beloved Medios y Proyectos, love gallery by Mr.doob and solid site development by the guys at We Are Mammoth.

Many thanks to Tool for putting such an excellent team together, and to BBDO NY for being so enthusiastic about it, it’s been a great project to work on.

So much energy has never before been contained in a bottle. You had better not touch it, one can never know what consequences it might have.

Our first commercial project as HelloEnjoy went live on July 22nd 2009. Built for our friends at Grupo W in Mexico, EnergyLab is a 3D puzzle where the fastest to complete it wins a trip to Russia to fly a L39 combat jet (like James Bond in Tomorrow Never Dies).

The game starts after the bottle explodes and your job is to piece it together. Click on the background and drag to navigate around the scene. Click and drag the pieces until you find their matching silhouette.

Behind the scenes

When building the 3D experience with the latest public version of Papervision3D, we dedicated a lot of time to get the lighting right. After trying out many solutions, we decided to implement two different shaders. Screen-space Phong shading is used when the pieces are floating on their own, creating a realistic lighting effect without a noticeable performance hit. But when the pieces are assembled, visual artifacts appear along the edges. To avoid this, we switch to a different shader texture taken from a separate bottle mesh rendered outside the viewport.

A low poly version of the bottle was created in Maya and divided in 26 separate pieces. At runtime, each piece is extruded to construct the geometry of the sides and interior. This approach enables us to remove adjacent sides when the pieces fall into place, avoiding sorting issues. To build realistic breakup geometry, we determine the extrusion direction using vertex normals.

Realtime extrusion was also used for the volumetric light that comes out of the explosion centre. In this case, we calculate the direction from the origin to each vertex world position. On every frame this single point extrusion is updated to maintain the illusion of a realistic light source. Once again, as the pieces are joined together we remove all redundant geometry keeping the borders of the resulting assembled shape.

A complex scene hierarchy handles rotation along the different axes, while keeping the pieces looking at the center. Quaternions and matrix math are required to keep the motion smooth and also for dynamic parenting during user interaction. Simple physics take care of the collision between pieces, while positive and negative radial forces keep them inside the play area.

Working with Grupo W has been a very rewarding experience, their minute attention to detail can be appreciated everywhere, from the fast-forwarded skip intro to the electrified feel of the user interface. Their talent and hard work has been essential to achieve their vision. We hope you enjoy it.

The home site of Papervision3D was conceived as an interactive experience to showcase the full power of the engine at the time of launch, May 5th 2007. First presented at FITC Toronto 2007, it puts the user inside a coral reef scene where they can look around and interact with the different fish.

This piece features different types of objects and materials. The panorama skybox is a cube segmented by 7×7×7, for a total of 294 triangles. Each face has its own material that is loaded separately.

There are 70 fish, made of 5 plane objects in straight hierarchy, with transparent textures divided in pieces at runtime. Animation is calculated for each plane, and assigned as XZ position and rotationY. That’s another 700 triangles. The jellyfish is a simple 2-triangle plane, with an alpha video texture of 180 frames. It changes position randomly, twice on every loop.

And the shark is a COLLADA object of 1104 triangles with different materials for body, mouth and teeth. Custom 2D skinning is applied on its vertices, converting XZ position to polar coordinates. A very basic AI is used to flock the fish and shark around. It also handles their speed, flapping and turning.

Launched May 8th 2007, this interactive toy car was the presentation website for carlosulloa.com our new business as interactive 3D shop, a year before founding HelloEnjoy.

It features one of the seminal demos in the development of Papervision3D, a simple racing car, included in the examples of the engine code since first beta. It is very easy to use, just use cursor keys to drive the car and click on the background to restart.

It was the first in a series of interactive 3D car projects that have taught us much about how to push 3D technologies on the Web and mobile devices.

Made in Barcelona and launched March 13th 2006, Noventaynueve.com is the old portfolio of Carlos and the first website ever built with Papervision3D, the 3D engine that opened the third dimension to the Flash platform.

It features the first version of the flying papers effect, which later became a common feature of many PV3D sites and kickstarted the engine development. It was created in Flash 7 using ActionScript 2.

Click on the 99 logo and portfolio items arrive flying to form a grid around the centre, spiralling out from newest to oldest. Main navigation through the gallery is by rolling over items, the ones under the cursor remain static while the rest of the grid decomposes in flying planes. A secondary navigation in the Projects tab on the right locks the grid in its initial position to browse the items by list.