Set up post processing with a bloom effect, so bright colors and lights glow
threshold number|string optional, default 0.6Brightness where the glow starts, 0 is everything and 1 is only pure white
strength number|string optional, default 1How much glow to add
size number optional, default 6How far the glow spreads in pixels
includeMainCanvas boolean optional, default falseGlow 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)
postProcessBloom(); // in gameInit, after any Render3DPlugin
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
threshold number|string optional, default 0.6Brightness where the glow starts, 0 is everything and 1 is only pure white
strength number|string optional, default 1How much glow to add
size number optional, default 6How far the glow spreads in pixels, which also sets how many samples it takes, so a
number and not a value's name
Split red and blue apart toward the edges, like a cheap lens; put it before what shades the picture
strength number|string optional, default 0.005How far apart at the edge, as a part of the screen
Bend the picture like the bulged glass of an old TV, black past the corners; put it first
strength number|string optional, default 0.1How much it bends
Keep what is a distance from the camera sharp and blur what is nearer or farther, as a camera lens does; needs
render3D.depthTexture on, and blurs 3D only, 2D draws having no depth; put it first
- What is in focus stays sharp at its edges: a blur in front of or behind it leaves out what is in focus
focus number|string optional, default 10Distance from the camera, along its view, that is sharpest, in world units
range number|string optional, default 4How deep the sharp part is; the blur grows over as far again past it
blur number|string optional, default 8Widest blur in pixels, at most 32
render3D.depthTexture = true;
new PostProcessPlugin(postProcessEffects(postProcessDepthOfField(10, 4, 8)));
Join effects into one post process shader, in the order given, for PostProcessPlugin or setShaderCode
- Each effect is a piece of shader code on c, the pixel's color, and uv, where it is on the screen from 0 to 1;
your own code is a piece too, a line of GLSL or many, dropped in where you put it
- Put the ones that bend the picture or sample it first: postProcessCurve, postProcessChromatic, postProcessGlow
…effects stringThe pieces, from the effect functions or your own code
- Returns
- Shadertoy style mainImage code
new PostProcessPlugin(postProcessEffects(
postProcessScanlines(.5), postProcessVignette(), 'c.rgb *= vec3(1, .9, .8);'));
Bright parts glow, the bloom as an effect to join with others; postProcessBloom sets up bloom on its own
threshold number|string optional, default 0.6Brightness where the glow starts, 0 is everything and 1 is only pure white
strength number|string optional, default 1How much glow to add
size number optional, default 6How far the glow spreads in pixels, which also sets how many samples it takes, so a
number and not a value's name
Static noise over the picture, changing every frame
strength number|string optional, default 0.1How bright the static is
size number|string optional, default 2Size of a speck in pixels
Draw lines where the 3D depth jumps, around objects and along their creases; needs render3D.depthTexture on
color Color optionalThe lines' color, its alpha how strong they are
thickness number|string optional, default 1How wide the lines are in pixels
threshold number|string optional, default 0.02How big a jump makes a line, as a part of the distance, lower draws more
Scan lines across the screen, like an old TV
strength number|string optional, default 0.5How dark the lines are, and how bright between them
spacing number|string optional, default 6Pixels from one line to the next
Keep a band across the screen sharp and blur the picture above and below it, as a tilt shift lens does, which
makes a scene look like a small model; it reads only the screen, so it works in 2D and 3D; put it first
focus number|string optional, default 0.5Height of the middle of the sharp band, 0 the bottom of the screen and 1 the top
size number|string optional, default 0.25Height of the sharp band, as a part of the screen
blur number|string optional, default 8Widest blur in pixels, reached half the screen past the band, at most 32
new PostProcessPlugin(postProcessEffects(postProcessTiltShift(.4, .2, 10), postProcessVignette(.5)));
The look of an old TV, as one effect to use alone or join with others: static noise, scan lines, a soft glow and
a vignette, and a bulged screen when curve is set; any setting at 0 leaves that part out
settings Object optionalnoise number|string optionalStatic noise strength
scanlines number|string optionalScan line strength
scanlineSpacing number|string optionalPixels from one scan line to the next
glow number|string optionalSoft glow strength
vignette number|string optionalVignette strength
curve number|string optionalHow much the screen bulges, 0 by default for flat
new PostProcessPlugin(postProcessEffects(postProcessTV({scanlines: .4, curve: .1})));
Darken toward the edges and corners
strength number|string optional, default 1How dark the corners get, 1 is black
falloff number|string optional, default 3How far in it reaches, low darkens most of the screen, high only the corners
Global Post Process plugin object
LittleJS