PostProcess

LittleJS Post Processing Plugin

  • Supports shadertoy style post processing shaders
  • call new PostProcessPlugin() to setup post processing
  • can be enabled to pass other canvases through a final shader
  • iResolution is the canvas backing store, so it grows with canvasPixelRatio like shadertoy does. Effects that use it only for uv (p/iResolution.xy) are unaffected, but ones that set a feature size from it, like scan lines, get finer as the ratio rises. Divide by getCanvasPixelRatio() to pin them.

Classes

PostProcessPlugin

Members

(static) postProcess :PostProcessPlugin

Global Post Process plugin object

Type:
  • PostProcessPlugin

Methods

(static) postProcessBloom(thresholdopt, strengthopt, sizeopt, includeMainCanvasopt) → {PostProcessPlugin}

Set up post processing with a bloom effect, so bright colors and lights glow

Parameters:
NameTypeAttributesDefaultDescription
thresholdnumber<optional>
0.6

Brightness where the glow starts, 0 is everything and 1 is only pure white

strengthnumber<optional>
1

How much glow to add

sizenumber<optional>
6

How far the glow spreads in pixels

includeMainCanvasboolean<optional>
false

Glow the 2D canvas too, off by default so HUD text stays crisp (a HUD drawn with WebGL in gameRenderPost glows either way, draw it with useWebGL=false)

Returns:
Type: 
PostProcessPlugin
Example
postProcessBloom(); // in gameInit, after any Render3DPlugin

(static) postProcessBloomShader(thresholdopt, strengthopt, sizeopt) → {string}

Shader code for a bloom effect, the bright parts of the image blurred back over it

  • Pass it to PostProcessPlugin, or edit the string to build an effect on top of it
Parameters:
NameTypeAttributesDefaultDescription
thresholdnumber<optional>
0.6

Brightness where the glow starts, 0 is everything and 1 is only pure white

strengthnumber<optional>
1

How much glow to add

sizenumber<optional>
6

How far the glow spreads in pixels, which also sets how many samples it takes

Returns:
Type: 
string