Materials

Materials are pre-built render functions that produce specific surface looks. Pass a material instance to brush.addFill(material) or brush.addStroke(material, width) and the renderer paints it.

Preview

The Materials API is evolving. Factories, options, and presets may change between versions. Pin a tag if you need stability.

This page covers all built-in material families. They live in packages/redraw/src/nodes/paints/.

PBR family

Physically-based rendering for cylindrical strokes and filled shapes. Cook-Torrance BRDF, Fresnel, GGX specular. The four variants share the same lights model: define lights once at the family-level shape:

const lights = {
  directional: {
    direction: [1.0, 2.0, 1.5],
    color: [1.0, 1.0, 1.0],
    intensity: 3.0,
  },
  ambient: {
    color: [0.15, 0.15, 0.15],
    intensity: 1.0,
  },
};

Common options across the family:

Option	Type	What it controls
baseColor	[r, g, b]	Surface diffuse color (linear, 0–1).
roughness	f32	0 mirror, 1 fully diffuse.
metalness	f32	0 dielectric, 1 metal.
normalScale	f32	Cylinder normal extrusion intensity.
aoStrength	f32	Curvature-based ambient occlusion.
emissive / emissiveIntensity	[r,g,b] / f32	Self-illumination.
lights	{ directional, ambient }	The lights setup above.
exposure	f32	Tone-mapping exposure.

createPBRMaterial

The base PBR for stroked tubes. Treats the stroke as a 3D cylinder and shades it with Cook-Torrance + Fresnel.

Cylindrical PBR with Fresnel + GGX specularOpen in editor →

Hello script with smooth ceramic PBR materialOpen in editor →

createPBRPillowMaterial

PBR for fills with a configurable inflated dome shape. Adds:

Option	Type	What it controls
height	f32	Dome height above the surface.
curve	"sqrt" | "smoothstep" | "linear" | "quadratic"	Falloff shape from edge to peak.
maxDistance	f32	Distance over which the dome rises.

createPBRBevelMaterial

PBR with a chamfered edge for filled shapes. Adds:

Option	Type	What it controls
height	f32	Bevel height. Negative values deboss.
bevelWidth	f32	Width of the bevel band before the flat top.

createPBRInnerFeatherMaterial

PBR with a soft feathered interior (sigma controls inward blur). Useful for soft buttons / debossed surfaces.

Option	Type	What it controls
height	f32	Surface height.
sigma	f32	Inward feather radius.

Stylized

createSoftVectorMaterial

iOS-style soft vector with inner shadow + specular highlight. No PBR machinery, just inner-edge falloff and a directional accent.

Option	Type	What it controls
baseColor	[r, g, b] or [r, g, b, a]	Body color.
innerShadowStrength	f32	Edge darkness 0–1.
innerShadowRadius	f32	Edge falloff distance.
innerShadowColor	[r, g, b]	Tint of the inner shadow.
highlightStrength	f32	Specular brightness 0–1.
highlightPosition	[x, y]	Highlight direction.
highlightRadius	f32	Highlight spread.
gradientDirection	[x, y]	Subtle body gradient direction.
gradientStrength	f32	Body gradient depth.
edgeSoftness	f32	AA-edge anti-alias band.

createNeumorphicMaterial

Multiple stacked inner shadows for the neumorphic look. Up to 4 shadows each with their own offset, blur, and color (MAX_NEUMORPHIC_SHADOWS = 4).

Option	Type	What it controls
baseColor	[r, g, b]	Body color.
innerShadows	NeumorphicInnerShadow[] (≤ 4)	Each: { offset, blur, color }.
edgeSoftness	f32	AA-edge band.

Climate-control dial: stacked inner shadows + gradient ring + soft highlightsOpen in editor →

createGlassMaterial

Refractive glass: warps a sampled backdrop using IOR and the reconstructed SDF gradient. Pseudo-3D thickness from a height field.

Option	Type	What it controls
sampleScale	f32	Backdrop tile-mode scaling.
offset	[x, y]	Backdrop offset for animated parallax.
tileMode	TileMode	How the backdrop wraps.
thickness	f32	Pseudo-thickness for refraction.
baseHeight	f32	Surface height.
ior	f32	Index of refraction (1.5 ≈ glass).
baseColor	[r, g, b, a]	Tint over the refracted backdrop.
colorMix	f32	Tint blend amount.
distortionScale	f32	Refraction strength.
edgeSoftness	f32	AA-edge band.
strokeThicknessScale	f32	Stroke-mode thickness multiplier.

createHalftoneMaterial

Halftone dot patterns modulated by SDF lighting. Pop-art / Lichtenstein.

Option	Type	What it controls
dotColor	[r, g, b]	Dot color.
backgroundColor	[r, g, b]	Background color.
dotSpacing	f32	Distance between dot centers.
maxDotRadius	f32	Largest dot.
minDotRadius	f32	Smallest dot.
lightDirection	[x, y]	Light source for size modulation.
gridAngle	f32	Rotation of the dot grid.
style	"dots" | "lines" | "diamonds"	Pattern shape.
invert	bool	Swap dot/background.
dotSoftness	f32	Per-dot edge softness.

GBA-style D-pad with pop art halftone dots, Lichtenstein inspiredOpen in editor →

Lighting

Lightweight 2D shading without the full PBR machinery.

Lit

Single-light Blinn-Phong on shape edges. Returns a render function; factory takes a config object:

import { Lit } from "redraw";

const material = Lit({
  color: [0.8, 0.4, 0.2],
  light: { dir: [1, -1, 1], color: [1, 1, 1], intensity: 1 },
  ambient: 0.2,
  diffuse: 0.7,
  specular: 0.5,
  shininess: 32,
});

LitDual

Two lights (key + fill) with independent direction, color, and intensity. Same shape config as Lit, with both light1 and light2.

Circle with two directional lights, white and orangeOpen in editor →

createStrokeEmbossMaterial

Edge-detect emboss restricted to the stroke region.

Option	Type	What it controls
baseColor	[r, g, b]	Surface color before emboss.
strokeWidth	f32	Width of the emboss band.
lightAngle	f32	Light direction (radians).
strength	f32	Emboss intensity.

createFillEmbossMaterial

Emboss confined to the inner edge of a filled shape (visible up to maxDistance from the boundary).

Option	Type	What it controls
baseColor	[r, g, b]	Surface color.
maxDistance	f32	How far inward the emboss extends.
lightAngle	f32	Light direction (radians).
strength	f32	Emboss intensity.

Picking a material

You want	Reach for
3D-looking strokes (tubes, ribbons, calligraphy)	createPBRMaterial
Filled shapes with depth (cushions, knobs)	createPBRPillowMaterial
Sharp 3D bevels	createPBRBevelMaterial
iOS-style soft buttons	createSoftVectorMaterial
Neumorphism (soft UI)	createNeumorphicMaterial
Frosted glass / refraction	createGlassMaterial
Pop art / print look	createHalftoneMaterial
Cheap 2D shading	Lit / LitDual
Edge emboss (engraved look)	createStrokeEmbossMaterial / …Fill…