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.

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.

www.youtube.com/watch?v=35RZ1cmNcxE

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.