kode80

Stylized Graffiti Rendering

Ben — Fri, 08 Jan 2010 19:16:08 +0000

Click the above example to load another tag, there are 26 tags to view and 4 different styles. Mouse position controls rotation.

Earlier this week I stumbled upon #000000book.com a site created as an open database of GML files. GML is a new XML format used to describe graffiti tags. GML stores not only the resulting tag but the artists hand movements that created it, essentially a recording of the tag being written. Aside from providing a great source of interesting data I consider this to be an important effort in curating an often misunderstood global artform.

The first step was to create an AS3 library that could parse GML files and provide an interface to the time stamped point data. In doing this it became very apparent that not all GML files were created equal with some files having wrong parenting of nodes and others storing coords incorrectly but this is to be expected considering the GML spec is only at 0.1c.

To render the tags my aim was for a stylized pseudo 3D look. The points are transformed and projected with Z based on time, then rendered as a 2D textured line. Each line segments left/right edges are outlined and the start/end edges are rotated/scaled based on neighboring point angle and Z respectively. Finally a subtle glow filter adds some contrast.

Code

GML experiment source on Google code

Links

000000book GML database

000000book API

Version 0.1c of the GML specification

PV3D light rays

Ben — Thu, 19 Nov 2009 15:09:17 +0000

In the example above, click and drag to reposition the light rays filter light source.

For a while now I’ve been wanting to experiment with volumetric lighting techniques in Papervision and the other day I came across a great article from Fabien Sanglard regarding a fake post processing approach described in Graphics Gems 3. (Fabien has some excellent posts on GFX coding which I highly recommend, especially if you are an iPhone developer)

The post processing technique described is beautiful in it’s simplicity and gives great results for very modest overhead. All it requires is drawing the occluders of the scene as black over a colored background then applying something similar to a radial blur emanating from the imaginary light source.

In the scene above the rendered output is scaled by 25% and drawn to a bitmap using a ColorTransform to make it black. This bitmap then has the light rays pixel bender filter applied, is scaled back up and blended with the scene using the regular blend mode. Check my experiments repository for the code!

Code

PV3D light rays source on Google code

Links

Fabien Sanglard’s article on light scattering as a post process

Per pixel depth clipping

Ben — Mon, 26 Oct 2009 15:55:45 +0000

In the example above, mouse X controls the cubes X position, mouse Y controls the cubes Z position and clicking switches between viewing the output and the depth buffer.

The primary purpose of a depth buffer is to enable per pixel depth checking. Before a pixel can be drawn its depth is compared with the current depth at that point in the depth buffer. If the new depth is greater than the current depth then the new pixel is obviously occluded and thus shouldn’t be drawn. Doing this prevents depth sorting issues and allows objects to intersect without the need for dynamic tessellation.

With my 11bit depth buffer technique in PV3D the primary goal was enabling post processing effects that are only achievable with a depth buffer however at the back of my mind I wondered if depth testing was in some way feasible. Initially I contemplated lowering the precision to 8bit and using BitmapData methods to create per object masks but this would involve a large number of bitmap operations.

Using custom PixelBender blend modes seemed like the perfect solution offering a similar setup minus all the bitmap operations while still keeping 11bit precision. The first blend mode does the depth testing for each depth buffer layer resulting in a clipped depth buffer. Then a second blend mode copies over the texture based on a red channel encoded object ID.

kode80 joins PV3D

Ben — Mon, 26 Oct 2009 15:28:41 +0000

As you can probably tell from the experiments on this site I have something of a love affair with 3D in Flash. I remember the first time I saw a Papervision example running and how blown away I was, PV3D was truly a milestone in the Flash platforms history. Since then I have used PV3D in many commercial works and have taken every opportunity to explore how far 3D in Flash can be taken. With the introduction of PixelBender and the additions to the Graphics API the room for experimentation has increased once more.
Recently I was invited to join the Papervision3D team as a contributing member to help out with the latest iteration of the engine, PV3D 3.0. Working alongside some of the best AS3 coders in the business on such a landmark project is certainly an honor, exciting times ahead.

Fluid dynamics smoke

Ben — Mon, 05 Oct 2009 15:12:19 +0000

In the example above, click and drag to draw smoke. Mouse movement without clicking pushes smoke around.

Fluid dynamics is the study of fluids in motion. Simulating the interactions of gas and liquid in motion is a highly processor intensive task requiring many iterations of thousands of calculations.

It is impossible to research fluid dynamics without hearing the name Jos Stam, the principle scientist at Autodesk (and winner of Academy Award for his work on subdivision surfaces).

The example above is an implementation of Jos Stams Real-Time Fluid Dynamics for Games paper. It utilizes an 80×80 grid and is pure AS3 (no Alchemy or Pixel Bender). To achieve a decent framerate at that grid size certain liberties had to be taken with the algorithm. For example by assuming both diffuse and viscosity are 0 many of the calculations can be simplified.

The multiple iterations per frame step were also removed as with this type of soft smoke/cloud effect they are not necessary for a satisfactory result On top of that I have optimized as much as possible, for example I was able to remove a good 80% of multiplication’s from the original paper.

Next step, Pixel Bender and/or Alchemy…

