shapedSurface

Turns a shape prop into a surface your material shades.

shapedSurface(spec: ShapedSurfaceSpec): ShapedSurfaceEffect

Import materials from shaders/std and use materials.shapedSurface.

Spread the result into a definition that declares the center, scale, rotation and shape props (copy them from any shape effect). Your surface function receives a SurfaceFrame and returns the color at this pixel. Flat shapes, SVG shapes and 3D shapes all arrive through the same frame.

Parameters

NameTypeNotes
specShapedSurfaceSpec

Example

...shapedSurface({
  pattern: 'raw',
  surface: (frame, params) => {
    const u = params.uniforms
    const field = surfaceField(frame, params, {scale: u.scale})
    const n = geometricNormal(frame, field, {bevelWidth: u.bevelWidth, bevelShape: u.bevelShape})
    const key = keyLightAt(direction(u.lightAngle), -0.7)
    const rgb = mul(u.color.member('rgb'), lambert(n, key.member('L'), {wrap: 0.3}))
    return guarded(insideShape(field.sdf, field.pxH), vec4(rgb, silhouette(field, u.edgeSoftness)), vec4(0, 0, 0, 0))
  },
}),

Tip. Start from surfaceField, end with guarded around insideShape. Everything between is the look.

See also

  • surfaceField — The first line of a material: the field taps, the signed distance and the pixel size, bound once.
  • geometricNormal — The surface normal of the shape, whichever kind of shape is active.
  • silhouette — The shape's coverage at this pixel: 1 inside, 0 outside, soft across the edge.
  • guarded — Evaluates an expression only where a condition holds, and a cheap fallback everywhere else.

Used by

BrushedMetal, CarbonFiber, Chrome, Crystal, Emboss, Frost, Glass, Goo, Heatmap, Hologram, Holographic, Irradiance, LightEdge, LiquidMetal, Nebula, Neon, Obsidian, Plastic, ThinFilm, Water