Draw Glass

Renders a Shape as 2D glass — refraction, chromatic dispersion, roughness, bevel, anisotropy, and a Fresnel rim — over an optional background texture.

Category: Render Menu path: Render > Draw Glass

Ports

Port	Type	Direction	Description
shape_in	shape	input	Geometry that defines the glass silhouette. Tessellated and rasterized with MSAA.
background_in	imageRgba16f	input	The texture refracted through the glass. Canonical wiring is AdjustmentSource.out → background_in so the glass refracts the running composite of layers beneath this layer. Optional — unconnected glass is a tinted shape with edge highlights, no refraction.
distortion_in	imageRgba16f	input	Optional displacement map. RG channels are read bipolar around 0.5 and added to the surface normal — wire Noise.out (Curl is great) for heat-shimmer / liquid-glass effects.
out	imageRgba16f	output	The rendered glass, premultiplied, clipped to the shape silhouette.

Parameters

Param	Type	Default	Description
tintColor	color	(0, 0, 0, 0.05)	Glass colour. Default is a subtle 5% darken (reads as "tinted glass"). White at 5% alpha lifts the bg and reads as ambient reflection — pick that if you want a brighter / more reflective look. Raise the alpha for stained / coloured glass.
opacity	scalar	1.0	Overall multiplier on the rendered alpha.
ior	scalar	12.0	Refraction strength, in canvas pixels. The maximum UV displacement at the rim. Higher = more dramatic distortion. Negative values invert the refraction direction.
dispersion	scalar	1.5	Chromatic aberration. Extra pixels of refraction applied to the R channel outward and B channel inward (G stays at the base refraction). 0 = no spectral split.
roughness	scalar	0.0	Surface diffusion. Implemented as a 5-tap blur of the refracted background scaled by roughness. 0 = mirror-sharp, 1 = visibly frosted.
bevel	scalar	0.15	Shapes how the glass curvature falls off across the body interior. Acts as the inverse exponent on the inside-distance: (1 - d) ^ (1/bevel). Low (e.g. 0.15) = sharp falloff, curvature concentrated at the rim, mostly-flat body (default — reads as "Apple glass pill"). 1.0 = linear falloff (classic dome). > 1 = gradual falloff, curvature spreads through the body (blob-like). No upper clamp — extreme values just produce wider/softer body curvature.
anisotropy	vec2	(0, 0)	Per-axis multiplier on the refraction offset. (1, 0) stretches the refracted background horizontally; (0, 1) vertically; negative values compress. Use sparingly — large values inflate the layer's bounds budget.
distortionStrength	scalar	0.0	Scale of the distortion_in perturbation on the surface normal. 0 disables the field even if connected.
edgeIntensity	scalar	0.6	Fresnel rim multiplier. 0 hides the rim entirely.
edgeColor	color	(1, 1, 1, 1)	Colour of the Fresnel rim.
edgeWidth	scalar	3.0	Width of the Fresnel rim. Bigger = thicker rim that fades further inward; smaller = thinner sharp rim concentrated at the silhouette. Internally maps to pow(1 - n.z, 8 / edgeWidth). 1 = thin sharp, 4 = moderate, 8 = linear / very wide.
lightAngle	scalar	90	Direction of the rim light, in degrees. 0 = right, 90 = up (default), 180 = left, 270 = down. The lit side of the rim is brighter; the opposite side fades toward dark.
lightAmount	scalar	0.6	How directional the rim is. 0 = uniform (omnidirectional rim, the original v1 behaviour); 1 = full half-Lambert (rim opposite the light goes fully dark). 0.6 is a balanced motion-design default.

Expose Channels

When enabled (E button on node header), adds input ports that override params via edge connections:

Port	Type	Overrides
ior_in	scalar	ior
dispersion_in	scalar	dispersion
roughness_in	scalar	roughness
bevel_in	scalar	bevel
edgeIntensity_in	scalar	edgeIntensity
anisotropy_in	vec2	anisotropy
distortionStrength_in	scalar	distortionStrength
lightAngle_in	scalar	lightAngle
lightAmount_in	scalar	lightAmount

How It Works

The shape is tessellated by lyon and drawn as MSAA triangles — the silhouette is anti-aliased the same way as Draw Shape. Inside the triangles, the fragment shader reconstructs a surface normal from a quarter-resolution interior-thickness SDF rasterized from the same shape (rayon-parallelized, cached via NodeCache). bevel shapes how n.xy falls off across the body interior via pow(1 - d, 1/bevel), then n.z is recovered on the unit hemisphere. For each pixel:

• Distortion field is added to the normal direction (if connected).
• Anisotropy is a per-axis multiplier on the refraction offset.
• Refracted UV = current UV + normal × ior, scaled to UV space.
• Chromatic dispersion samples the background at three slightly different offsets (R outward, G base, B inward) along the refraction direction.
• Roughness mixes in a 5-tap blur of the refracted neighbourhood.
• Tint mixes the glass colour over the refracted background.
• Fresnel rim = pow(1 - n.z, edgeWidth), scaled by edgeIntensity and edgeColor, added on top.

The output is premultiplied; rim coverage is composited "over" the body coverage so rim alpha appears even where the body is fully transparent.

Usage Examples

Basic: Apple-style glass pill over a comp

1. Layer 1: an ImageSource (or a busy colour gradient) → Output. This is the content the glass will refract.
2. Layer 2 (above layer 1): a Rectangle or Circle → Transform2D → Draw Glass → Output.
3. On layer 2, drop in an AdjustmentSource and wire AdjustmentSource.out → DrawGlass.background_in.
4. Layer 2 will show the A badge (it's now an adjustment layer). Move it around — the glass refracts whatever falls underneath it. Defaults give a clean clear-glass pill with a faint chromatic fringe.

Frosted card

Same setup, but raise roughness to ~0.35–0.5. Lift tintColor alpha to ~0.2 with a subtle warm or cool tint. Lower bevel to ~0.08 for a flatter card. edgeIntensity 0.3, edgeWidth 4.

Neon-rimmed button

Pull tintColor alpha up to ~0.4 with a saturated colour, bevel ~1.0 (broad dome curvature), ior 6, dispersion 0. edgeIntensity 1.5, edgeColor set to a bright neon, edgeWidth 5 (thick rim). Animate edgeIntensity to make the rim pulse.

Heat shimmer / liquid glass

Drop a Noise node — Curl flavour, scale ~120, low evolution rate animated over time (wire Time.normalized → Noise.evolution_in for a continuous loop, or just keyframe evolution). Wire Noise.out → DrawGlass.distortion_in and set distortionStrength to ~0.4. The refraction wobbles smoothly across the glass body. Combine with high ior for liquid; combine with very low ior and high distortionStrength for atmospheric heat haze.

Tips

• Wire the background. With background_in empty, glass is just a tinted shape with a Fresnel rim — no refraction. The "AdjustmentSource → background_in" wiring is the canonical Apple-glass recipe and triggers the engine's adjustment-layer plumbing automatically.
• Bevel is the single biggest visual knob. ~0.05–0.2 reads as "card" / "slab" (sharp rim, flat body — default territory); ~0.5–1.5 reads as "pill" / "dome" (curvature spread across the body). Animating bevel from 0.05 → 1.5 over a few frames is a cheap, satisfying reveal.
• Anisotropy expands the layer's bounds. With (2, 0) the refraction reach is roughly tripled along X; the engine inflates overscan accordingly (clamped at 64 px per axis to keep memory in check). If you need more, prefer raising ior instead.
• Performance. SDF rasterization runs on the CPU and is amortized via NodeCache — it only runs when the shape changes. Param-only edits (e.g. animating ior, bevel) are pure GPU passes and very cheap.
• Mode switching. Glass output is clipped to the shape silhouette by tessellation, so you can stack DrawGlass over DrawShape of the same shape to add a glass treatment on top of a solid fill.
• Multi-contour glyphs. Paths sharing a glyph_index attribute (from TextToShape) tessellate as a single lyon path — letter counters punch through correctly with the NonZero fill rule.

Related Nodes

• Draw Shape — opaque sibling. Same tessellation, no refraction.
• Adjustment Source — the canonical input for background_in. Provides the running composite of layers below.
• Layer Source — explicit cross-layer reference. Use when you want to refract a specific layer rather than "everything beneath".
• Distance Field — the same SDF math the glass uses internally, exposed as a field source for other nodes.
• UV Remap — shares the displacement convention (RG bipolar around 0.5) that distortion_in uses.