Code

Fluid dynamics smoke source on Google code

Links

Real-Time Fluid Dynamics for Games paper

Eugene Zatepyakin’s AS3 fluid experiment,
Alchemy version

Pierluigi Pesenti’s AS3 fluid smoke experiment

PV3D depth buffer source

Ben — Wed, 30 Sep 2009 20:57:03 +0000

Clicking the example above will switch between viewing output and the depth buffer.

Using the same Pixel Bender kernel as my previous depth of field experiment it is possible to achieve depth based fog. Since the kernel controls alpha based on depth we just have to fill the filter target with the desired fog color. To make it a little more visually interesting I have added some animated perlin noise as well.

The trick to creating the depth buffer was rather simple. First a texture is created with each pixel set to it’s Y value, then when rendering, each vertex has it’s V texture coordinate set based on it’s Z position. From here a Pixel Bender kernel can decode the depth… and then the fun begins!

I have updated my experiments repository with the above example. It’s still in the early proof of concept stage but should provide you with a starting point for your own depth aware Pixel Bender effects.

Code

Depth buffer fog source on Google code

Links

Depth buffer depth of field experiment

Depth buffer ambient occlusion experiment

PV3D Depth of Field v2

Ben — Tue, 29 Sep 2009 19:01:38 +0000

In the example above, use the controls to set the depth that the DOF starts and ends at and the strength of the blur. Setting the focus depth to greater than the blur depth will cause the distance to be in focus with the foreground out of focus. Click and drag to reposition the camera.

The biggest issue with my past DOF experiments in Papervision was the lack of depth buffer precision. Depth information was limited to per triangle and so even with high tessellation and generous blurring the effect was not that great and displayed a lot of artifacts.

With my latest PV3D depth buffer implementation providing 11bit precision at the pixel level the past DOF limitations are no longer an issue. Since the effect no longer requires high tessellation there is also a decent performance boost!

To achieve this new version of DOF a simple Pixel Bender kernel reads the depth buffer and sets the targets alpha channel based on the depth, with a blur filter applied to the target we have blur based on depth, depth of field.

Links

My original Papervision DOF experiment

Depth of field wikipedia page

Papervision SSAO phase II

Ben — Mon, 28 Sep 2009 15:17:18 +0000

In the example above, the SSAO layers brightness, contrast, alpha, blur and blend mode can be adjusted to achieve different effects. Included are 7 presets as examples of what can be achieved with just these parameters. Click and drag to reposition the camera.

Screen Space Ambient Occlusion is a post processing technique for approximating the shading achieved by ambient occlusion. Rather than using scene information such as geometry and lights to calculate shading, SSAO requires only a 2D depth buffer. For each pixel in the depth buffer multiple samples are taken from nearby and used to approximate the level of occlusion, this value can then be used to shade the output pixel.

The example scene above is made entirely of Papervision cubes and spheres and contains no lights and no shader materials. Each object renders it’s bitmap texture as expected but also renders it’s depth to the depth buffer. The depth buffer is filtered using my SSAO Pixel Bender kernel then blurred and brightness/contrast adjusted using standard Flash filters.

For a purely post processed effect the results are remarkably good adding a lot of depth to a flat scene. However there is still lots of room for improvement. The halo around objects could be minimized with a custom blur filter. The self-occluding surface issue is the result of no normal information and I have a few potential solutions for that. Still, not bad for phase 2!

Papervision SSAO preview

Ben — Sat, 26 Sep 2009 04:38:01 +0000

This is an early preview of my Screen Space Ambient Occlusion implementation in Papervision. To achieve this I am using a custom material that renders the scene as an 11bit depth buffer. I am then using Pixel Bender to interpret the depth buffer and filter using my SSAO implementation. More examples, code and a better optimized PB kernel to come next week.

Links:

Screen Space Ambient Occlusion Wikipedia page

Some great examples of different approaches to Screen Space Ambient Occlusion at meshula.net

iPhone MD2 example

Ben — Thu, 24 Sep 2009 20:25:44 +0000

The first major step when developing a 3D app is finding a way of importing models created in external editing software. There are hundreds of formats to choose from each with their own pro’s and con’s.

For most 3D apps on the iPhone all that is required is the mesh (vertices, triangles, texture coordinates, normals) so the simpler the format the better.

Using a format that is well supported across a variety of editors and platforms is also essential for an optimal work flow especially if coders and artists are in different cities/states/countries.

The MD2 file format was created by id Software in 1997 for non-level models in Quake II. It is a very light weight file format containing only the mesh. Animation is handled via keyframes with up to 512 frames stored in a file. Vertices are stored in a compressed format while normals are stored as an integer lookup into a pre-calculated table.

It proves to be a great fit for the iPhone in most instances.

Using my KEMD2Object class you can easily load, render and animate MD2 files. Animation is handled by filling a KEMD2Animation struct with the start frame, end frame and FPS of the animation and setting the animation property to that struct.

For animated MD2’s make sure to call the tick method each frame passing in the time in seconds since the last call as this is where the keyframe interpolation occurs.

Downloads:

My MD2 classes and example project

Links:

Full break down of the MD2 format by David Henry

www.blender.org

id Software’s Quake II page