Particle tips TexturesForAlphaBlendAdditive

From PopcornFX
Jump to navigation Jump to search

For PK-Fx Editor version : any
Main page: Particle tutorials

Popcorn allows you to use a few 'AlphaBlend_Additive' materials for billboard renderer billboard and ribbon renderer ribbon renderers.
These can be very useful in a number of cases, but authoring textures that work well with them can be a little tricky.

What's AlphaBlend_Additive?

These "AlphaBlend_Additive" materials are also commonly called "premultiplied alpha" materials. They allow to draw textures with both regular alpha-blended parts, and purely additive parts.

Basically, the RGB channels contain an emissive color, and the alpha contains an opacity/extinction amount applied to the background. Therefore, a solid gray-128 RGB texture with a fully black alpha will additively blend solid gray on top of the scene, but a fully solid gray-128 RGB texture with a fully white alpha will draw an opaque solid gray-128 square on the scene.

Regular alpha-blended texture
ExportPremulAlpha 03.png

Same texture rendered with alphablend-additive
ExportPremulAlpha 04.png

Texture with premultiplied alpha and somme yellow pure-emissive parts
Here, to emphasize the emissive parts, we're actually rendering 10 particles on top of each other, hence the slightly "volumetric" look
ExportPremulAlpha 05.png

Why do I want to use that?

Two main reasons:

1- Richer material

Inside the same sprite, you can paint both solid smoke and bright sparks. You can make a flipbook of a flame burning with nice additive emission, yet with opaque smoke parts.

2- Batching

If you have an explosion with 10 layers, but all layers use the same material and the same texture atlas, your whole explosion will be drawn in a single drawcall, and better: the particles will be properly sorted, no matter which layer they come from. This gives you proper sorting of small additive bright sparks against the smoke/dust clouds.

How do I export a texture that works properly?

The tricky part is that some texture formats assume that if the alpha is zero, then there's no point in storing the RGB information, because the texels will be transparent anyway.
For this material, it's obviously plain wrong, as the RGB store our emissive, even if alpha is zero.

If you're using photoshop, these formats will work:

  • TGA
  • DDS with any format that stores alpha, incl. DXT3 (BC1) or DXT5 (BC2) (The NVIDIA's photoshop DDS plugin should keep the RGB information)
  • PNG (in our tests, seemed to work, if you paint your RGB and alpha separately, then use layer to transparency)

Other tools might or might not work.

Here are the steps that work for us:

1. in the 'channels' panel, add a new channel named 'Alpha', in addition to the existing RGB channels, this will store the alpha
2. paint whatever alpha you want. black is transparent/no extinction, white is opaque/full extinction.

ExportPremulAlpha 01b.png ExportPremulAlpha 01.png

3. to get regular alpha blended behavior, copy your alpha channel to a regular RGB layer on top of your existing color layer
4. set the alpha layer blend mode to 'Multiply'

ExportPremulAlpha 02b.png ExportPremulAlpha 02.png

5. save as TGA, or export with NVIDIA's DDS plugin.

Gamma space / sRGB

When doing the RGB / Alpha layer multiply in the photoshop layers, You must be careful about gamma space. Does your final render engine have a linear-space lighting pipeline? does it blend in sRGB space? is your texture in sRGB?

ideally, the ideal multiply should be done in linear space:

  1. convert original RGB from sRGB to linear space
  2. convert alpha channel from sRGB to linear space
  3. multiply RGB with alpha
  4. convert result back from linear to sRGB space