Water

Translucent water — a refractive, light-absorbing body that deepens to its color with thickness, wrapped in a wind-driven wave surface that reflects a procedural sky, with Fresnel-bright grazing edges and foam breaking on the crests and shoreline

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 water shape

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

  • scale

    Scale of the water shape (1 = default size)

    Type
    number
    Default
    1

  • rotation

    Rotation of the water shape in degrees

    Type
    number
    Default
    0

  • waterColor

    The color the water saturates toward with depth

    Type
    string
    Default
    #00bfeb

  • clarity

    How much of the reflected sky transmits through the body

    Type
    number
    Default
    0.4

  • depth

    How quickly the water darkens and saturates toward its color with thickness

    Type
    number
    Default
    5

  • shallows

    Brightness of the thin shallow water at the edges — high fades the rim to light translucent water, low keeps the edges close to the deep water color

    Type
    number
    Default
    0.5

  • caustics

    Intensity of the light caustics bubbling up through the body — bright veins of focused light churning inside the water

    Type
    number
    Default
    0.15

  • causticScale

    Size of the caustic veins — higher = finer, busier light patterns inside the body

    Type
    number
    Default
    6

  • choppiness

    Height of the wind-driven waves — the depth of the folds that bend the reflection

    Type
    number
    Default
    0.8

  • waveScale

    Scale of the wave fronts — higher = smaller, busier ripples

    Type
    number
    Default
    3.5

  • swirl

    Swirl of the flow — domain-warps the wave fronts into curling eddies

    Type
    number
    Default
    0.6

  • speed

    Speed of the rolling waves. 0 pauses the surface.

    Type
    number
    Default
    0.5

  • reflection

    Strength of the reflected sky across the surface

    Type
    number
    Default
    2

  • envRotation

    Rotates the reflected sky — spins where the bright sky and sun fall

    Type
    number
    Default
    0

  • sharpness

    Tightness of the sun glint and reflected sun

    Type
    number
    Default
    0.1

  • lightAngle

    Direction of the sun, in degrees — drives the glint and where the sun reflects

    Type
    number
    Default
    30

  • foam

    White foam breaking on the wave crests and along the shoreline edge

    Type
    number
    Default
    0.3

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