Voxels

Rebuild any shape out of voxels — a flat shape becomes chunky pixel art, a 3D shape a lit voxel model with smooth ambient occlusion, cast shadows, a key light you can orbit or drive, and per-cube color

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 voxel model

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

  • scale

    Scale of the voxel model (1 = default size)

    Type
    number
    Default
    1

  • rotation

    Rotation of the voxel model in degrees

    Type
    number
    Default
    0

  • voxelSize

    Edge length of one voxel relative to the shape field — small for fine detail, large for chunky blocks

    Type
    number
    Default
    0.035

  • voxelShape

    What each cell is built from: hard cubes, rounded cubes (see Bevel) or spheres

    Type
    "cube" | "rounded" | "sphere"
    Default
    cube

  • voxelScale

    Size of each voxel inside its cell — 1 = touching neighbours, lower opens gaps between the blocks

    Type
    number
    Default
    1

  • fill

    How eagerly cells fill in along the surface — negative carves a thinner model, positive puffs it out

    Type
    number
    Default
    0

  • bevel

    Edge rounding of each voxel as a fraction of its size — a hairline chamfer catching light on cubes, the corner radius of rounded cubes

    Type
    number
    Default
    0.08

  • depth

    Thickness given to flat shapes (2D shapes and flat SVGs) so they become a slab of voxels — 3D shapes ignore it

    Type
    number
    Default
    0.12

  • gridSpace

    Model: the grid rotates with the shape like a built voxel model. Screen: the grid is fixed to the canvas and the shape moves through it like a 3D pixelation

    Type
    "shape" | "view"
    Default
    shape

  • colorA

    Base color of the voxels (the first color of the palette mode)

    Type
    string
    Default
    #6ea8ff

  • colorB

    Second palette color — blended in by height, depth, per voxel or on the side faces

    Type
    string
    Default
    #1d2b4f

  • colorMode

    How the two colors are laid over the model: one solid color, a gradient by height or depth, a random pick per voxel, or Color A on top faces and Color B on the sides

    Type
    "solid" | "height" | "depth" | "random" | "faces"
    Default
    height

  • colorVariation

    Per-voxel tonal jitter — the slightly-off shades that make blocks read as individual bricks

    Type
    number
    Default
    0.25

  • colorSpace

    Color space for color interpolation

    Type
    "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
    Default
    oklab

  • lightAngle

    Direction the key light comes from, in degrees around the canvas — shadows fall away from it

    Type
    number
    Default
    225

  • lightElevation

    How high the key light sits above the canvas — low for long raking shadows, high for a flat top-down light

    Type
    number
    Default
    42

  • lightColor

    color of the key light

    Type
    string
    Default
    #fff2df

  • lightIntensity

    Strength of the key light

    Type
    number
    Default
    1.1

  • ambientColor

    Sky color of the ambient light — the fill on faces the key light misses

    Type
    string
    Default
    #9fb4d8

  • ambient

    Strength of the ambient sky/ground fill

    Type
    number
    Default
    0.55

  • shadows

    Darkness of the shadows voxels cast onto each other

    Type
    number
    Default
    0.85

  • shadowSoftness

    Penumbra of the cast shadows — 0 is razor sharp, higher spreads the light into a soft area source whose shadows sharpen at contact

    Type
    number
    Default
    0.35

  • ao

    Ambient occlusion in the creases between voxels — the soft contact darkening that sells the geometry

    Type
    number
    Default
    1

  • glossiness

    How tight the specular highlight is — satin plastic at 0, lacquered at 1

    Type
    number
    Default
    0.35

  • specular

    Strength of the specular highlight and the fresnel rim on grazing faces

    Type
    number
    Default
    0.6

  • seams

    Dark seam lines along every voxel edge — 0 for seamless blocks, higher for a drawn-outline brick look

    Type
    number
    Default
    0.2

  • 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>
  <Voxels />
</Shader>