Water For Life Microsite using Papervision3D

Euro has just launched an integrated campaign for the NSW Government called “Water For Life”, which aims to inform the public about new water sources, and ways in which we can use our existing sources more efficiently. The campaign presents a “day-in-the-life” view of a water drop’s journey through our water system, and includes TV commercials, printed and online advertising, and a microsite.

The aim of the microsite was to unify the journeys presented in each TV commercial, and provide a little more depth of information without becoming too heavy on details. We wanted to reuse and maintain the visual style of the TVCs, with the almost anthropomorphic focus on the water drop itself, so we decided to build a set of 3D scenes where people could discover additional information on water efficiency at various points on the drop’s journey.

We used Papervision3D to render the scenes, which were partly modelled in 3D Studio Max and textured using a combination of texture-baking in 3DS and plenty of post-production in Photoshop. Then additional elements were added directly in Papervision, such as the refractive water drop, depth-of-field particles, tree decals, skyboxes, lens flares, etc.

I’m really happy with the final result, as well as the performance of the 3D scenes thanks to some optimisation tricks and techniques. I’m planning on doing a series of posts going into further detail on some of the effects and optimisation techniques, including source code where possible. If there’s anything specific you’d like me to cover, leave a comment.

#tweetcoding Part 5 – Snake, Cube, Jellycube & Headless Flasher

My next #tweetcoding entry is Snake, a game which needs no introduction. No game here unfortuntely – just the control mechanism, but I believe this was the first entry to use keyboard input. Use W, A, S and D to control the snake… although due to the code I’ve used which interprets keyboard commands into horizontal and vertical velocities, other keys will also affect movement in unexpected ways. Here’s how it works:

The key codes for W and S (up and down) are 87 and 83, and the key codes for A and D (left and right) are 65 and 68. When a key is pressed, first I check if it is up/down, or left/right by testing whether its keycode is above 80 or not. If below, I subtract 66.5 from the key code, leaving either -1.5 or 1.5, which I use as the X velocity. If above 80, I subtract 85, leaving either -2 or 2, then multiply by .75 to ensure that the X and Y velocities match.

Of course, this means that other keys will also affect either the X or Y velocity at unpredictable speeds.

Number 12 – my attempt at creating a shaded 3D cube cheats on two levels – 1: it’s not correct perspective 3D but isometric 3D, and 2: the “shading” is achieved with simple parallel lines which converge to mimic a shading effect as each plane turns away from the camera. The isometric effect is simple to produce – just scale the parent sprite/clip (in this case stage/root) by around 50%, and then rotate the children.

Jellycube was a natural progression from my previous entry, but also inspired by Human Target by Melon Dezign. Melon’s style was always a big inspiration for my demogroup Reality, particularly with their de-emphasis on cutting-edge effects in favour of design and humour. However, once again I wasn’t able to achieve my desired outcome – instead of squashing & stretching the cube I was restricted to rotation only.

My 14th, and final entry is Headless Flasher, an attempt at creating a stick figure running across the screen. This one was originally inspired by my cat Lucy, but it became pretty obvious that the 140 character limit wouldn’t allow four legs and a tail, so I switched over to a human stick figure. Unfortunately there was no room to add code for his head (or blood spurting out of his neck for that matter).

Papervision3D Grass/Fur Effect

To me, “Shadow of the Colossus” represents the pinnacle of PlayStation 2 games. Aside from the fact that it’s one of the most artistic games I’ve ever played, it’s also one of the most technically brilliant games on the platform, pushing the PS2 to its limits with real-time motion blur, HDR rendering, a LOD landscape system, IK & physics system, self-shadowing and, of course, the impressive fur shading. However, the PS2 can’t handle all of those things done “properly”, so some were achieved with ingenious tricks and shortcuts, all covered in this inspiring article on The Making of “Shadow of the Colossus”.

Since reading that article I’ve always wanted to recreate the fur effect, and have now done so using Papervision3D. As I was hoping to use it on a recent project, instead of fur I decided to simulate grass:

The effect is achieved by drawing cross-sections of the fur/grass on a set of parallel layers – in this case I have 7 layers which, using 512×512 alpha-transparent textures with 4×4 segments, is pushing the limits of Flash/PV3D. However, because we’re only ever dealing with 7 textures, it can handle potentially infinite blades of grass – the example above has 3000. The grass is generated in real-time – I build the layers up by starting each blade of grass with a certain size & direction, and growing it out on subsequent layers. The effect looks fine when the camera is close to perpendicular or the normal of the planes, but things start to fall apart when the planes and camera approach parallel.

The grass highlights are created with simple gradients, and I’ve also rendered basic shadows to the dirt layer (although they’re barely noticeable with such dense grass). Each blade of grass has a random colour, weighted heavily towards green but straying towards blue/brown in rare cases. Creating the effect of the grass moving in the wind is a simple matter of moving each plane along the X & Z axis, with the motion increasing based on the distance from the base layer.

Being a huge fan of both Ico and SOTC, I’m really looking forward to seeing the next game from Fumito Ueda and Team ICO, and what they can do with the PS3 hardware.

#tweetcoding Part 3 – Starfield, Sinescroller, TweetSynth & VintageFlash

My fourth entry is Starfield – another classic demoscene effect. Nothing special about this one – it simply uses FP10′s new 3D abilities to move some 2×2 pixel bitmaps. Would have been nice to get some rotation in there, but unfortunately most of the 140 characters are use up with creating the stars.

Fifth is Sinescroller. Perhaps the most common demoscene effect – scrollers go all the way back to the early crackintros in which coders would inject personal messages, greetings or credits. Unfortunately this is a fairly unimpressive sinescroller – only 3 characters, and pretty poor kerning.

TweetSynth is my sixth entry, and the first entry to use audio by seven minutes. Nothing to see here, but make sure your volume is down low first. I didn’t want to use random data, so I played with the numbers until it sounded interesting. Check out Zachberry’s entry too – he managed to get a much more interesting sound going.

Number seven is VintageFlash, an attempt at recreating an “old film effect”. Managed to squeeze three separate elements into this one – the background flicker, random noise to simulate dust, and the vertical lines simulating scratches in the film.

Onwards to Part 4.

Flash Radial Spin/Zoom Motion Blur

Update – just posted the source to my MotionBlurSprite class.

Following on from my previous post on motion blur, here’s a quick-and-dirty (and therefore pretty fast) method for achieving radial blur effects in Flash. Just slice your image up into a grid of smaller bitmaps, and apply a linear blur to each slice. You do get seams between each slice where the blurred slices either don’t overlap properly, or overlap too much. While this is quite noticeable when the effect is applied to a static image, it looks pretty good when things are whizzing around.

Using this method, you can achieve a radial zoom blur:

…and radial spin blur:

…and of course combine motion blur, zoom blur and spin blur to achieve 3D motion blur: