Light

Words for drawing light: glows, rays, beams, flares and halos, plus the frames they are drawn in. A frame is the coordinate system a light evaluates in. radialFrame gives each pixel its distance and angle from a center; beamFrame gives its distance along and across a beam. Parts such as glowPoint, rayLobes and featherMask shape a light over a frame and return a field, a 0–1 number per pixel. withFrame evaluates a part in a frame, modulate multiplies parts (a mask over a pattern), and additive sums finished lights.

A light field becomes color at the end of the recipe. coverageMix and coverageOver color a field over a background as a finished paint:. heatRamp turns a heat field into overexposed color, and screenGlow shines it onto the layer inside as an effect:. Emitted light drawn over transparency closes with emissiveAlpha from compose.

import {light} from 'shaders/std'

Reach for it when

Example

import {defineShader, p, light, compose, math, transformColor, transformPosition} from 'shaders/std'

const {radialFrame, withFrame, modulate, glowPoint, softRayLobes, featherMask} = light

// A sun: soft rays spinning around a draggable center, feathered at a radius, drawn as emitted light.
export const Sun = defineShader({
  name: 'Sun',
  animatedTime: {speed: 'speed'},
  props: {
    center: {default: {x: 0.5, y: 0.5}, transform: transformPosition},
    color: {default: '#ffd27a', transform: transformColor},
    radius: {default: 0.5},
    rays: {default: 12},
    softness: {default: 0.6},
    speed: {default: 1},
  },
  paint: (params) => {
    const coverage = withFrame(
      radialFrame(p('center')),
      modulate(softRayLobes({count: p('rays'), softness: p('softness'), spin: 0.2}), glowPoint({sharpness: 6}), featherMask({radius: p('radius'), feather: 0.4})),
      'sun',
    )(params)
    const rgb = math.mul(params.uniforms.color.member('rgb'), coverage)
    return compose.emissiveAlpha(rgb)
  },
})

Types

Words

• glowAtA soft round glow at a position on the canvas.
• glowSpotA soft oval glow over an offset you have already scaled, the core of a bloom or a glare.
• emitterFalloffHow light spilling from an emitter dims with distance, with a long realistic tail.
• radialFrameThe frame for a burst, halo or sweep around a center prop.
• seamlessRadialFrameThe frame noiseRays needs: a radial frame around a center prop with no visible seam.
• beamFrameThe frame of a beam that starts at an anchor prop and points at the canvas center.
• withFrameEvaluate a light part in a frame.
• modulateMultiply light parts drawn in the same frame, such as a mask over a pattern.
• glowPointA soft glow at the center of a radial frame with no hard edge.
• featherMaskA round mask that is solid inside a radius and fades out at its edge.
• rayLobesSoft rays fanning out from the center of a radial frame, turning with the layer's clock.
• softRayLobesrayLobes with a softness slider instead of a sharpness.
• raySpikesThin star spikes with dark gaps between them, like light through a camera aperture.
• ringBandThree thin colored rings around the center, the rainbow edge of a lens or a halo.
• noiseRaysVolumetric god rays: shafts of light drifting outward from the center, moving on the layer's clock.
• rayBandsBright bands that travel along a coordinate, for aurora curtains or shimmering rays.
• shineA specular highlight on any surface that gives you a normal.
• domeNormalThe surface normals of a flat disc treated as a puffy dome, ready to light with shine.
• additiveAdds lights together, since light from several sources simply sums.
• heatRampThe colors of overexposed light, from a dim fringe through a mid tone to a hot core.
• vignetteMaskDarkens the corners of the canvas.
• screenGlowAn effect that shines emitted light onto the layer inside it, the way light hits film.
• coverageMixBlends from a background color to a light color by a coverage field, as a finished paint.
• coverageOverLays a light color over a background color by a coverage field, like a layer with an opacity mask, as a finished paint.
• slowDriftThe slow breathing and drifting signals that keep a light leak alive.
• beamBloomThe soft pool of light at the start of a beam, with a wider faint shoulder around it.
• beamStreaksTwo bright bands crossing a beam further along it, slowly drifting, like light bouncing inside a film camera.
• streakBandOne soft band across a single coordinate, peaking at center.
• lightBeamThe glow of a beam that can be thicker or softer at one end than the other.
• segmentProjectWhere a pixel falls along a line from a to b, and how far it is from that line.
• flareFrameThe shared frame of a camera lens flare, which every flare* part reads.
• lensGhostOne ghost disc of a lens flare, the faint circles that line up across from the light.
• flareHaloThe rainbow halo ring of a lens flare, drawn across the canvas from the light.
• flareStarburstThe star of thin spikes around the light in a lens flare.
• flareStreakThe horizontal widescreen streak through the light in a lens flare.
• flareGlareThe broad warm-white wash around the light that lifts contrast near it.
• flareCoreThe bright point at the light itself: a hard pinpoint inside a small soft glow.
• flareCompositeCloses a lens flare: turns the summed flare parts into the color to return from paint.
• ditheredAdds a trace of noise to a heat field so long soft ramps do not show bands.
• starGlintA four-point star of light: a round core with a thin ray along each axis, like a glint off glitter or a star in a photograph.