Anamorphic Lens Flare

Update: I’ve just pushed a new SWF with a much better enhanced effect. I’ve tweaked things like the number of vertical/horizontal blur passes – which are now up to 3/6 – but also the flares’ brightness, contrast and dirt texture. I think it looks way better now!

Tonight’s experiment was focused on post-processing. My goal was to implement a simple anamorphic lens flare post-processing effect using Minko. It was actually quite simple to do. Here is the result:


The 1st pass applies a luminance threshold filter:

Then I use a multipass Gaussian blur with 4 passes: 3 horizontal passes and 1 vertical passes. The trick is to apply those 5 passes (1 luminance threshold pass + 4 blur passes) on a texture which is a lot taller than wide (32×1024 in this case). This way, everything gets streched when the flare are composited with the rest of the backbuffer.

Minko, Flash 11.2 and Stage3D: 870 Million Triangles Per Second

Update: the full sources for those benchmarks are available in the minko-examples repository on github:

The new version of Minko (Minko 1 is already available on GitHub) will introduce a few major API changes. Those changes are designed to provide better performances: Stage3D will soon be available for Android and iOS and we wanted to be ready.

To test the new version, we developed The Mirage: a small and yet addictive 3D game where you have to shoot flying saucers. You can control the game with and HTML5 web application on your iPhone/Android device. The application was built in just 24h with Minko 2 and it works on the web, the iPad, iPhone and Android devices. Check it out if you haven’t already seen it!

Minko 2 will eventually bring an incredible performance boost. Indeed, the boost is so big that working with Minko 2 will be just as fast as working with the bare Stage3D API (yes, that’s a bold claim… literally!). I will not explain how we achieved this in details, but to put it simply we’ve introduced an optimized scene-to-GPU data binding API that makes it possible to have a very high level scene representation working on a very low level static list of draw calls. Those draw calls can then be fed directly to the GPU.

If you’re a Flex/WPF developer, you’re probably familiar with the view/script data binding API. Minko’s data binding API is the same but the view is a 3D scene.

In order to demonstrate how fast it is, I’ve done a little stress test application:

870 Million Triangles Per Second right after the jump!

Procedural Animated Flag With Minko ShaderLab

I used Alexandre’s work about waves simulation on the GPU with the ShaderLab to create a French flag with a simple blue-white-red procedural texture. Here is the result:

As always with the ShaderLab, not a single line of ActionScript and everything is hardware accelerated! If you want to subscribe to the Minko ShaderLab beta, you can apply on the “Minko ShaderLab: Beta testers wanted!” thread on Aerys Answers.

Quake 3 HD with Flash “Molehill” and Minko

This video demonstrates what can be achieved using Minko, the next-gen 3D engine for Flash “Molehill” I’m working on.┬áThe environment is a Quake 3 map loaded at runtime and displayed using high definition textures.┬áThe demo shows some technical features such as:

  • Quake 3 BSP file format parser
  • Potentially Visible Set (PVS)
  • complex physics for spheres, boxes and convex volumes using BSP trees
  • light mapping using fragment shaders
  • materials substitution at runtime
  • dynamic materials using SWF and the Flash workflow
  • first person camera system

Quake 3 BSP file format

Quake 3 uses the version 46 of the BSP file format. It’s farily easy to find unofficial specifications for the file format itself. Yet, parsing a file and rendering the loaded geometry are two very different things. With Minko, it is now possible to do both without any knowledge of the specific details about the BSP format and algorithms. Still, those are interesting algorithms so I wanted to explain how it works.

Binary Space Partioning (BSP) is a very effective algorithm to subdivise space in two according to a “partition”. To store the subdivided spaces, we use a data structure called a BSP tree. A BSP tree is just a binary tree plus the partition that separates both children. This picture shows the BSP algorithm in 2 dimensions:

In that case, each node of the BSP tree will store the partition line. When working with 3D the partition will be a plane. We can then walk through the tree by simply comparing the location of a particular point to the partition. A good use case is 3D z-sorting: we simply have to compare the location of the camera to the planes stored in the BSP nodes to know which child should be walked through (or renderered) first. But in Quake 3, the BSP tree is used for:

  • physics: the tree makes it possible to optimize collisions detection by performing only the required computations and tests
  • rendering optimization: by locating the node where the camera is, we can know what is the Potentially Visible Set (PVS) of polygons that should be renderered and ignore the rest

In each “*.bsp” file are stored the BSP tree itself, the partition planes, the geometry, the PVS data and even bounding boxes/spheres for each node to perform frustum culling. This data is very precious and is compiled directly in the file by tools like GTKRadiant.


HD textures were provided by the ioquake3 project.

AIR 2.0 HTTP Web Server

AIR 2.0 brings a lot of new features. Among them is the new ServerSocket class. The Socket class exists since Flash 9 and enabled a lot of new client/server applications. But it has always been limited to client side sockets as long as AIR (and the Flash Platform as a whole for that matter) is concerned. Therefor, this new server socket feature makes it possible to build actual server software using AIR!

Rich of this new and incredible ability, Christophe Coenraets posted a small but yet very powerful code snippet to build an HTTP web server using AIR 2.0!

Frustum Culling in Flash 10

Update: corrected a few glitches in the bounding sphere creation routine.

Optimization is always important. But when it comes to 3D for the Flash Platform, it’s an everyday battle. The first ideas that come to mind are to avoid:

  1. redrawing the same regions : each pixel value must be set once and only once
  2. rendering invisible objects : objects that are out of sight still take a lot of CPU horsepower

While Flash takes care of the first one in its very renderer, the second one is not handled. But that is something we can easily address!

The Technic

The method is called “frustum culling”. The big picture is that every mesh is approximated using a bounding volume (typically a sphere or a box). If the bounding volume is visible, the corresponding mesh is rendered. The two following pictures show the frustum culling caught in action:

The mesh is visible
The mesh is visible: TPS counter indicates 18900 triangles per seconds
Frustum culling in action (TPS counter indicates 0!)
The mesh is out of sight: frustum culling is acting and TPS counter indicates 0!

Code snippets and a live experiment right after the jump!