DOM Racer

This project is currently my most ‘work in progress’ project, I’ve only been working on it a couple of days….

The starting point for this project was the question, what are the limits of the DOM in terms of rendering and performance. I needed to push my knoweldge of CSS based animation, and learn to use all the performance debugging tools that the browsers have to offer.

The road in the background is not an animated gif! this is being drawn on the fly using CSS. In my next update I will include controls to adjust the camera height and position so it’s more obvious it’s not just a gif!

I came accross an article called Lou’s Pseudo 3d page on rendering methods for 80s 3D arcade games, these games did not use polygon based 3D graphics, they used a technique that used a single point perspective rule, as things moved further along the imaginery Z access (away from the eye in into the screen) there X and Y positions are translated more towards the vanishing point in the perspective. The maths is simple enough to be done quickly on the limited hardware. There are many limitations, for example the point of view cannot rotate in any direction, but the effect has a surreal ‘cartoony’ look, which as a legacy of the popularity of the games that used it, is a style of it’s own.

Screenshot of Sega Outrunner (Outrun 2)