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

12Dec/112

Minko 1.2: Easier Post-Processing Effects

I've just pushed an update on Minko's GitHub repository. It is tagged as version 1.3 1.2. This new version introduces new helper classes to make it easier to write post-processing effects.

The New Simplified Post-Processing API

Writing a single pass post-processing effect has never been easier, here is how to write a simple greyscale post-processing shader (go to the end of the post to see it in action):

public class GreyscalePostProcessingShader extends PostProcessingActionScriptShader
{
  override protected function getFinalColor(outputColor : SValue) : SValue
  {
    return float4(
      float3(divide(add(outputColor.r, outputColor.g, outputColor.b), 3.)),
      1.0
    );
  }
}

And here is another example to create a "vignettage" effect (it darkens the corners of the viewport):

public class VignettagePostProcessingShader extends PostProcessingActionScriptShader
{
  override protected function getFinalColor(outputColor : SValue) : SValue
  {
    // f = distance(pixel, screen border)
    var f : SValue = length(multiply(subtract(interpolate(vertexUV.xy), .5), 2.));
 
    // f = f^3
    f = saturate(multiply(f, f, f));
    // f = 1 - f
    f = subtract(1., f);
 
    return multiply(outputColor, f);
  }
}

And then, where you initialize the Viewport:

viewport.postProcessingEffect = new SinglePassPostProcessingEffect(new GreyscalePostProcessingShader());

As you can see, writing a single pass post-processing shader is really simple:

  1. Extend the PostProcessingActionScriptShader class.
  2. Override the getFinalColor() method to implement your shader.
  3. Set the Viewport.postProcessingEffect property to a new SinglePassPostProcessingEffect using your shader.

Multipass Post-Processing

If you need to write multipass post-processing effects, it's just as simple as when you work with a rendering effect: implement the IEffect interface and create an IEffectPass class for each pass or reuse the provided SinglePassEffect class (because a single pass effect is... a single pass).

In Blacksun, we use this technique to create the HDR Bloom effect that uses 5 passes:

Single Pass HDR Bloom

I also tried to implement the HDR bloom effect in a single pass. I'm not sure about how well it performs compared to the multipass version, but it should be faster at least:

public class HDRBloomPostProcessingShader extends PostProcessingActionScriptShader
{
  private const BLUR_SIZE		: int		= 3;
  private const RGB_TO_LUMINANCE 	: SValue 	= float3(0.2126, 0.7152, 0.0722);
 
  override protected function getFinalColor(outputColor : SValue) : SValue
  {
    var pixelSize : Number 	= 1. / 512.;
    var uv	  : SValue 	= interpolate(vertexUV);
    var color	  : SValue 	= float4(0.);
 
    for (var i : int = 0; i < BLUR_SIZE; ++i)
    {
      for (var j : int = 0; j < BLUR_SIZE; ++j)
      {
        var pixel : SValue = sampleBackBuffer(
          float2(
            add(uv.x, (i - BLUR_SIZE / 2) * pixelSize),
            add(uv.y, (j - BLUR_SIZE / 2) * pixelSize)
          )
        );
 
        var luminance : SValue = dotProduct3(pixel, RGB_TO_LUMINANCE);
 
        color.incrementBy(float4(pixel.rgb, luminance));
      }
    }
 
    color.scaleBy(1 / (BLUR_SIZE * BLUR_SIZE));
 
    return blend(
      outputColor,
      color,
      Blending.ADDITIVE
    );
  }
}

Demo

I modified the Gravity demo to use the greyscale post-processing shader above and see if it works well with the picking. Indeed, the picking renders directly to the backbuffer so I was affraid it might interfer with the post-processing. But there is no problem: the SinglePassPostProcessingEffect uses a priority of -1.0 to make sure the associated RendererState will be executed after anything else.

Click on the picture below to launch the application (press P to enable/disable post-processing):


The modified code looks like this:

// in the Main.keyDownHandler() method
// https://github.com/aerys/minko-demo-gravity/blob/master/src/Main.as#L218
 
// ...
// catch the P key to enable/disable post-processing
case Keyboard.P :
	if (_viewport.postProcessingEffect == null)
		_viewport.postProcessingEffect = new SinglePassPostProcessingEffect(new GreyscalePostProcessingShader());
	else
		_viewport.postProcessingEffect = null;
	break ;
// ...

If you have questions or suggestions, you can post on Aerys Answers. If you want to share post-processing shaders examples, please post in the AS Shader examples thread.

Tagged as: , , , , Leave a comment
Comments (2) Trackbacks (1)
  1. yonathan
    May 1st, 2012 - 03:21

    hey,
    first i have to say you are doing amazing job!!!!!

    i using the minko 2.0b version
    and i trying to reuse the code from “Single Pass HDR Bloom”

    but the method “blend” is undefined.

    i am new to shaders and i don’t know with what to replace the blend method.

    thanks!

    ( REPLY )

Leave a comment

(required)

Minko levels up to 1.2 | Aerys' Blog
» «

Aerys

Twitter: promethe42

Tags

3D 3DS ActionScript 3.0 Adobe Aerys AIR AIR 2.0 AIR 3.0 AIR 3.2 Amazon Android Apple Augmented Reality barcamp demo DirectFlex experiment FLARToolkit Flash Flash-to-iPhone packager Flash 10 Flash 10.1 Flash 11 Flash Builder 4 Flex Flex Builder 3 Game hardware acceleration iPhone jiglibflash Microphone Minko Minko 2 Molehill Orbit physics Quake 2 Quake 3 release RIA shader ShaderLab Stage3D Tontons Flexeurs tutorial

Calendar

December 2011
M T W T F S S
« Oct   Jan »
 1234
567891011
12131415161718
19202122232425
262728293031  

Archives