HelloEnjoy is now on Facebook, please become a fan on our new page (and tell your friends)! There’ll be Facebook only betas and more… So make sure to join us!

Our first piece for the Unity Web Player is called HelloRacer Unity and follows the racing tradition that started almost three years ago and still lives in my personal website carlosulloa.com.

We began playing with Unity during the summer with the intention of building iPhone apps. We released HelloRacer iPhone and had a lot of fun in the process, so we decided to dedicate a bit of time to the web player.

The Unity Web Player is the most powerful 3D platform we’ve worked on, and it certainly was a challenge to make good use of it. We focused our work on building a highly detailed experience, paying particular attention to the shaders and the physics.

We have found the Unity Web Player an excellent option for high-end 3D in the browser. While plug-in adoption is still very low, the quality of the experiences make installation worthwhile for most users. We don’t believe interactive 3D is just for games, as it has so much potential in other fields such as data visualization and advertising.

Shaders

We used separate materials for the different surfaces of the car. Body matte, body shinny, brake light, brake light glass, decals, driver, front light, interior, steering wheel, vents and windows are individually recreated with distinct textures and shaders.

While Unity comes with a great library of shaders, we chose to develop custom versions to achieve the look we wanted with a maximum performance. This approach also enabled us to create specific shaders for the reflection as simpler and faster variations of the originals.

Shader programming is incredibly powerful and gives the developer precise control of how each pixel is rendered.

We also have three shadows, one for the car and rear wheels, and a separate shadow for each front wheel. From a geometric point of view, they are planes positioned at ground level, but their texture is what makes a difference. Baked in Maya using ambient occlusion, the shadows are subtle, but serve to add depth to the scene.

Racing Physics

Unity includes the powerful PhysX physics engine, but to achieve a realistic experience you need to understand the forces involved in your simulation.

Just as it happens in real life, the weight distribution of a car determines its handling. The weight is divided between each of the four wheels, but this distribution varies as the driver accelerates, brakes and turns. For example, when braking the weight is shifted to the front wheels.

Finding the ideal center of gravity is necessary to create a realistic racing simulation. Front-heavy cars tend to understeer and rear-heavy cars to oversteer, but most important is the center of gravity height, relative to the track, that determines load transfer from side to side.

When cornering, centrifugal force acts at the center of gravity to lean the car toward the outside of the curve, increasing downward force on the outside tires. Sport car designers aim for a low center of gravity to minimize the load transfer from side to side and maximize grip.

Tyre friction and slip are another relationship to understand when adjusting vehicle dynamics. The overall friction force is usually separated into a forward component (to accelerate and brake) and a lateral component (to steer the car). In both directions, when the force acting at the tyre exceeds the grip limit, the wheel starts to spin or slide.

Since cars behave differently at different speeds, it’s necessary to monitor the vehicle’s velocity and adjust the physics parameters accordingly. A dynamic setup improves handling in a similar way as electronics are used to enhance the safety of road cars.

If you are interested in the subject, I would recommend reading the Physics of Racing Series by Brian Beckman. Even if you are not going to write your own racing engine, I always find very helpful to understand how it works.

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.

We are super happy to see our latest work EnergyLab selected today as Site Of The Day in The FWA. Congrats to Grupo W. ¡Que viva México!

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.

On July 18th, our first iPhone app HelloRacer became available in the AppStore. Initial download figures surpassed our expectations, reaching the Top 25 of the Racing subcategory in several territories. User feedback has been very useful, with plenty of advice and constructive criticism.

HelloRacer is an interactive 3D toy car that you can drive around your screen. Tilt to steer, touch right to accelerate and left to reverse. Swipe right or left to restart if you get lost.

This is the iPhone version of the Papervision3D classic carlosulloa.com, that you can also enjoy in a Flash enabled browser.

This app was created with Unity3D, a state-of-the-art authoring tool for interactive 3D development. The conversion process was pretty straightforward due to the similarities between ActionScript and Unity’s JavaScript. 3D assets were imported directly into the Unity IDE but textures needed to be converted to iPhone specs.

Since Papervision3D and iPhone share many features and limitations, we see a lot of potential in projects designed to be deployed on both platforms.

We are HelloEnjoy™ and we are an interactive studio.

We play. We innovate. We think. We engineer. We develop. We create.

We do all of this with a love for each project, everyday. And we do this so that we can make new experiences, and new windows to new worlds.

This is our blog. We will post here news about the studio and insights about our work.

Enjoy.

Our Interactive Director is the founder of Papervision3D, the leading 3D engine for the Flash platform, which he has been using since 2006 to create award-winning websites such as Sony Bravia and In an Absolut World.

Carlos has been passionately involved with interactive entertainment since the early 90s, both developing and leading PC & Playstation titles for Psygnosis and Sony Computer Entertainment Europe.

In 1999 he moved into online advertising, employed by top agencies in Madrid, Barcelona and London, and his work evolved into the fields of graphic and typographic effects, motion design, interactivity and mainly 3D.

He has been working on his own since May 2007, and at the end of 2008 decided to open shop in London under the studio name HelloEnjoy, which he runs with his partner Libertad Aguilera.

Carlos is a regular speaker at industry events and conferences and is an active member of the Open Source community. He was named to Creativity Magazine’s Creativity 50 in 2009 for these contributions.

You can follow him on Twitter or his personal blog.

Hello. We are HelloEnjoy™.

We are an interactive studio.

We build cutting edge 3D experiences for Flash, using Papervision3D, our own invention. And we now craft them for the iPhone too.

We are a team of two, specialized in 3D and creatively led by Carlos Ulloa. We are based in London and love to partner with talent from around the globe.

Welcome to our blog.

Enjoy.

Telephone
+44 (0) 20 7482 8854

Email
info@helloenjoy.com