Jean-Marc Le Roux Web, RIAs and chocolate spaghettis…

Minko 2.0 New Feature: Wireframe Rendering

One of the new things coming up with the next version of Minko (Minko 1.0 is available here) is a new extension called "minko-effects". This extension will feature new rendering effects, shaders and shader parts. One of them is the wireframe effect. Wireframe is very useful to see what the geometry looks like and it is widely used to debug 3D applications.

Rendering real-time 3D using wireframe is usually not that much of a big deal: OpenGL and DirectX make it easy to switch from normal to wireframe rendering. But it works only when using the fixed function pipeline. Not with shaders. As every shader program defines how rendering should be perform, it is actually quite logic that wireframe should be handled there. But doing wireframe in the shader is really not easy, mainly because it is a per-edge algorithm and we can only work per-vertex or per-fragment.

In this article, I will try to expose the main challenges regarding the implementation of a single pass wireframe method in a shader and how Minko makes it possible to address those issues.

Implementation

We based our work on the Shader-Based Wireframe Drawing article and the minimole implementation. Of course, just like any shader in Minko, it is written with ActionScript instead of AGAL/PB3D. The single pass rendering method is very well explained in the article:

The intensity, Ip, of a fragment centered at p is computed based on the window space distances d1, d2, and d3 to the three edges of the triangle

In the single pass method, the polygon edges are drawn as an integral part of drawing the filled polygons. For each fragment of a rasterized polygon, we need to compute the line intensity, I(d), which is a function of the window space distance, d, to the boundary of the polygon which we assume is convex. The fragment color is computed as the linear combination I(d) Cl + (1−I(d)) Cf where Cl and Cf are the line and face colors, respectively.

Source: Shader-Based Wireframe Drawing

Implementation details, code and demo application right after the jump...