Irradiance

Photorealistic light spilling around the edge of any 2D, SVG, or 3D shape — any number of movable colored point lights strike the silhouette and the lit edges irradiate their surroundings, gathered in a compute pass with real cast shadows, mixing where they meet and burning to white at the rim

Props

  • origin

    Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.

    Type
    string
    Default
    center

  • center

    Center position of the shape. Accepts CSS units, see Sizing and units.

    Type
    {x: number | string, y: number | string}
    Default
    {"x":0.5,"y":0.5}

  • scale

    Scale of the shape (1 = default size)

    Type
    number
    Default
    1

  • rotation

    Rotation of the shape in degrees

    Type
    number
    Default
    0

  • lights

    The point lights striking the shape — each with its own position, color and brightness

    Type
    Array<{position: {x: number, y: number}, color: string, intensity: number}>
    Default
    [{"position":{"x":0.3,"y":0.3},"color":"#ffb347","intensity":3},{"position":{"x":0.72,"y":0.7},"color":"#7a5cff","intensity":2}]

  • lightHeight

    Height of the lights above the shape plane, relative to the shape — low lights graze the body, high lights flood it evenly

    Type
    number
    Default
    0.5

  • lightRange

    Reach of each light — the distance at which it has fallen to half strength, relative to the shape

    Type
    number
    Default
    1.2

  • reach

    How far from the shape the spilled light is gathered, relative to the shape — the glow fades out toward this distance

    Type
    number
    Default
    3

  • core

    The lit edge seen directly — the white-hot line along the rim where the lights strike

    Type
    number
    Default
    1

  • wrap

    How far light wraps around edges that face away from it — 0 leaves the far side dark

    Type
    number
    Default
    0.1

  • shadows

    Cast shadows — the body blocks each light from edges it stands in front of (keeps holes and concave pockets dark)

    Type
    boolean
    Default
    true

  • shadowSoftness

    Penumbra width of the cast shadows — 0 is razor sharp

    Type
    number
    Default
    0.15

  • bodyColor

    Color of the shape itself — black for a pure occluder, lighter to see the lights land on its form

    Type
    string
    Default
    #000000

  • bodyLight

    How much the lights illuminate the body — the bevel of a flat shape or the form of a 3D one

    Type
    number
    Default
    0.6

  • bevelWidth

    Width of the rounded edge a flat shape catches the light on, relative to the shape

    Type
    number
    Default
    0.01

  • edgeSoftness

    Softness of the shape boundary edge

    Type
    number
    Default
    0.05

  • shape

    Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.

    Type
    ShapeConfig
    Default
    sphere3D

  • shapeSdfUrl

    URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.

    Type
    string
    Default
    ""

Usage

<Shader>
  <Irradiance />
</Shader>