3D in Flash – Cel shading

[kml_flashembed movie=”/wp-content/uploads/2006/10/3ddemo-cellshading.swf” width=”445″ height=”200″ FVERSION=”8″ SCALE=”noborder” /]

It seems like weeks and weeks since we started developing the new Plug-in Media website. It’s like a huge alien organism from outer space, growing and growing out of control, not satisfied until it overtakes the Earth!

Which is only to be expected, considering its 50s and 60s b-movie theme.

Plug-in Media home page - exploding skeletons

It seems like every page requires some crazy new effect, so far we have flying saucers, gooey drips, exploding skeletons, and lens flare particle sparks.

Spark effect from the new Plug-in Media website

You probably already know that we have a Flash 3D rendering engine, and it was important to me to show off our 3D capabilities gratuitously and at every possible opportunity. 🙂

But we had a problem. The ultra clean clinical look of the 3D objects just didn’t match the style of comic book hand illustrated graphics. So we had to work out how to make our 3D objects look more “cartoony”.

The first problem was that our 3D objects lacked a black outline. Well, we already had a way of rendering each side (or plane) of a 3D object with a black outline, but when shapes got complex it looked a bit messy. For example, our cylinder objects are made up of many planes, and the outline would appear on every one, making a huge blob of outlines! See example above.

When working in 3D you can save processor time by working out which planes are facing away (or “back-facing”) and then not draw them. This is called “back-face culling”. But we realised that we could use these back-faces to our advantage – if we drew them with a massive fat outline, they would only show up around the edge of the shape. And that’s how we get our new cel outline effect.

One of our website pages is called “Dr Pluginschtein’s lab” where you can play with various switches and knobs and cool stuff happens (honest). Here is a 3D cel rendered switch in the lab, seamlessly(!) integrated with cartoon style illustration.

3D Cell shaded switch in situ on the new Plug-in website

Coming soon – 3D string simulations, bat particles, 3D spinning news panels, and scantilly-clad women flashing their underwear (don’t ask).