feat(shaders): add FlutedGlass

2 files 92 lines added, 0 removed0 of 2 files reviewed

packages/shaders/src/components/fluted-glass/fluted-glass.tsx
packages/shaders/src/components/index.ts

packages/shaders/src/components/fluted-glass/fluted-glass.tsxNew fileReviewed

Base line	Head line	Change	Code

	1	added	'use client';
	2	added
	3	added	// Public face of the fluted glass: owns the props, their JSDoc, and their
	4	added	// defaults, then delegates to FlutedGlassShader (./shader.tsx). FlutedGlass
	5	added	// is an Effect: stack it after a Source inside a <ShaderScene> and it shows
	6	added	// that Source through a pane of fluted glass, each flute bending the image
	7	added	// beneath it into a squeezed copy and catching the light along one wall.
	8	added	import type { AnimatableProp } from '../../react/hooks/animatable-signal/animatable-signal.js';
@@ -0,0 +9,31 @@
	9	added	import { useStaticSceneHint } from '../../react/hooks/use-static-hint/use-static-hint.js';
	10	added	import { FlutedGlassShader } from './shader.js';
	11	added
	12	added	/** The names for three points on the `crossSection` dial. */
	13	added	export type CrossSectionName = 'prism' \| 'round' \| 'flat';
	14	added
	15	added	// Where each name sits on the dial. A name is only a point on the dial, so
	16	added	// it rides the same uniform as a number and animates like one.
	17	added	const CROSS_SECTION_DIAL: Record<CrossSectionName, number> = {
	18	added	prism: 0,
	19	added	round: 0.5,
	20	added	flat: 1,
	21	added	};
	22	added
	23	added	export interface FlutedGlassProps {
	24	added	/**
	25	added	* The width of one flute, in CSS pixels. Defaults to 40. Accepts a static
	26	added	* value or an animation signal.
	27	added	*/
	28	added	fluteWidth?: AnimatableProp<number>;
	29	added	/**
	30	added	* The direction the flutes run, in degrees on screen: 0 runs them left to
	31	added	* right and 90 runs them bottom to top. These are the degrees
	32	added	* LinearGradient's `angle` uses, though a gradient's bands run across its
	33	added	* angle and the flutes run along theirs. Defaults to 90, vertical flutes.
	34	added	* Accepts a static value or an animation signal.
	35	added	*/
	36	added	angle?: AnimatableProp<number>;
	37	added	/**
	38	added	* How far each flute bends the image beneath it, in half flute widths at
	39	added	* the steepest part of the glass. 0 leaves the image unchanged. At 1, each

	40	added	* flute shows a squeezed copy of twice its width of image. Defaults to 1.
	41	added	* Accepts a static value or an animation signal.
	42	added	*/
	43	added	refraction?: AnimatableProp<number>;
	44	added	/**
	45	added	* The shape of each flute seen from its end, from 0 to 1. `'prism'` (0) is
	46	added	* two flat faces meeting at a ridge, `'round'` (0.5) is a lens, and
	47	added	* `'flat'` (1) is a flat top with steep walls. Numbers between give the
	48	added	* shapes between, so a signal can morph one shape into another. Defaults
@@ -0,0 +49,16 @@
	49	added	* to `'round'`. Accepts a static value or an animation signal.
	50	added	*/
	51	added	crossSection?: AnimatableProp<number> \| CrossSectionName;
	52	added	/**
	53	added	* Where the light comes from, in degrees counterclockwise on screen, the
	54	added	* way `angle` turns: 0 from the right, 90 from above, 180 from the left,
	55	added	* and 270 from below.
	56	added	* The light stays put on screen while `angle` turns the glass beneath it,
	57	added	* and the flute wall that faces it catches the highlight. A light that
	58	added	* runs along the flutes catches neither wall. Defaults to 135, the upper
	59	added	* left. Accepts a static value or an animation signal.
	60	added	*/
	61	added	lightAngle?: AnimatableProp<number>;
	62	added	/**
	63	added	* How bright the highlight along each lit wall is, from 0 to 1, where 1
	64	added	* adds the full `highlightColor` at the brightest point. 0 turns it off.

	65	added	* Defaults to 0.45. Accepts a static value or an animation signal.
	66	added	*/
	67	added	highlight?: AnimatableProp<number>;
	68	added	/**
	69	added	* The highlight's color: hex, `oklch()`, or `oklab()`. Defaults to white,
	70	added	* `'oklch(1 0 0)'`.
	71	added	*/
	72	added	highlightColor?: string;
	73	added	/**
	74	added	* How dark the glass gets at each groove, from 0 to 1, where 1 is black
	75	added	* right on the groove. The shadow falls where the glass turns steep, so a
	76	added	* `'flat'` cross-section darkens only along its walls. 0 turns it off.
	77	added	* Defaults to 0.2. Accepts a static value or an animation signal.
	78	added	*/
@@ -0,0 +79,42 @@
	79	added	shadow?: AnimatableProp<number>;
	80	added	}
	81	added
	82	added	/**
	83	added	* Shows the image beneath it through repeating flutes of glass, lit from one
	84	added	* side with a shadow at each groove. Mount it inside a `<ShaderScene>` after
	85	added	* the Sources it should bend. It bends only what Sources drew, never the
	86	added	* output of an Effect such as Grain, so mount such Effects after it, where
	87	added	* the order you write matches what you see. Mode 1 only, because it needs
	88	added	* the scene's output stage; Mode 2 users get the flute math as the
	89	added	* `fluteSurface` primitive.
	90	added	*/
	91	added	export function FlutedGlass({
	92	added	fluteWidth = 40,
	93	added	angle = 90,
	94	added	refraction = 1,
	95	added	crossSection = 'round',
	96	added	lightAngle = 135,
	97	added	highlight = 0.45,
	98	added	highlightColor = 'oklch(1 0 0)',
	99	added	shadow = 0.2,
	100	added	}: FlutedGlassProps) {
	101	added	// The idle vote. Still glass draws nothing that changes over time, and
	102	added	// every dial repaints through its uniform when it moves, so the glass
	103	added	// votes idle and a scene of still Sources under the glass parks.
	104	added	useStaticSceneHint(true);
	105	added
	106	added	return (
	107	added	<FlutedGlassShader
	108	added	angle={angle}
	109	added	crossSection={
	110	added	typeof crossSection === 'string' ? CROSS_SECTION_DIAL[crossSection] : crossSection
	111	added	}
	112	added	fluteWidth={fluteWidth}
	113	added	highlight={highlight}
	114	added	highlightColor={highlightColor}
	115	added	lightAngle={lightAngle}
	116	added	refraction={refraction}
	117	added	shadow={shadow}
	118	added	/>
	119	added	);
	120	added	}

packages/shaders/src/components/index.tsModifiedReviewed

Base line	Head line	Change	Code

1	1		// The Tier 1 components and the prop shapes they share. Each component folder
2	2		// holds a wrapper (props, uniforms, mesh lifecycle) and a shader.tsx (the TSL).
3	3		// Only the wrappers and their public types leave this barrel; the *Shader
4	4		// functions and DEFAULT_* constants are implementation detail.
5	5		export { Aurora } from './aurora/aurora.js';
6	6		export type { AuroraProps } from './aurora/aurora.js';
7	7
8	8		export { Blobs } from './blobs/blobs.js';
9	9		export type { BlobsProps } from './blobs/blobs.js';
10	10
11	11		export { ConicGradient } from './conic-gradient/conic-gradient.js';
12	12		export type { ConicGradientProps } from './conic-gradient/conic-gradient.js';
13	13
14	14		export { CursorRipple } from './cursor-ripple/cursor-ripple.js';
15	15		export type { CursorRippleProps } from './cursor-ripple/cursor-ripple.js';
16	16		// The shader half is public so a caller can mount it over a wave field it
17	17		// drives itself. The docs' dev probe route does that with a hand-seeded
18	18		// field, for a deterministic capture.
19	19		export { CursorRippleShader } from './cursor-ripple/shader.js';
20	20		export type { CursorRippleShaderProps } from './cursor-ripple/shader.js';
21	21
22	22		export { CursorSmudge } from './cursor-smudge/cursor-smudge.js';
23	23		export type { CursorSmudgeProps } from './cursor-smudge/cursor-smudge.js';
24	24
25	25		export { CursorSpotlight } from './cursor-spotlight/cursor-spotlight.js';
26	26		export type { CursorSpotlightProps } from './cursor-spotlight/cursor-spotlight.js';
27	27
28	28		export { Dissolve } from './dissolve/dissolve.js';
29	29		export type { DissolveProps } from './dissolve/dissolve.js';
30	30
31	31		export { Dither } from './dither/dither.js';
32	32		export type { DitherProps } from './dither/dither.js';
33	33
@@ -34,5 +34,8 @@ export type { DitherProps } from './dither/dither.js';
34	34		export { DotField } from './dot-field/dot-field.js';
35	35		export type { DotFieldProps, DotShape, SvgMarkup } from './dot-field/dot-field.js';
36	36
	37	added	export { FlutedGlass } from './fluted-glass/fluted-glass.js';
	38	added	export type { CrossSectionName, FlutedGlassProps } from './fluted-glass/fluted-glass.js';
	39	added
37	40		export { FractalNoise } from './fractal-noise/fractal-noise.js';
38	41		export type { FractalNoiseProps } from './fractal-noise/fractal-noise.js';

39	42		export type { FractalNoiseStyle } from './fractal-noise/shader.js';
40	43		export { STYLE_DIAL_DEFAULTS } from './fractal-noise/style-dial-defaults.js';
41	44
42	45		export { GodRays } from './god-rays/god-rays.js';
43	46		export type { GodRaysProps } from './god-rays/god-rays.js';
44	47
45	48		export { Grain } from './grain/grain.js';
46	49		export type { GrainProps } from './grain/grain.js';
47	50		export type { GrainBlend } from './grain/shader.js';
48	51
49	52		export { LedWall } from './led-wall/led-wall.js';
50	53		export type { LedWallProps } from './led-wall/led-wall.js';
51	54
52	55		export { LinearGradient } from './linear-gradient/linear-gradient.js';
53	56		export type { LinearGradientProps } from './linear-gradient/linear-gradient.js';
54	57
55	58		export { LiquidGradient } from './liquid-gradient/liquid-gradient.js';
56	59		export type { LiquidGradientProps } from './liquid-gradient/liquid-gradient.js';
57	60
58	61		export { MeshGradient } from './mesh-gradient/mesh-gradient.js';
59	62		export type { MeshGradientProps } from './mesh-gradient/mesh-gradient.js';
60	63
61	64		export { RadialGradient } from './radial-gradient/radial-gradient.js';
62	65		export type { RadialGradientProps } from './radial-gradient/radial-gradient.js';
63	66
64	67		export { RadialWipe } from './radial-wipe/radial-wipe.js';
65	68		export type { RadialWipeProps } from './radial-wipe/radial-wipe.js';
66	69
67	70		export { SimplexNoise } from './simplex-noise/simplex-noise.js';
68	71		export type { SimplexNoiseProps } from './simplex-noise/simplex-noise.js';
69	72
70	73		export { Vignette } from './vignette/vignette.js';
71	74		export type { VignetteProps } from './vignette/vignette.js';
72	75
73	76		export { Voronoi } from './voronoi/voronoi.js';
74	77		export type { VoronoiProps } from './voronoi/voronoi.js';
75	78
76	79		export { WaveLines } from './wave-lines/wave-lines.js';
77	80		export type { WaveLine, WaveLinesProps } from './wave-lines/wave-lines.js';
78	81
79	82		export type { ColorStop, Palette } from './shared/color.js';

6 files 95 lines added, 0 removed0 of 6 files reviewed

apps/docs/src/app/components/demo-registry.tsx
apps/docs/src/content/components.ts
apps/docs/src/content/taxonomy.ts
apps/docs/src/app/components/fluted-glass/scene.tsx
apps/docs/src/app/components/fluted-glass/params.ts
apps/docs/src/app/components/fluted-glass/demo.tsx

apps/docs/src/app/components/demo-registry.tsxModifiedReviewed

Base line	Head line	Change	Code

1	1		/**
2	2		* Maps a component slug to the pieces the shared components/[slug] template
3	3		* cannot derive from the catalog (content/components.ts): the client demo island and
4	4		* the Usage content. The template renders usageNotes above the snippet, so
5	5		* notes read as guidance introducing the code. Paragraphs that merely
6	6		* restated the catalog description were dropped when pages converted — the
7	7		* template's header already shows it.
8	8		*/
9	9		import type { ComponentType, ReactNode } from 'react';
10	10
11	11		import { AuroraIsland } from './aurora/demo';
12	12		import { BlobsIsland } from './blobs/demo';
13	13		import { ConicGradientIsland } from './conic-gradient/demo';
14	14		import { CursorRippleIsland } from './cursor-ripple/demo';
15	15		import { CursorSmudgeIsland } from './cursor-smudge/demo';
16	16		import { CursorSpotlightIsland } from './cursor-spotlight/demo';
17	17		import { DissolveIsland } from './dissolve/demo';
18	18		import { DitherIsland } from './dither/demo';
19	19		import { DotFieldIsland } from './dot-field/demo';
	20	added	import { FlutedGlassIsland } from './fluted-glass/demo';
20	21		import { FractalNoiseIsland } from './fractal-noise/demo';
21	22		import { GodRaysIsland } from './god-rays/demo';
22	23		import { GrainIsland } from './grain/demo';
23	24		import { LedWallIsland } from './led-wall/demo';
24	25		import { LinearGradientIsland } from './linear-gradient/demo';
25	26		import { LiquidGradientIsland } from './liquid-gradient/demo';
26	27		import { MeshGradientIsland } from './mesh-gradient/demo';
27	28		import { RadialGradientIsland } from './radial-gradient/demo';
28	29		import { RadialWipeIsland } from './radial-wipe/demo';
29	30		import { SimplexNoiseIsland } from './simplex-noise/demo';
30	31		import { VignetteIsland } from './vignette/demo';
31	32		import { VoronoiIsland } from './voronoi/demo';
32	33		import { WaveLinesIsland } from './wave-lines/demo';
33	34
34	35		export interface ComponentPageEntry {
35	36		/** Client island rendering the control store, shader demo, and control panel. */
36	37		Island: ComponentType;
37	38		/**
38	39		* Code snippet for the Usage section, rendered through the shiki CodeBlock.
39	40		* The import line shown above it is derived from this snippet's JSX tags
40	41		* (lib/usage-import), so don't write import statements here — every
41	42		* component tag used in the snippet lands in the import automatically.
42	43		*/
43	44		usageSnippet: string;
44	45		/**
45	46		* Layers the demo scene renders under the component, as JSX, for pages
46	47		* whose scene composes a background. Copy React (page-actions/) emits them
47	48		* ahead of the component so the copied snippet reproduces the demo. Absent
48	49		* when the component fills the scene by itself.
49	50		*/
50	51		copySiblings?: readonly string[];
51	52		/**
52	53		* Optional prose above the snippet. Single-paragraph notes are bare
53	54		* content; multi-paragraph notes bring their own <p> tags.
54	55		*/
55	56		usageNotes?: ReactNode;
56	57		}
57	58
58	59		export const COMPONENT_PAGES: Record<string, ComponentPageEntry> = {
59	60		aurora: {
60	61		Island: AuroraIsland,
61	62		usageSnippet: `<ShaderScene>
62	63		<Aurora intensity={1} stops={[...]} />
63	64		</ShaderScene>`,
64	65		usageNotes: (
65	66		<>
66	67		The aurora fills its scene; compose with the container. For a curtain band hanging in a wide
67	68		dark sky, place a short ShaderScene near the top of a taller dark section.{' '}
68	69		<code>coverage</code> reveals the curtain from the bottom up — 1 covers the canvas, 0 hides
69	70		it.
70	71		</>
71	72		),
72	73		},
73	74		blobs: {
74	75		Island: BlobsIsland,
75	76		copySiblings: [
76	77		"<LinearGradient angle={90} speed={0} stops={[{ color: 'oklch(0.18 0.02 265)' }, { color: 'oklch(0.26 0.04 300)' }]} />",
77	78		],
78	79		usageSnippet: `<ShaderScene>
79	80		<LinearGradient />
80	81		<Blobs />
81	82		</ShaderScene>`,
82	83		usageNotes: (
83	84		<>
84	85		The space between blobs is transparent — stack Blobs over a gradient or any other layer and
85	86		it shows through.
86	87		</>
87	88		),
88	89		},
89	90		'conic-gradient': {
90	91		Island: ConicGradientIsland,
91	92		usageSnippet: `<ShaderScene>
92	93		<ConicGradient />
93	94		</ShaderScene>`,
94	95		},
95	96		'cursor-ripple': {
96	97		Island: CursorRippleIsland,
97	98		copySiblings: ['<MeshGradient />'],
98	99		usageSnippet: `<ShaderScene>
99	100		<MeshGradient />
100	101		<CursorRipple />
101	102		</ShaderScene>`,
102	103		usageNotes: (
103	104		<>
104	105		Cursor Ripple is a cursor effect: stack it after any components inside a{' '}
105	106		<code><ShaderScene></code> and dragging the pointer across the canvas leaves a wake
106	107		that spreads and settles. Its refraction bends the image the Sources beneath it drew, and
107	108		not the output of an Effect mounted before it. Mode 1 only: it needs the scene's output
108	109		stage.
109	110		</>
110	111		),
111	112		},
112	113		'cursor-smudge': {
113	114		Island: CursorSmudgeIsland,
114	115		copySiblings: ['<LiquidGradient speed={0} />'],
115	116		usageSnippet: `<ShaderScene scrollPush>
116	117		<LiquidGradient speed={0} />
117	118		<CursorSmudge strength={0.12} radius={0.18} decay={0.4} />
118	119		</ShaderScene>`,
119	120		usageNotes: (
120	121		<>
121	122		<p>
122	123		Move the pointer over the canvas without pressing. Higher <code>decay</code> values
123	124		recover faster. A still pointer adds no distortion, and the scene can idle after recovery
124	125		when its other components are still. Set <code>strength</code> to 0 to disable the effect.
125	126		</p>
126	127		<p>
127	128		Set <code>decay</code> to 0 to keep the distortion after the pointer stops. New strokes
128	129		keep changing it. Raise decay to resume recovery, or set strength to 0 to clear it.
129	130		Resizing or remounting the scene also clears the distortion. An animated Source keeps
130	131		moving beneath the held distortion.
131	132		</p>
132	133		<p>
133	134		Place Cursor Smudge after a Source inside <code><ShaderScene></code>. It bends the
134	135		image drawn by Sources; other Effects keep their own contributions unbent. Sampling past
135	136		the image extends its edge pixels. Cursor Smudge requires Mode 1.
136	137		</p>
137	138		<p>
138	139		Enable <code>scrollPush</code> on the scene to smudge while a finger scrolls across it,
139	140		including the fling after release. The page keeps scrolling. Reduced motion slows recovery
140	141		to 0.3× speed; the explicit <code>paused</code> motion policy clears the effect. An
141	142		ordinary scene pause preserves the smudge until the scene resumes.
142	143		</p>
143	144		</>
144	145		),
145	146		},
146	147		'cursor-spotlight': {
147	148		Island: CursorSpotlightIsland,
148	149		copySiblings: ['<RadialGradient />'],
149	150		usageSnippet: `<ShaderScene>
150	151		<RadialGradient />
151	152		<CursorSpotlight />
152	153		</ShaderScene>`,
153	154		usageNotes: (
154	155		<>
155	156		Cursor Spotlight is a cursor effect: stack it after any components inside a{' '}
156	157		<code><ShaderScene></code> and the area around the pointer brightens over whatever
157	158		they drew. It stays invisible until the pointer first moves over the canvas, fades out when
158	159		the pointer leaves, and lets the scene idle while the pointer is still. Mode 1 only: it
159	160		needs the scene's output stage.
160	161		</>
161	162		),
162	163		},
163	164		dissolve: {
164	165		Island: DissolveIsland,
165	166		copySiblings: ['<MeshGradient />'],
166	167		usageSnippet: `<ShaderScene>
167	168		<MeshGradient />
168	169		<Dissolve progress={0.5} pixelSize={4} />
169	170		</ShaderScene>`,
170	171		usageNotes: (
171	172		<>
172	173		<p>
173	174		Dissolve is a post-process layer: stack it after any components inside a{' '}
174	175		<code><ShaderScene></code> and drive <code>progress</code> from 0 to 1 to show them
175	176		block by block. Hidden blocks are transparent, so the page shows through.
176	177		</p>
177	178		<p>
178	179		It reads the alpha beneath it. Stacked after a feathered Radial Wipe, at{' '}
179	180		<code>progress</code> 1, it turns the wipe's soft edge into a ragged one, with the
180	181		wipe's <code>feather</code> setting how wide the ragged band is and{' '}
181	182		<code>pixelSize</code> its grain. A soft-edged source such as Blobs gets the same
182	183		treatment, which is the point of stacking a Dissolve over it.
183	184		</p>
184	185		</>
185	186		),
186	187		},
187	188		dither: {
188	189		Island: DitherIsland,
189	190		copySiblings: ['<MeshGradient />'],
190	191		usageSnippet: `<ShaderScene>
191	192		<MeshGradient />
192	193		<Dither pattern="bayer-8x8" pixelSize={4} levels={4} />
193	194		</ShaderScene>`,
194	195		usageNotes: (
195	196		<>
196	197		<p>
197	198		Dither is a post-process layer: stack it after any components inside a{' '}
198	199		<code><ShaderScene></code> and it pixelates the composed scene into chunky cells,
199	200		posterizing each channel to a few levels — the scene keeps its own colors.
200	201		</p>
201	202		<p>
202	203		<code>pattern</code> picks the threshold map that decides how in-between colors resolve:
203	204		the Bayer matrices trade smoothness (8x8) for crunch (2x2). <code>pixelSize</code> sets
204	205		the cell size in CSS pixels, and <code>levels</code> is how many steps each color channel
205	206		is allowed — <code>2</code> is the harshest look, <code>6</code> and up reads as subtle
206	207		banding. <code>spread</code> dials the pattern's strength from clean posterize bands
207	208		(<code>0</code>) to gritty overshoot (<code>2</code>), and <code>threshold</code> gates
208	209		the effect by brightness — slide it down to release the highlights until the effect is
209	210		gone.
210	211		</p>
211	212		</>
212	213		),
213	214		},
214	215		'dot-field': {
215	216		Island: DotFieldIsland,
216	217		usageSnippet: `<ShaderScene>
@@ -217,6 +218,23 @@ export const COMPONENT_PAGES: Record<string, ComponentPageEntry> = {
217	218		<DotField spacing={30} dotSize={3} color="oklch(0.65 0.01 150)" speed={0.45} amplitude={0.15} />
218	219		</ShaderScene>`,
219	220		},
	221	added	'fluted-glass': {
	222	added	Island: FlutedGlassIsland,
	223	added	copySiblings: ['<MeshGradient />'],
	224	added	usageSnippet: `<ShaderScene>
	225	added	<MeshGradient />
	226	added	<FlutedGlass />
	227	added	<Grain />
	228	added	</ShaderScene>`,
	229	added	usageNotes: (
	230	added	<>
	231	added	FlutedGlass bends only what Sources drew, never the output of an Effect such as Grain, so
	232	added	mount Grain after the glass, where the order you write matches what you see. Mode 1 only: it
	233	added	needs the scene's output stage. In your own r3f <code><Canvas></code>, the{' '}
	234	added	<code>fluteSurface</code> primitive gives you the same flute math.
	235	added	</>
	236	added	),
	237	added	},
220	238		'fractal-noise': {
221	239		Island: FractalNoiseIsland,
222	240		usageSnippet: `<ShaderScene>

223	241		<FractalNoise />
224	242		</ShaderScene>`,
225	243		},
226	244		'god-rays': {
227	245		Island: GodRaysIsland,
228	246		usageSnippet: `<ShaderScene>
229	247		<GodRays center={[0.5, -0.05]} />
230	248		</ShaderScene>`,
231	249		usageNotes: (
232	250		<>
233	251		Light rays radiate from <code>center</code> — park it off-canvas for a top-of-page sun. The
234	252		rays emit over a transparent background; stack them above a dark layer.
235	253		</>
236	254		),
237	255		},
238	256		grain: {
239	257		Island: GrainIsland,
240	258		copySiblings: ['<LinearGradient />'],
241	259		usageSnippet: `<ShaderScene>
242	260		<LinearGradient />
243	261		<Grain intensity={0.45} speed={1} blend="additive" />
244	262		</ShaderScene>`,
245	263		usageNotes: (
246	264		<>
247	265		<p>
248	266		Grain stacks inside any <code><ShaderScene></code> on top of whatever base component
249	267		you want — gradients, noise fields, mesh gradients — and applies a layer of animated grain
250	268		via the post-processing pipeline.
251	269		</p>
252	270		<p>
253	271		<strong>Additive</strong> (default) adds signed grain so half the pixels brighten and half
254	272		darken, preserving average exposure — pure texture, no exposure shift.{' '}
255	273		<strong>Subtractive</strong> takes the absolute value of the grain and subtracts it, so
256	274		the image only darkens. Subtractive simulates silver-halide film stock physics, where
257	275		exposed grain blocks light.
258	276		</p>
259	277		<p>
260	278		<code>speed</code> controls the shutter cadence: <code>1</code> ≈ 60Hz (continuous shimmer
261	279		at 60fps), <code>0.4</code> ≈ 24Hz (chunky film cadence), <code>0</code> freezes the grain
262	280		pattern.
263	281		</p>
264	282		</>
265	283		),
266	284		},
267	285		'led-wall': {
268	286		Island: LedWallIsland,
269	287		copySiblings: ['<MeshGradient />'],
270	288		usageSnippet: `<ShaderScene>
271	289		<MeshGradient />
272	290		<LedWall spacing={8} dotSize={4} />
273	291		</ShaderScene>`,
274	292		usageNotes: (
275	293		<>
276	294		LED Wall is a post-process layer: stack it after any components inside a{' '}
277	295		<code><ShaderScene></code> and it screens the composed scene into a grid of square
278	296		dots, each lit with the scene color at its cell. The gaps are transparent unless{' '}
279	297		<code>bleed</code> lets the scene through.
280	298		</>
281	299		),
282	300		},
283	301		'linear-gradient': {
284	302		Island: LinearGradientIsland,
285	303		usageSnippet: `<ShaderScene>
286	304		<LinearGradient />
287	305		</ShaderScene>`,
288	306		},
289	307		'liquid-gradient': {
290	308		Island: LiquidGradientIsland,
291	309		usageSnippet: `<ShaderScene>
292	310		<LiquidGradient />
293	311		</ShaderScene>`,
294	312		},
295	313		'mesh-gradient': {
296	314		Island: MeshGradientIsland,
297	315		usageSnippet: `<ShaderScene>
298	316		<MeshGradient />
299	317		</ShaderScene>`,
300	318		},
301	319		'radial-gradient': {
302	320		Island: RadialGradientIsland,
303	321		usageSnippet: `<ShaderScene>
304	322		<RadialGradient />
305	323		</ShaderScene>`,
306	324		},
307	325		'radial-wipe': {
308	326		Island: RadialWipeIsland,
309	327		copySiblings: ['<MeshGradient />'],
310	328		usageSnippet: `<ShaderScene>
311	329		<MeshGradient />
312	330		<RadialWipe progress={0.5} center={[0.5, 1]} feather={0.15} />
313	331		</ShaderScene>`,
314	332		usageNotes: (
315	333		<>
316	334		Radial Wipe is a post-process layer: stack it after any components inside a{' '}
317	335		<code><ShaderScene></code> and drive <code>progress</code> from 0 to 1 to reveal them
318	336		from <code>center</code>. <code>feather</code> softens the front. Hidden areas are
319	337		transparent, so the page shows through. Stack a Dissolve after it to grain the soft edge.
320	338		</>
321	339		),
322	340		},
323	341		'simplex-noise': {
324	342		Island: SimplexNoiseIsland,
325	343		usageSnippet: `<ShaderScene>
326	344		<SimplexNoise />
327	345		</ShaderScene>`,
328	346		},
329	347		vignette: {
330	348		Island: VignetteIsland,
331	349		copySiblings: ['<LinearGradient />'],
332	350		usageSnippet: `<ShaderScene>
333	351		<LinearGradient />
334	352		<Vignette intensity={0.5} radius={0.6} feather={0.5} />
335	353		</ShaderScene>`,
336	354		usageNotes: (
337	355		<>
338	356		<p>
339	357		Vignette stacks inside any <code><ShaderScene></code> on top of whatever base
340	358		component you want and fades the upstream pixels toward an edge color along a soft radial
341	359		ring. Unlike <code><Grain /></code>, which generates new noise from <code>uv</code>,
342	360		Vignette reads the upstream pixel and mixes it toward <code>color</code> — the{' '}
343	361		{`"read-upstream"`} half of the post-processing pipeline.
344	362		</p>
345	363		<p>
346	364		<code>feather</code> controls how gradual the blend is. At <code>0</code> the ring is a
347	365		hard cutoff; at <code>1</code> the entire canvas is in the blend (a smooth radial gradient
348	366		from center to edge). <code>radius</code> is the outer edge of the ring;{' '}
349	367		<code>center</code> is the bright spot in normalized UV space.
350	368		</p>
351	369		</>
352	370		),
353	371		},
354	372		voronoi: {
355	373		Island: VoronoiIsland,
356	374		usageSnippet: `<ShaderScene>
357	375		<Voronoi />
358	376		</ShaderScene>`,
359	377		},
360	378		'wave-lines': {
361	379		Island: WaveLinesIsland,
362	380		// The legacy page showed a live snippet mirroring the control panel; see
363	381		// the note in wave-lines/demo.tsx for why it is static here for now.
364	382		usageSnippet: `<ShaderScene>
365	383		<WaveLines />
366	384		</ShaderScene>`,
367	385		},
368	386		};

apps/docs/src/content/components.tsModifiedReviewed

Base line	Head line	Change	Code

1	1		/**
2	2		* One line of description and one taxonomy category per Tier 1 component.
3	3		* This is the docs' own record: the package ships no manifest, and the
4	4		* sidebar, the components index, search, and page order all derive from
5	5		* these two fields plus the slug. The slug doubles as the URL segment and as
6	6		* the folder name under packages/shaders/src/components, which props.ts reads.
7	7		*/
8	8		import type { CategorySlug } from './taxonomy';
9	9
10	10		export interface ComponentMeta {
11	11		description: string;
12	12		category: CategorySlug;
13	13		/**
14	14		* Sidebar and page label, when the prettified slug gets an acronym wrong.
15	15		* Absent for every component whose slug prettifies correctly.
16	16		*/
17	17		label?: string;
18	18		}
19	19
20	20		export const COMPONENTS = {
21	21		aurora: {
22	22		description:
23	23		'Four color-seeded noise curtains sharing one atmospheric noise field, layered over a dusk sky.',
24	24		category: 'scenes',
25	25		},
26	26		blobs: {
27	27		description:
28	28		'Soft gooey blobs. Colored metaballs drifting around the center, merging and splitting over a transparent background.',
29	29		category: 'scenes',
30	30		},
31	31		'conic-gradient': {
32	32		description:
33	33		'A color ramp sweeping clockwise around a center point, with pinwheel repeats and rotation. Completes the CSS gradient trio with LinearGradient and RadialGradient.',
34	34		category: 'gradients',
35	35		},
36	36		'cursor-ripple': {
37	37		description:
38	38		'A water surface over the scene. Drag the pointer and it leaves a wake that spreads, catches light, and settles, bending the image beneath it. Stacks on top of any base component inside <ShaderScene>.',
39	39		category: 'cursor',
40	40		},
41	41		'cursor-smudge': {
42	42		description:
43	43		'Pulls the image drawn by Sources along pointer movement, then eases it back without bouncing. Faster swipes pull harder, up to a cap.',
44	44		category: 'cursor',
45	45		},
46	46		'cursor-spotlight': {
47	47		description:
48	48		'Brightens the scene around the pointer. Invisible until the first move, it fades out when the pointer leaves the canvas. Stacks on top of any base component inside <ShaderScene>.',
49	49		category: 'cursor',
50	50		},
51	51		dissolve: {
52	52		description:
53	53		'Turns the scene into grain, shown block by block as progress rises. Stacked after a feathered wipe, it grains the soft edge into a ragged one. Stacks on top of any base component inside <ShaderScene>.',
54	54		category: 'transitions',
55	55		},
56	56		dither: {
57	57		description:
58	58		'Retro ordered dithering: pixelates the scene into chunky cells and posterizes its colors. Stacks on top of any base component inside <ShaderScene>.',
59	59		category: 'retro-glitch',
60	60		},
61	61		'dot-field': {
62	62		description:
@@ -63,6 +63,11 @@ export const COMPONENTS = {
63	63		'Tiled dot field with center-anchored ripple displacement. The architecturally-validating Shaders component.',
64	64		category: 'patterns',
65	65		},
	66	added	'fluted-glass': {
	67	added	description:
	68	added	'A pane of fluted glass over the scene. Each flute bends the image beneath it into a squeezed copy and catches the light along one wall. Stacks on top of any Source inside <ShaderScene>.',
	69	added	category: 'warp',
	70	added	},
66	71		'fractal-noise': {
67	72		description:
68	73		'Layered fractal noise. Multi-octave texture with a style dial from soft clouds to crisp vein networks.',

69	74		category: 'noise',
70	75		},
71	76		'god-rays': {
72	77		description:
73	78		'Layered soft light rays radiating from a controllable origin: two flowing noise fields multiplied per color, with patchiness, diffusion, and an interactive source glow.',
74	79		category: 'scenes',
75	80		},
76	81		grain: {
77	82		description:
78	83		'Additive or subtractive film grain overlay. Stacks on top of any base component inside <ShaderScene>.',
79	84		category: 'lens-film',
80	85		},
81	86		'led-wall': {
82	87		description:
83	88		'Screens the scene into a wall of square LED dots, each lit with the color beneath it, with a per-dot flicker and a swell that follows the cursor. Stacks on top of any base component inside <ShaderScene>.',
84	89		category: 'retro-glitch',
85	90		label: 'LED Wall',
86	91		},
87	92		'linear-gradient': {
88	93		description: 'Animated linear gradient. The simplest, foundational Shaders component.',
89	94		category: 'gradients',
90	95		},
91	96		'liquid-gradient': {
92	97		description:
93	98		"Colors streaked along slow, curling currents, like dye in moving water. Takes LinearGradient's stops and angle.",
94	99		category: 'gradients',
95	100		},
96	101		'mesh-gradient': {
97	102		description:
98	103		'Warped 4-color fluid gradient with time-cycling palette and film grain. Linear/Stripe marketing-page style.',
99	104		category: 'gradients',
100	105		},
101	106		'radial-gradient': {
102	107		description:
103	108		'A color ramp radiating from a point, with an elliptical shape control and repeating concentric rings. The radial counterpart to LinearGradient.',
104	109		category: 'gradients',
105	110		},
106	111		'radial-wipe': {
107	112		description:
108	113		'Reveals or hides the scene from a point with a feathered edge. Stack a Dissolve after it to grain that edge. Stacks on top of any base component inside <ShaderScene>.',
109	114		category: 'transitions',
110	115		},
111	116		'simplex-noise': {
112	117		description:
113	118		'Evolving 3D simplex noise with color ramp, contour bands, and brightness/contrast histogram shaping.',
114	119		category: 'noise',
115	120		},
116	121		vignette: {
117	122		description:
118	123		'Radial darkening at the canvas edges. Stacks on top of any base component inside <ShaderScene>.',
119	124		category: 'lens-film',
120	125		},
121	126		voronoi: {
122	127		description:
123	128		'Cellular mosaic. Flat color patches around drifting seed points, with crisp constant-width borders.',
124	129		category: 'noise',
125	130		},
126	131		'wave-lines': {
127	132		description:
128	133		'Coherent wave-line bundle: translucent ribbon bodies wrapped in additive halo light. Lines share one wave and braid, breathe, and fray wide toward the canvas edges, with per-line flat or gradient color.',
129	134		category: 'scenes',
130	135		},
131	136		} satisfies Record<string, ComponentMeta>;
132	137
133	138		/** A component's slug, typed from the keys of COMPONENTS so an unknown slug fails the type check. */
134	139		export type ComponentSlug = keyof typeof COMPONENTS;

apps/docs/src/content/taxonomy.tsModifiedReviewed

Base line	Head line	Change	Code

1	1		/**
2	2		* The component taxonomy: which leaf group each component category belongs
3	3		* to, which tier each group sits in, and how to fold a flat list of catalog
4	4		* records into that tree. components.ts stores one category per component
5	5		* and this file owns everything else, so adding a group is one entry here.
6	6		* The sidebar, prev and next paging, and breadcrumbs all read the tree this
7	7		* builds. The decision record is the "Component taxonomy" document in Linear.
8	8		*/
9	9
10	10		// ---- The table ----
11	11
12	12		/* Tuple order is the curated order: Sources before Effects before Motion,
13	13		and within a tier the simpler groups first. Motion has no shipped group
14	14		yet, so it is not listed; a tier appears here when its first group does.
15	15		The records beside the tuples are typed so a slug cannot be added to one
16	16		without the other. */
17	17		const TIER_SLUGS = ['sources', 'effects'] as const;
18	18
19	19		export type TierSlug = (typeof TIER_SLUGS)[number];
20	20
21	21		const TIERS: Record<TierSlug, { label: string }> = {
22	22		sources: { label: 'Sources' },
23	23		effects: { label: 'Effects' },
24	24		};
25	25
26	26		const CATEGORY_SLUGS = [
27	27		'gradients',
@@ -28,6 +28,7 @@ const CATEGORY_SLUGS = [
28	28		'noise',
29	29		'patterns',
30	30		'scenes',
	31	added	'warp',
31	32		'lens-film',
32	33		'retro-glitch',
33	34		'transitions',

34	35		'cursor',
35	36		] as const;
36	37
37	38		export type CategorySlug = (typeof CATEGORY_SLUGS)[number];
38	39
39	40		export const CATEGORIES: Record<CategorySlug, { label: string; tier: TierSlug }> = {
40	41		gradients: { label: 'Gradients', tier: 'sources' },
@@ -41,6 +42,7 @@ export const CATEGORIES: Record<CategorySlug, { label: string; tier: TierSlug }>
41	42		noise: { label: 'Noise', tier: 'sources' },
42	43		patterns: { label: 'Patterns', tier: 'sources' },
43	44		scenes: { label: 'Scenes', tier: 'sources' },
	45	added	warp: { label: 'Warp', tier: 'effects' },
44	46		'lens-film': { label: 'Lens & Film', tier: 'effects' },
45	47		'retro-glitch': { label: 'Retro & Glitch', tier: 'effects' },
46	48		transitions: { label: 'Transitions', tier: 'effects' },

47	49		cursor: { label: 'Cursor', tier: 'effects' },
48	50		};
49	51
50	52		// ---- The tree ----
51	53
52	54		export interface TaxonomyGroup<Record> {
53	55		slug: CategorySlug;
54	56		label: string;
55	57		items: Record[];
56	58		}
57	59
58	60		export interface TaxonomyTier<Record> {
59	61		slug: TierSlug;
60	62		label: string;
61	63		groups: Array<TaxonomyGroup<Record>>;
62	64		}
63	65
64	66		/**
65	67		* Folds records into tiers of groups. Tiers and groups keep the table's
66	68		* order, records sort alphabetically by label inside their group, and a
67	69		* group or tier with nothing in it is left out rather than rendered empty.
68	70		*/
69	71		export function groupByTaxonomy<Record extends { category: CategorySlug; label: string }>(
70	72		records: readonly Record[],
71	73		): Array<TaxonomyTier<Record>> {
72	74		const tiers: Array<TaxonomyTier<Record>> = [];
73	75
74	76		for (const tierSlug of TIER_SLUGS) {
75	77		const groups: Array<TaxonomyGroup<Record>> = [];
76	78
77	79		for (const categorySlug of CATEGORY_SLUGS) {
78	80		const category = CATEGORIES[categorySlug];
79	81
80	82		if (category.tier !== tierSlug) continue;
81	83		const items = records
82	84		.filter((record) => record.category === categorySlug)
83	85		.sort((a, b) => a.label.localeCompare(b.label));
84	86
85	87		if (items.length > 0) groups.push({ slug: categorySlug, label: category.label, items });
86	88		}
87	89
88	90		if (groups.length > 0) tiers.push({ slug: tierSlug, label: TIERS[tierSlug].label, groups });
89	91		}
90	92
91	93		return tiers;
92	94		}
93	95
94	96		/** The tree's records in reading order: tier by tier, group by group. Prev
95	97		* and next paging walks this so a reader steps through the sidebar top to
96	98		* bottom. */
97	99		export function flattenTaxonomy<Record>(tiers: ReadonlyArray<TaxonomyTier<Record>>): Record[] {
98	100		return tiers.flatMap((tier) => tier.groups.flatMap((group) => group.items));
99	101		}

apps/docs/src/app/components/fluted-glass/scene.tsxNew fileReviewed

Base line	Head line	Change	Code

	1	added	'use client';
	2	added
	3	added	import type { ReactNode } from 'react';
	4	added
	5	added	import { FlutedGlass, MeshGradient, ShaderScene } from '@camp-dev/shaders';
	6	added
	7	added	import { type FlutedGlassParams, INITIAL } from './params';
	8	added
	9	added	export default function FlutedGlassScene({
	10	added	params = INITIAL,
	11	added	children,
	12	added	}: {
@@ -0,0 +13,20 @@
	13	added	params?: FlutedGlassParams;
	14	added	children?: ReactNode;
	15	added	} = {}) {
	16	added	return (
	17	added	<ShaderScene>
	18	added	<MeshGradient />
	19	added	<FlutedGlass
	20	added	angle={params.angle}
	21	added	crossSection={params.crossSection}
	22	added	fluteWidth={params.fluteWidth}
	23	added	highlight={params.highlight}
	24	added	highlightColor={params.highlightColor}
	25	added	lightAngle={params.lightAngle}
	26	added	refraction={params.refraction}
	27	added	shadow={params.shadow}
	28	added	/>
	29	added	{children}
	30	added	</ShaderScene>
	31	added	);
	32	added	}

apps/docs/src/app/components/fluted-glass/params.tsNew fileReviewed

Base line	Head line	Change	Code

	1	added	export interface FlutedGlassParams {
	2	added	fluteWidth: number;
	3	added	angle: number;
	4	added	refraction: number;
	5	added	crossSection: number;
	6	added	lightAngle: number;
	7	added	highlight: number;
	8	added	highlightColor: string;
@@ -0,0 +9,13 @@
	9	added	shadow: number;
	10	added	}
	11	added
	12	added	export const INITIAL: FlutedGlassParams = {
	13	added	fluteWidth: 40,
	14	added	angle: 90,
	15	added	refraction: 1,
	16	added	crossSection: 0.5,
	17	added	lightAngle: 135,
	18	added	highlight: 0.45,
	19	added	highlightColor: 'oklch(1 0 0)',
	20	added	shadow: 0.2,
	21	added	};

apps/docs/src/app/components/fluted-glass/demo.tsxNew fileReviewed

Base line	Head line	Change	Code

	1	added	'use client';
	2	added
	3	added	/**
	4	added	* Fluted Glass demo island: the interactive slice of the Fluted Glass page,
	5	added	* holding the control store, the shader preview, and the control panel. The
	6	added	* shared components/[slug] template renders this between its static header
	7	added	* and prose sections.
	8	added	*/
	9	added	import dynamic from 'next/dynamic';
	10	added	import { useMemo } from 'react';
	11	added
	12	added	import {
	13	added	ColorInput,
	14	added	ControlPanel,
	15	added	ControlsProvider,
	16	added	createControlStore,
	17	added	DemoLayout,
	18	added	Section,
	19	added	SliderInput,
	20	added	useSnapshot,
	21	added	} from '@/components/controls';
	22	added	import { DemoPoster } from '@/components/DemoPoster';
	23	added	import { VisualTestPause } from '@/lib/visualTestHooks';
	24	added
	25	added	import { type FlutedGlassParams, INITIAL } from './params';
@@ -0,0 +26,14 @@
	26	added
	27	added	const FlutedGlassScene = dynamic(() => import('./scene'), { ssr: false });
	28	added
	29	added	/**
	30	added	* The CSS size the poster was captured at in build-posters.sh, the widest
	31	added	* demo box. The flutes are sized in CSS pixels, so DemoPoster's pixel-locked
	32	added	* mode shows the image at this size and lets the box crop it. Cover-scaling
	33	added	* would change the flutes' spacing, and the grooves would jump when the live
	34	added	* scene replaced the poster.
	35	added	*/
	36	added	const POSTER_SIZE: readonly [number, number] = [896, 598];
	37	added
	38	added	/**
	39	added	* Reads the live params and renders the scene. Split out from the island so

	40	added	* it subscribes to the store on its own: the island never re-renders during
	41	added	* a drag, only this and the moved control do.
	42	added	*/
	43	added	function FlutedGlassDemo() {
	44	added	const params = useSnapshot<FlutedGlassParams>();
	45	added
	46	added	return (
	47	added	<DemoPoster
	48	added	alt="Fluted Glass shader preview: a mesh gradient seen through vertical flutes of glass"
	49	added	pixelSize={POSTER_SIZE}
	50	added	src="/posters/fluted-glass.jpg"
	51	added	>
	52	added	<FlutedGlassScene params={params}>
	53	added	<VisualTestPause />
	54	added	</FlutedGlassScene>
	55	added	</DemoPoster>
@@ -0,0 +56,24 @@
	56	added	);
	57	added	}
	58	added
	59	added	function FlutedGlassControls() {
	60	added	return (
	61	added	<ControlPanel>
	62	added	<Section title="Glass">
	63	added	<SliderInput label="Flute width" max={160} min={4} path="fluteWidth" step={1} />
	64	added	<SliderInput label="Angle" max={360} min={0} path="angle" step={1} />
	65	added	<SliderInput label="Refraction" max={3} min={0} path="refraction" step={0.01} />
	66	added	<SliderInput label="Cross-section" max={1} min={0} path="crossSection" step={0.01} />
	67	added	</Section>
	68	added	<Section title="Light">
	69	added	<SliderInput label="Light angle" max={360} min={0} path="lightAngle" step={1} />
	70	added	<SliderInput label="Highlight" max={1} min={0} path="highlight" step={0.01} />
	71	added	<ColorInput label="Highlight color" path="highlightColor" />
	72	added	<SliderInput label="Shadow" max={1} min={0} path="shadow" step={0.01} />
	73	added	</Section>
	74	added	</ControlPanel>
	75	added	);
	76	added	}
	77	added
	78	added	export function FlutedGlassIsland() {
	79	added	const store = useMemo(() => createControlStore<FlutedGlassParams>(INITIAL), []);

	80	added
	81	added	return (
	82	added	<ControlsProvider store={store}>
	83	added	<DemoLayout controls={<FlutedGlassControls />}>
	84	added	<div data-shader-demo>
	85	added	<FlutedGlassDemo />
	86	added	</div>
	87	added	</DemoLayout>
	88	added	</ControlsProvider>
	89	added	);
	90	added	}

2 files 96 lines added, 0 removed0 of 2 files reviewed

packages/shaders/src/primitives/flute-surface/flute-surface.ts
packages/shaders/src/engine.ts

packages/shaders/src/primitives/flute-surface/flute-surface.tsNew fileReviewed

Base line	Head line	Change	Code

	1	added	// The surface of fluted glass: identical flutes side by side, each a strip
	2	added	// of glass that bends what is under it. For a point, this works out how
	3	added	// steep the glass is and how far it moves the image, in one call, so light
	4	added	// read from the slope lands where the image bends. FlutedGlass bends and
	5	added	// lights the scene with it, and Mode 2 users call it on their own coordinates.
	6	added	import type { ShaderNodeObject } from 'three/tsl';
	7	added	import {
	8	added	abs,
	9	added	clamp,
	10	added	cos,
	11	added	dot,
	12	added	float,
	13	added	fract,
	14	added	fwidth,
	15	added	max,
	16	added	mix,
	17	added	pow,
	18	added	select,
	19	added	sin,
	20	added	smoothstep,
	21	added	vec2,
	22	added	} from 'three/tsl';
	23	added	import type { Node } from 'three/webgpu';
	24	added
	25	added	import type { TSLNode } from '../color-ramp/color-ramp.js';
	26	added
	27	added	export interface FluteSurfaceOptions {
	28	added	/**
	29	added	* The width of one flute, in the units of `position`. Values near 0 clamp
	30	added	* to a tiny width rather than dividing by zero. Default 40.
	31	added	*/
	32	added	fluteWidth?: TSLNode \| number;
	33	added	/**
	34	added	* The direction the flutes run, in degrees counterclockwise from the
	35	added	* position's +x axis with y up: 0 runs them left to right and 90 runs them
	36	added	* bottom to top, the degrees LinearGradient's angle uses. Default 90,
	37	added	* vertical flutes.
	38	added	*/
	39	added	angle?: TSLNode \| number;
	40	added	/**
	41	added	* How far the glass moves the image, in half flute widths per unit of
	42	added	* slope. 0 leaves it in place. At 1, a groove shows the image half a flute
	43	added	* width away, so each flute shows a copy of twice its own width, squeezed.
	44	added	* Default 1.
	45	added	*/
	46	added	refraction?: TSLNode \| number;
	47	added	/**
	48	added	* The shape of each flute seen from its end, from 0 to 1. 0 is a pointed
	49	added	* prism, two flat faces meeting at a ridge. 0.5 is a round lens. 1 is a
	50	added	* flat top with steep walls. Values between give the shapes between, and
	51	added	* values outside 0 to 1 clamp. Default 0.5.
	52	added	*/
@@ -0,0 +53,33 @@
	53	added	crossSection?: TSLNode \| number;
	54	added	}
	55	added
	56	added	export interface FluteSurfaceResult {
	57	added	/**
	58	added	* How far to move the point before you sample the image under the glass,
	59	added	* as a vector in the units and frame of `position`. Add it to `position`.
	60	added	*/
	61	added	bend: ShaderNodeObject<Node>;
	62	added	/**
	63	added	* How steep the glass is, as a vector in the frame of `position`. It
	64	added	* points across the flute, away from the flute's center, and its length
	65	added	* runs from 0 at the center to 1 at a groove.
	66	added	*/
	67	added	slope: ShaderNodeObject<Node>;
	68	added	/**
	69	added	* How far the point sits from its flute's center, from 0 at the center to
	70	added	* 1 at a groove, whatever the cross-section. Unlike the slope it skips the
	71	added	* groove smoothing, so it reaches 1 at a groove from both sides with no
	72	added	* dip. Shading meant to be darkest on the groove reads this.
	73	added	*/
	74	added	fromCenter: ShaderNodeObject<Node>;
	75	added	/**
	76	added	* How steep the glass is, from 0 where it is flat to 1 at a groove. It is
	77	added	* the slope's length without the groove smoothing, so like `fromCenter` it
	78	added	* reaches 1 at a groove from both sides, where the slope dips to 0.
	79	added	* Shading meant to follow the shape of the glass reads this.
	80	added	*/
	81	added	steepness: ShaderNodeObject<Node>;
	82	added	}
	83	added
	84	added	// ---------------------------------------------
	85	added	// Feel constants (tuned by eye at the build's visual gates)

	86	added	// ---------------------------------------------
	87	added	// The slope's exponent at each end of the cross-section dial. A cross-section
	88	added	// of 0.5 always has an exponent of 1. Lower PRISM_EXPONENT sharpens the
	89	added	// prism's faces toward perfectly flat, and higher FLAT_EXPONENT flattens the
	90	added	// top and steepens the walls.
	91	added	const PRISM_EXPONENT = 1 / 16;
	92	added	const FLAT_EXPONENT = 16;
	93	added	// How many screen pixels each groove and the prism's ridge smooth over on
	94	added	// either side. 0 brings back the stair steps; above about 2 the grooves read
@@ -0,0 +95,57 @@
	95	added	// as soft blurs rather than sharp breaks.
	96	added	const GROOVE_SMOOTHING = 1;
	97	added
	98	added	/**
	99	added	* The bend and slope of fluted glass at `position`. A flute's center sits on
	100	added	* the position's origin, so center the position where the middle flute
	101	added	* should go. Call it from a fragment shader: it smooths each groove over the
	102	added	* screen-space rate of change of `position`, which only a fragment shader
	103	added	* can measure.
	104	added	*
	105	added	* @param position — Vec2 TSL node in any units with y up, such as `uv()`
	106	added	* scaled to pixels. `fluteWidth` and the returned bend share its units.
	107	added	*/
	108	added	export function fluteSurface(
	109	added	position: TSLNode,
	110	added	options: FluteSurfaceOptions = {},
	111	added	): FluteSurfaceResult {
	112	added	const fluteWidth = max(float(options.fluteWidth ?? 40), 1e-4);
	113	added	const angle = float(options.angle ?? 90);
	114	added	const refraction = float(options.refraction ?? 1);
	115	added	const crossSection = clamp(float(options.crossSection ?? 0.5), 0, 1);
	116	added
	117	added	// ---------------------------------------------
	118	added	// The direction across the flutes
	119	added	// ---------------------------------------------
	120	added	// The flutes run along (cos, sin) of the angle. Across is that direction
	121	added	// turned a quarter turn clockwise, (sin, -cos), so at the default 90
	122	added	// degrees it is (1, 0): across runs left to right over vertical flutes.
	123	added	const angleRadians = angle.mul(Math.PI / 180);
	124	added	const across = vec2(sin(angleRadians), cos(angleRadians).negate());
	125	added
	126	added	// ---------------------------------------------
	127	added	// Repeating space: which part of which flute
	128	added	// ---------------------------------------------
	129	added	// dot() projects the position onto the across direction: its signed
	130	added	// distance across the flutes, in the position's units. Dividing by the
	131	added	// width counts that distance in flutes. The +0.5 below centers a flute on
	132	added	// every whole number, so 2.25 lies a quarter flute right of the center of
	133	added	// flute 2, halfway to its groove.
	134	added	//
	135	added	// fract() keeps only the part after the decimal point, which is how a
	136	added	// shader repeats space: every flute gets the same 0-to-1 ramp, whatever
	137	added	// its number. The +0.5 shifts the ramp so its middle, not its start, lands
	138	added	// on the origin, which puts a flute's center there. At each groove the
	139	added	// ramp jumps from 1 back to 0, and that jump is what breaks the image into
	140	added	// strips.
	141	added	const flutePhase = dot(position, across).div(fluteWidth);
	142	added	const ramp = fract(flutePhase.add(0.5));
	143	added
	144	added	// The distance from the center, before any smoothing. ramp*2-1 runs from
	145	added	// -1 at one groove to 1 at the other, and abs() folds it to run 0 to 1
	146	added	// from the center out on both sides. Where the ramp jumps from 1 to 0 at a
	147	added	// groove, this goes from 1 to 1, so it has no jump to smooth.
	148	added	const fromCenter = abs(ramp.mul(2).sub(1));
	149	added
	150	added	// ---------------------------------------------
	151	added	// Clean grooves: antialiasing from the screen-space rate of change

	152	added	// ---------------------------------------------
	153	added	// The scene has no MSAA, the GPU's own edge smoothing, so a jump in the
	154	added	// ramp lands on whole pixels and a slanted groove draws a staircase. The
	155	added	// fix is to replace the jump with a slope exactly one pixel wide, and to
	156	added	// know how wide a pixel is in flutes, the shader asks the GPU.
	157	added	//
	158	added	// The GPU shades pixels in 2x2 blocks, so each pixel can read how much a
	159	added	// value changes to its neighbor. fwidth() adds that change across and
	160	added	// down, so fwidth(flutePhase) is how many flutes one pixel spans: 0.025 for
	161	added	// a 40-pixel flute, and 0.125 for an 8-pixel one. It is taken of the phase
	162	added	// before fract(), which has no jump in it to throw the measure off. The max
	163	added	// keeps the band from shrinking to nothing, which would divide by zero in
	164	added	// smoothstep() when a flute is very wide.
	165	added	const rampPerPixel = max(fwidth(flutePhase).mul(GROOVE_SMOOTHING), 1e-5);
	166	added
	167	added	// Paper's smoothFract. distanceToGroove is 0 at a groove and falls to -0.5
	168	added	// at the flute's center. smoothstep() turns the last pixel before a groove
	169	added	// into a blend that climbs from 0 to 0.5, so mix() eases the ramp toward
	170	added	// its mirror image, 1 - ramp, and the two meet at 0.5. Both sides of a
	171	added	// groove now arrive at 0.5, the flute's center, where the glass is flat, so
	172	added	// the groove pixel shows the image right at the groove instead of either
	173	added	// flute's bent copy. Away from the grooves the blend is 0 and the ramp is
	174	added	// unchanged.
	175	added	const distanceToGroove = abs(ramp.sub(0.5)).sub(0.5);
	176	added	const grooveBlend = smoothstep(rampPerPixel.negate(), rampPerPixel, distanceToGroove);
	177	added	const smoothRamp = mix(ramp, ramp.oneMinus(), grooveBlend);
	178	added
	179	added	// *2-1 stretches the ramp to run from -1 at one groove, through 0 at the
	180	added	// center, to 1 at the other groove.
	181	added	const fluteOffset = smoothRamp.mul(2).sub(1);
	182	added
	183	added	// ---------------------------------------------
	184	added	// The cross-section: picking an exponent from the dial
	185	added	// ---------------------------------------------
	186	added	// The dial picks the exponent that shapes the slope below, on a doubling
	187	added	// scale. dialFromRound runs from -1 at a prism, through 0 at round, to 1 at
	188	added	// flat. The prism half raises PRISM_EXPONENT to its distance from round,
	189	added	// and the flat half raises FLAT_EXPONENT the same way. At round both give
	190	added	// 1, since anything to the power 0 is 1, so 0.5 is exactly round whatever
	191	added	// the ends are. Each equal step of the dial multiplies the exponent by the
	192	added	// same factor, so a sweep morphs the shape evenly. With ends of 1/16 and
	193	added	// 16, the exponent doubles every eighth of the dial.
	194	added	const dialFromRound = crossSection.mul(2).sub(1);
	195	added	const exponentEnd = select(
	196	added	dialFromRound.lessThan(0),
	197	added	float(PRISM_EXPONENT),
	198	added	float(FLAT_EXPONENT),
	199	added	);
	200	added	const exponent = pow(exponentEnd, abs(dialFromRound));
	201	added
	202	added	// ---------------------------------------------
	203	added	// The slope: shaping a curve with an exponent
	204	added	// ---------------------------------------------
	205	added	// The slope's size is the distance from the flute's center, \|offset\|,
	206	added	// raised to the exponent. Because that distance runs from 0 to 1, a power
	207	added	// bends the curve between without moving its ends: the center stays flat
	208	added	// and the groove stays steepest.
	209	added	//
	210	added	// - An exponent of 1 leaves a straight line, so the slope grows in step
	211	added	// with the distance: a round lens. Strictly that draws a parabola, a
	212	added	// shallow stand-in for a circular arc, whose slope would shoot up near
	213	added	// the grooves.
	214	added	// - Below 1 the power lifts small values toward 1. x^(1/16) is already
	215	added	// 0.65 at x = 0.001 and 0.96 at 0.5, so the slope jumps to nearly full
	216	added	// just off the center and stays there: two flat faces meeting at a
	217	added	// ridge, a prism.
	218	added	// - Above 1 the power presses small values toward 0. x^16 is 0.00002 at
	219	added	// 0.5 and reaches 0.5 only at 0.96, so the glass stays flat across the
	220	added	// top and turns steep right at each groove.
	221	added	//
	222	added	// pow() needs a base of 0 or more, so the power is taken of fromCenter,
	223	added	// the distance without the groove smoothing, and the offset carries the
	224	added	// sign: offset * distance^(exponent - 1). Away from the grooves the offset
	225	added	// is ±distance, so that works out to ±distance^exponent, the curve above.
	226	added	// On a groove's own pixel the distance is about 1, and 1 to any power is
	227	added	// 1, so the slope follows the smoothed offset through 0 over the same
	228	added	// pixel whatever the exponent. Raising the smoothed offset itself would
	229	added	// undo the smoothing on a prism: x^(1/16) is still 0.82 at x = 0.045, so
	230	added	// the slope would stay near full until a sliver from the groove, and the
	231	added	// grooves would staircase again. The max() keeps the base off 0 at the
	232	added	// center, where a prism's negative power, exponent - 1, would shoot to
	233	added	// infinity. Pointing the result along `across` turns it into a vector, so
	234	added	// on either side of the center the slope points toward the nearer groove.
	235	added	const shapedSlope = fluteOffset.mul(pow(max(fromCenter, 1e-5), exponent.sub(1)));
	236	added
	237	added	// A prism's ridge jumps too. Just off the center x^(1/16) leaps from 0 to
	238	added	// about 0.65 inside a sliver much thinner than a pixel, so the two faces
	239	added	// meet in a staircase of their own. The same pixel width, doubled because
	240	added	// the offset runs twice as fast as the ramp, fades the slope in over the
	241	added	// first pixel either side of the center. On a round or flat flute the
	242	added	// slope there is already close to 0, so the fade changes nothing you can
	243	added	// see. It also softens the groove pixel, where the smoothed offset passes
	244	added	// through 0 on its way between flutes.
	245	added	const ridgeBlend = smoothstep(0, rampPerPixel.mul(2), abs(fluteOffset));
	246	added	const slopeAmount = shapedSlope.mul(ridgeBlend);
	247	added	const slope = across.mul(slopeAmount);
	248	added
	249	added	// The steepness takes the same power of fromCenter rather than of the
	250	added	// smoothed offset. Away from the grooves the two are equal, so it is the
	251	added	// slope's length there. On a groove's own pixel, where the smoothing pulls
	252	added	// the slope through 0, it keeps climbing toward 1. The ridge fade reads
	253	added	// fromCenter too, so it fades only at the center and never at a groove.
	254	added	const steepness = pow(fromCenter, exponent).mul(smoothstep(0, rampPerPixel.mul(2), fromCenter));
	255	added
	256	added	// ---------------------------------------------
	257	added	// The bend: refraction as a sample offset
	258	added	// ---------------------------------------------
	259	added	// Glass doesn't move pixels. It changes which point of the image behind it
	260	added	// reaches the eye, so a shader bends an image by sampling it somewhere
	261	added	// else. The bend is the slope times the dial, in half flute widths. On a
	262	added	// round flute at a refraction of 1, a point at offset x from the center
	263	added	// samples at 2x, so the flute's own width shows twice that width of image:
	264	added	// a squeezed copy of what lies right under it. The bend points away from
	265	added	// the center on both sides, which is what squeezes rather than stretches.
	266	added	// Other cross-sections spread the same span unevenly. A prism shifts each
	267	added	// face's half of the copy outward whole, and a flat top barely moves its
	268	added	// middle and crams the rest against the walls.
	269	added	const bend = slope.mul(refraction).mul(fluteWidth.mul(0.5));
	270	added
	271	added	return { bend, slope, fromCenter, steepness };
	272	added	}

packages/shaders/src/engine.tsModifiedReviewed

Base line	Head line	Change	Code

1	1		// The framework-free half of @camp-dev/shaders: TSL primitives, the renderer,
2	2		// the scheduler, and CPU color math. src/react and src/components import this
3	3		// barrel rather than the root index, which keeps the dependency direction one
4	4		// way (root -> react -> engine, root -> components -> react -> engine) and
5	5		// leaves this half extractable into its own package if a second framework
6	6		// binding ever becomes real.
7	7
8	8		export { createRenderer } from './runtime/create-renderer/create-renderer.js';
9	9		export type {
10	10		GpuRenderer,
11	11		GpuBackend,
12	12		CreateRendererOptions,
13	13		} from './runtime/create-renderer/create-renderer.js';
14	14
15	15		export { CursorInput } from './inputs/cursor-input/cursor-input.js';
16	16		export type {
17	17		CursorInputOptions,
18	18		StrokePoint,
19	19		Vector2,
20	20		} from './inputs/cursor-input/cursor-input.js';
21	21		export type { PushStroke } from './inputs/scroll-push/scroll-push.js';
22	22
23	23		export { colorRamp } from './primitives/color-ramp/color-ramp.js';
24	24		export type { ColorRampStop, TSLNode } from './primitives/color-ramp/color-ramp.js';
25	25
26	26		export { mixColor } from './primitives/color-space/index.js';
27	27		export type { ColorSpace, HueInterpolation } from './primitives/color-space/index.js';
28	28
29	29		// Re-exported from the ./color subpath, which is where these actually live.
30	30		// Keeping them here means no existing import breaks; new call sites in the docs
31	31		// site are pushed to the subpath by a lint rule in the root eslint config,
32	32		// because reaching color math through this barrel drags in three/webgpu.
33	33		export {
34	34		linearChannelToSrgb,
35	35		linearSrgbToLinearDisplayP3,
36	36		linearSrgbToOklch,
37	37		oklabToLinearSrgb,
38	38		oklchInGamut,
39	39		oklchToGamut,
40	40		oklchToLinearSrgb,
41	41		parseColorString,
42	42		parseOklchString,
43	43		srgbChannelToLinear,
44	44		} from './color.js';
45	45		export type { OutputGamut } from './color.js';
46	46
47	47		export { simplexNoise } from './primitives/noise/noise.js';
48	48
49	49		export { fractalNoise } from './primitives/fbm/fbm.js';
50	50		export type { FractalFold, FractalNoiseOptions } from './primitives/fbm/fbm.js';
51	51
52	52		export { voronoi } from './primitives/voronoi/voronoi.js';
53	53
54	54		export { voronoiCells } from './primitives/voronoi/voronoi-cells.js';
55	55		export type {
56	56		VoronoiCellsOptions,
57	57		VoronoiCellsResult,
58	58		} from './primitives/voronoi/voronoi-cells.js';
59	59
60	60		export { MAX_BLOBS, metaballs } from './primitives/metaballs/metaballs.js';
61	61		export type { MetaballsOptions, MetaballsResult } from './primitives/metaballs/metaballs.js';
62	62
63	63		export { quantize } from './primitives/quantize/quantize.js';
64	64
65	65		export { signedDistanceFieldCircle } from './primitives/sdf-circle/sdf-circle.js';
66	66		export { signedDistanceFieldCross } from './primitives/sdf-cross/sdf-cross.js';
@@ -67,5 +67,11 @@ export { signedDistanceFieldCross } from './primitives/sdf-cross/sdf-cross.js';
67	67
68	68		export { displace } from './primitives/displace/displace.js';
69	69
	70	added	export { fluteSurface } from './primitives/flute-surface/flute-surface.js';
	71	added	export type {
	72	added	FluteSurfaceOptions,
	73	added	FluteSurfaceResult,
	74	added	} from './primitives/flute-surface/flute-surface.js';
	75	added
70	76		export { cursorRipple } from './primitives/cursor-ripple/cursor-ripple.js';
71	77		export type { CursorRippleOptions } from './primitives/cursor-ripple/cursor-ripple.js';

72	78
73	79		export { elapsedTime } from './primitives/time/time.js';
74	80
75	81		export { holdRendererClock, resetRendererClock } from './runtime/clock/reset-clock.js';
76	82
77	83		export { grain } from './primitives/grain/grain.js';
78	84		export { stableHash, stableHashUint } from './primitives/stable-hash/stable-hash.js';
79	85
80	86		export { dither } from './primitives/dither/dither.js';
81	87		export { ditherThreshold } from './primitives/dither-pattern/dither-pattern.js';
82	88		export type { DitherPattern } from './primitives/dither-pattern/dither-pattern.js';
83	89
84	90		export {
85	91		setReducedMotionPolicy,
86	92		getReducedMotionPolicy,
87	93		getReducedMotionTimeScale,
88	94		createReducedMotionWatcher,
89	95		} from './runtime/reduced-motion/reduced-motion.js';
90	96		export type {
91	97		ReducedMotionPolicy,
92	98		ReducedMotionWatcher,
93	99		} from './runtime/reduced-motion/reduced-motion.js';
94	100
95	101		export { createVisibilityWatcher } from './runtime/visibility/visibility.js';
96	102		export type { VisibilityWatcher } from './runtime/visibility/visibility.js';
97	103
98	104		export { createIntersectionWatcher } from './runtime/intersection/intersection.js';
99	105		export type { IntersectionWatcher } from './runtime/intersection/intersection.js';
100	106
101	107		export { FrameScheduler } from './runtime/frame-scheduler/frame-scheduler.js';
102	108
103	109		export { createOutputStage } from './runtime/output-stage/output-stage.js';
104	110		export type { TimeGpu } from './runtime/gpu-timer/gpu-timer.js';
105	111		export type {
106	112		OutputStage,
107	113		PostProcessTransform,
108	114		PrePass,
109	115		UvTransform,
110	116		} from './runtime/output-stage/output-stage.js';
111	117
112	118		export { createWaveField, dampingForLifetime } from './runtime/wave-field/wave-field.js';
113	119		export type {
114	120		WaveField,
115	121		WaveFieldStroke,
116	122		WaveFieldTuning,
117	123		} from './runtime/wave-field/wave-field.js';
118	124
119	125		export { createTexturePass } from './runtime/texture-pass/texture-pass.js';
120	126		export type { TexturePass, TexturePassOptions } from './runtime/texture-pass/texture-pass.js';
121	127
122	128		export { createPauseWatcher } from './runtime/pause-watcher/pause-watcher.js';
123	129		export type { PauseWatcher } from './runtime/pause-watcher/pause-watcher.js';
124	130		export type { SchedulerTick, SchedulerClient } from './runtime/frame-scheduler/frame-scheduler.js';

1 file 48 lines added, 0 removed0 of 1 file reviewed

packages/shaders/src/primitives/flute-surface/flute-surface.ts

packages/shaders/src/primitives/flute-surface/flute-surface.tsNew fileReviewed

Base line	Head line	Change	Code

	1	added	// The surface of fluted glass: identical flutes side by side, each a strip
	2	added	// of glass that bends what is under it. For a point, this works out how
	3	added	// steep the glass is and how far it moves the image, in one call, so light
	4	added	// read from the slope lands where the image bends. FlutedGlass bends and
	5	added	// lights the scene with it, and Mode 2 users call it on their own coordinates.
	6	added	import type { ShaderNodeObject } from 'three/tsl';
	7	added	import {
	8	added	abs,
	9	added	clamp,
	10	added	cos,
	11	added	dot,
	12	added	float,
	13	added	fract,
	14	added	fwidth,
	15	added	max,
	16	added	mix,
	17	added	pow,
	18	added	select,
	19	added	sin,
	20	added	smoothstep,
	21	added	vec2,
	22	added	} from 'three/tsl';
	23	added	import type { Node } from 'three/webgpu';
	24	added
	25	added	import type { TSLNode } from '../color-ramp/color-ramp.js';
	26	added
	27	added	export interface FluteSurfaceOptions {
	28	added	/**
	29	added	* The width of one flute, in the units of `position`. Values near 0 clamp
	30	added	* to a tiny width rather than dividing by zero. Default 40.
	31	added	*/
	32	added	fluteWidth?: TSLNode \| number;
	33	added	/**
	34	added	* The direction the flutes run, in degrees counterclockwise from the
	35	added	* position's +x axis with y up: 0 runs them left to right and 90 runs them
	36	added	* bottom to top, the degrees LinearGradient's angle uses. Default 90,
	37	added	* vertical flutes.
	38	added	*/
	39	added	angle?: TSLNode \| number;
	40	added	/**
	41	added	* How far the glass moves the image, in half flute widths per unit of
	42	added	* slope. 0 leaves it in place. At 1, a groove shows the image half a flute
	43	added	* width away, so each flute shows a copy of twice its own width, squeezed.
	44	added	* Default 1.
	45	added	*/
	46	added	refraction?: TSLNode \| number;
	47	added	/**
	48	added	* The shape of each flute seen from its end, from 0 to 1. 0 is a pointed
	49	added	* prism, two flat faces meeting at a ridge. 0.5 is a round lens. 1 is a
	50	added	* flat top with steep walls. Values between give the shapes between, and
	51	added	* values outside 0 to 1 clamp. Default 0.5.
	52	added	*/
	53	added	crossSection?: TSLNode \| number;
	54	added	}
	55	added
	56	added	export interface FluteSurfaceResult {
	57	added	/**
	58	added	* How far to move the point before you sample the image under the glass,
	59	added	* as a vector in the units and frame of `position`. Add it to `position`.
	60	added	*/
	61	added	bend: ShaderNodeObject<Node>;
	62	added	/**
	63	added	* How steep the glass is, as a vector in the frame of `position`. It
	64	added	* points across the flute, away from the flute's center, and its length
	65	added	* runs from 0 at the center to 1 at a groove.
	66	added	*/
	67	added	slope: ShaderNodeObject<Node>;
	68	added	/**
	69	added	* How far the point sits from its flute's center, from 0 at the center to
	70	added	* 1 at a groove, whatever the cross-section. Unlike the slope it skips the
	71	added	* groove smoothing, so it reaches 1 at a groove from both sides with no
	72	added	* dip. Shading meant to be darkest on the groove reads this.
	73	added	*/
	74	added	fromCenter: ShaderNodeObject<Node>;
	75	added	/**
	76	added	* How steep the glass is, from 0 where it is flat to 1 at a groove. It is
	77	added	* the slope's length without the groove smoothing, so like `fromCenter` it
	78	added	* reaches 1 at a groove from both sides, where the slope dips to 0.
	79	added	* Shading meant to follow the shape of the glass reads this.
	80	added	*/
	81	added	steepness: ShaderNodeObject<Node>;
	82	added	}
	83	added
	84	added	// ---------------------------------------------
	85	added	// Feel constants (tuned by eye at the build's visual gates)
	86	added	// ---------------------------------------------
	87	added	// The slope's exponent at each end of the cross-section dial. A cross-section
	88	added	// of 0.5 always has an exponent of 1. Lower PRISM_EXPONENT sharpens the
	89	added	// prism's faces toward perfectly flat, and higher FLAT_EXPONENT flattens the
@@ -0,0 +90,10 @@
	90	added	// top and steepens the walls.
	91	added	const PRISM_EXPONENT = 1 / 16;
	92	added	const FLAT_EXPONENT = 16;
	93	added	// How many screen pixels each groove and the prism's ridge smooth over on
	94	added	// either side. 0 brings back the stair steps; above about 2 the grooves read
	95	added	// as soft blurs rather than sharp breaks.
	96	added	const GROOVE_SMOOTHING = 1;
	97	added
	98	added	/**
	99	added	* The bend and slope of fluted glass at `position`. A flute's center sits on

	100	added	* the position's origin, so center the position where the middle flute
	101	added	* should go. Call it from a fragment shader: it smooths each groove over the
	102	added	* screen-space rate of change of `position`, which only a fragment shader
	103	added	* can measure.
	104	added	*
	105	added	* @param position — Vec2 TSL node in any units with y up, such as `uv()`
	106	added	* scaled to pixels. `fluteWidth` and the returned bend share its units.
	107	added	*/
	108	added	export function fluteSurface(
	109	added	position: TSLNode,
	110	added	options: FluteSurfaceOptions = {},
	111	added	): FluteSurfaceResult {
	112	added	const fluteWidth = max(float(options.fluteWidth ?? 40), 1e-4);
	113	added	const angle = float(options.angle ?? 90);
	114	added	const refraction = float(options.refraction ?? 1);
	115	added	const crossSection = clamp(float(options.crossSection ?? 0.5), 0, 1);
	116	added
	117	added	// ---------------------------------------------
	118	added	// The direction across the flutes
	119	added	// ---------------------------------------------
	120	added	// The flutes run along (cos, sin) of the angle. Across is that direction
	121	added	// turned a quarter turn clockwise, (sin, -cos), so at the default 90
	122	added	// degrees it is (1, 0): across runs left to right over vertical flutes.
	123	added	const angleRadians = angle.mul(Math.PI / 180);
	124	added	const across = vec2(sin(angleRadians), cos(angleRadians).negate());
	125	added
	126	added	// ---------------------------------------------
	127	added	// Repeating space: which part of which flute
	128	added	// ---------------------------------------------
	129	added	// dot() projects the position onto the across direction: its signed
	130	added	// distance across the flutes, in the position's units. Dividing by the
	131	added	// width counts that distance in flutes. The +0.5 below centers a flute on
	132	added	// every whole number, so 2.25 lies a quarter flute right of the center of
	133	added	// flute 2, halfway to its groove.
	134	added	//
	135	added	// fract() keeps only the part after the decimal point, which is how a
	136	added	// shader repeats space: every flute gets the same 0-to-1 ramp, whatever
	137	added	// its number. The +0.5 shifts the ramp so its middle, not its start, lands
	138	added	// on the origin, which puts a flute's center there. At each groove the
	139	added	// ramp jumps from 1 back to 0, and that jump is what breaks the image into
	140	added	// strips.
	141	added	const flutePhase = dot(position, across).div(fluteWidth);
	142	added	const ramp = fract(flutePhase.add(0.5));
	143	added
	144	added	// The distance from the center, before any smoothing. ramp*2-1 runs from
	145	added	// -1 at one groove to 1 at the other, and abs() folds it to run 0 to 1
	146	added	// from the center out on both sides. Where the ramp jumps from 1 to 0 at a
@@ -0,0 +147,38 @@
	147	added	// groove, this goes from 1 to 1, so it has no jump to smooth.
	148	added	const fromCenter = abs(ramp.mul(2).sub(1));
	149	added
	150	added	// ---------------------------------------------
	151	added	// Clean grooves: antialiasing from the screen-space rate of change
	152	added	// ---------------------------------------------
	153	added	// The scene has no MSAA, the GPU's own edge smoothing, so a jump in the
	154	added	// ramp lands on whole pixels and a slanted groove draws a staircase. The
	155	added	// fix is to replace the jump with a slope exactly one pixel wide, and to
	156	added	// know how wide a pixel is in flutes, the shader asks the GPU.
	157	added	//
	158	added	// The GPU shades pixels in 2x2 blocks, so each pixel can read how much a
	159	added	// value changes to its neighbor. fwidth() adds that change across and
	160	added	// down, so fwidth(flutePhase) is how many flutes one pixel spans: 0.025 for
	161	added	// a 40-pixel flute, and 0.125 for an 8-pixel one. It is taken of the phase
	162	added	// before fract(), which has no jump in it to throw the measure off. The max
	163	added	// keeps the band from shrinking to nothing, which would divide by zero in
	164	added	// smoothstep() when a flute is very wide.
	165	added	const rampPerPixel = max(fwidth(flutePhase).mul(GROOVE_SMOOTHING), 1e-5);
	166	added
	167	added	// Paper's smoothFract. distanceToGroove is 0 at a groove and falls to -0.5
	168	added	// at the flute's center. smoothstep() turns the last pixel before a groove
	169	added	// into a blend that climbs from 0 to 0.5, so mix() eases the ramp toward
	170	added	// its mirror image, 1 - ramp, and the two meet at 0.5. Both sides of a
	171	added	// groove now arrive at 0.5, the flute's center, where the glass is flat, so
	172	added	// the groove pixel shows the image right at the groove instead of either
	173	added	// flute's bent copy. Away from the grooves the blend is 0 and the ramp is
	174	added	// unchanged.
	175	added	const distanceToGroove = abs(ramp.sub(0.5)).sub(0.5);
	176	added	const grooveBlend = smoothstep(rampPerPixel.negate(), rampPerPixel, distanceToGroove);
	177	added	const smoothRamp = mix(ramp, ramp.oneMinus(), grooveBlend);
	178	added
	179	added	// *2-1 stretches the ramp to run from -1 at one groove, through 0 at the
	180	added	// center, to 1 at the other groove.
	181	added	const fluteOffset = smoothRamp.mul(2).sub(1);
	182	added
	183	added	// ---------------------------------------------
	184	added	// The cross-section: picking an exponent from the dial

	185	added	// ---------------------------------------------
	186	added	// The dial picks the exponent that shapes the slope below, on a doubling
	187	added	// scale. dialFromRound runs from -1 at a prism, through 0 at round, to 1 at
	188	added	// flat. The prism half raises PRISM_EXPONENT to its distance from round,
	189	added	// and the flat half raises FLAT_EXPONENT the same way. At round both give
	190	added	// 1, since anything to the power 0 is 1, so 0.5 is exactly round whatever
	191	added	// the ends are. Each equal step of the dial multiplies the exponent by the
	192	added	// same factor, so a sweep morphs the shape evenly. With ends of 1/16 and
	193	added	// 16, the exponent doubles every eighth of the dial.
	194	added	const dialFromRound = crossSection.mul(2).sub(1);
	195	added	const exponentEnd = select(
	196	added	dialFromRound.lessThan(0),
	197	added	float(PRISM_EXPONENT),
	198	added	float(FLAT_EXPONENT),
	199	added	);
	200	added	const exponent = pow(exponentEnd, abs(dialFromRound));
	201	added
	202	added	// ---------------------------------------------
	203	added	// The slope: shaping a curve with an exponent
	204	added	// ---------------------------------------------
	205	added	// The slope's size is the distance from the flute's center, \|offset\|,
	206	added	// raised to the exponent. Because that distance runs from 0 to 1, a power
	207	added	// bends the curve between without moving its ends: the center stays flat
	208	added	// and the groove stays steepest.
	209	added	//
	210	added	// - An exponent of 1 leaves a straight line, so the slope grows in step
	211	added	// with the distance: a round lens. Strictly that draws a parabola, a
	212	added	// shallow stand-in for a circular arc, whose slope would shoot up near
	213	added	// the grooves.
	214	added	// - Below 1 the power lifts small values toward 1. x^(1/16) is already
	215	added	// 0.65 at x = 0.001 and 0.96 at 0.5, so the slope jumps to nearly full
	216	added	// just off the center and stays there: two flat faces meeting at a
	217	added	// ridge, a prism.
	218	added	// - Above 1 the power presses small values toward 0. x^16 is 0.00002 at
	219	added	// 0.5 and reaches 0.5 only at 0.96, so the glass stays flat across the
	220	added	// top and turns steep right at each groove.
	221	added	//
	222	added	// pow() needs a base of 0 or more, so the power is taken of fromCenter,
	223	added	// the distance without the groove smoothing, and the offset carries the
	224	added	// sign: offset * distance^(exponent - 1). Away from the grooves the offset
	225	added	// is ±distance, so that works out to ±distance^exponent, the curve above.
	226	added	// On a groove's own pixel the distance is about 1, and 1 to any power is
	227	added	// 1, so the slope follows the smoothed offset through 0 over the same
	228	added	// pixel whatever the exponent. Raising the smoothed offset itself would
	229	added	// undo the smoothing on a prism: x^(1/16) is still 0.82 at x = 0.045, so
	230	added	// the slope would stay near full until a sliver from the groove, and the
	231	added	// grooves would staircase again. The max() keeps the base off 0 at the
	232	added	// center, where a prism's negative power, exponent - 1, would shoot to
	233	added	// infinity. Pointing the result along `across` turns it into a vector, so
	234	added	// on either side of the center the slope points toward the nearer groove.
	235	added	const shapedSlope = fluteOffset.mul(pow(max(fromCenter, 1e-5), exponent.sub(1)));
	236	added
	237	added	// A prism's ridge jumps too. Just off the center x^(1/16) leaps from 0 to
	238	added	// about 0.65 inside a sliver much thinner than a pixel, so the two faces
	239	added	// meet in a staircase of their own. The same pixel width, doubled because
	240	added	// the offset runs twice as fast as the ramp, fades the slope in over the
	241	added	// first pixel either side of the center. On a round or flat flute the
	242	added	// slope there is already close to 0, so the fade changes nothing you can
	243	added	// see. It also softens the groove pixel, where the smoothed offset passes
	244	added	// through 0 on its way between flutes.
	245	added	const ridgeBlend = smoothstep(0, rampPerPixel.mul(2), abs(fluteOffset));
	246	added	const slopeAmount = shapedSlope.mul(ridgeBlend);
	247	added	const slope = across.mul(slopeAmount);
	248	added
	249	added	// The steepness takes the same power of fromCenter rather than of the
	250	added	// smoothed offset. Away from the grooves the two are equal, so it is the
	251	added	// slope's length there. On a groove's own pixel, where the smoothing pulls
	252	added	// the slope through 0, it keeps climbing toward 1. The ridge fade reads
	253	added	// fromCenter too, so it fades only at the center and never at a groove.
	254	added	const steepness = pow(fromCenter, exponent).mul(smoothstep(0, rampPerPixel.mul(2), fromCenter));
	255	added
	256	added	// ---------------------------------------------
	257	added	// The bend: refraction as a sample offset
	258	added	// ---------------------------------------------
	259	added	// Glass doesn't move pixels. It changes which point of the image behind it
	260	added	// reaches the eye, so a shader bends an image by sampling it somewhere
	261	added	// else. The bend is the slope times the dial, in half flute widths. On a
	262	added	// round flute at a refraction of 1, a point at offset x from the center
	263	added	// samples at 2x, so the flute's own width shows twice that width of image:
	264	added	// a squeezed copy of what lies right under it. The bend points away from
	265	added	// the center on both sides, which is what squeezes rather than stretches.
	266	added	// Other cross-sections spread the same span unevenly. A prism shifts each
	267	added	// face's half of the copy outward whole, and a flat top barely moves its
	268	added	// middle and crams the rest against the walls.
	269	added	const bend = slope.mul(refraction).mul(fluteWidth.mul(0.5));
	270	added
	271	added	return { bend, slope, fromCenter, steepness };
	272	added	}

1 file 90 lines added, 0 removed0 of 1 file reviewed

packages/shaders/src/primitives/flute-surface/flute-surface.ts

packages/shaders/src/primitives/flute-surface/flute-surface.tsNew fileReviewed

Base line	Head line	Change	Code

	1	added	// The surface of fluted glass: identical flutes side by side, each a strip
	2	added	// of glass that bends what is under it. For a point, this works out how
	3	added	// steep the glass is and how far it moves the image, in one call, so light
	4	added	// read from the slope lands where the image bends. FlutedGlass bends and
	5	added	// lights the scene with it, and Mode 2 users call it on their own coordinates.
	6	added	import type { ShaderNodeObject } from 'three/tsl';
	7	added	import {
	8	added	abs,
	9	added	clamp,
	10	added	cos,
	11	added	dot,
	12	added	float,
	13	added	fract,
	14	added	fwidth,
	15	added	max,
	16	added	mix,
	17	added	pow,
	18	added	select,
	19	added	sin,
	20	added	smoothstep,
	21	added	vec2,
	22	added	} from 'three/tsl';
	23	added	import type { Node } from 'three/webgpu';
	24	added
	25	added	import type { TSLNode } from '../color-ramp/color-ramp.js';
	26	added
	27	added	export interface FluteSurfaceOptions {
	28	added	/**
	29	added	* The width of one flute, in the units of `position`. Values near 0 clamp
	30	added	* to a tiny width rather than dividing by zero. Default 40.
	31	added	*/
	32	added	fluteWidth?: TSLNode \| number;
	33	added	/**
	34	added	* The direction the flutes run, in degrees counterclockwise from the
	35	added	* position's +x axis with y up: 0 runs them left to right and 90 runs them
	36	added	* bottom to top, the degrees LinearGradient's angle uses. Default 90,
	37	added	* vertical flutes.
	38	added	*/
	39	added	angle?: TSLNode \| number;
	40	added	/**
	41	added	* How far the glass moves the image, in half flute widths per unit of
	42	added	* slope. 0 leaves it in place. At 1, a groove shows the image half a flute
	43	added	* width away, so each flute shows a copy of twice its own width, squeezed.
	44	added	* Default 1.
	45	added	*/
	46	added	refraction?: TSLNode \| number;
	47	added	/**
	48	added	* The shape of each flute seen from its end, from 0 to 1. 0 is a pointed
	49	added	* prism, two flat faces meeting at a ridge. 0.5 is a round lens. 1 is a
	50	added	* flat top with steep walls. Values between give the shapes between, and
	51	added	* values outside 0 to 1 clamp. Default 0.5.
	52	added	*/
	53	added	crossSection?: TSLNode \| number;
	54	added	}
	55	added
	56	added	export interface FluteSurfaceResult {
	57	added	/**
	58	added	* How far to move the point before you sample the image under the glass,
	59	added	* as a vector in the units and frame of `position`. Add it to `position`.
	60	added	*/
	61	added	bend: ShaderNodeObject<Node>;
	62	added	/**
	63	added	* How steep the glass is, as a vector in the frame of `position`. It
	64	added	* points across the flute, away from the flute's center, and its length
	65	added	* runs from 0 at the center to 1 at a groove.
	66	added	*/
	67	added	slope: ShaderNodeObject<Node>;
	68	added	/**
	69	added	* How far the point sits from its flute's center, from 0 at the center to
	70	added	* 1 at a groove, whatever the cross-section. Unlike the slope it skips the
	71	added	* groove smoothing, so it reaches 1 at a groove from both sides with no
	72	added	* dip. Shading meant to be darkest on the groove reads this.
	73	added	*/
	74	added	fromCenter: ShaderNodeObject<Node>;
	75	added	/**
	76	added	* How steep the glass is, from 0 where it is flat to 1 at a groove. It is
	77	added	* the slope's length without the groove smoothing, so like `fromCenter` it
	78	added	* reaches 1 at a groove from both sides, where the slope dips to 0.
	79	added	* Shading meant to follow the shape of the glass reads this.
	80	added	*/
	81	added	steepness: ShaderNodeObject<Node>;
	82	added	}
	83	added
@@ -0,0 +84,12 @@
	84	added	// ---------------------------------------------
	85	added	// Feel constants (tuned by eye at the build's visual gates)
	86	added	// ---------------------------------------------
	87	added	// The slope's exponent at each end of the cross-section dial. A cross-section
	88	added	// of 0.5 always has an exponent of 1. Lower PRISM_EXPONENT sharpens the
	89	added	// prism's faces toward perfectly flat, and higher FLAT_EXPONENT flattens the
	90	added	// top and steepens the walls.
	91	added	const PRISM_EXPONENT = 1 / 16;
	92	added	const FLAT_EXPONENT = 16;
	93	added	// How many screen pixels each groove and the prism's ridge smooth over on
	94	added	// either side. 0 brings back the stair steps; above about 2 the grooves read
	95	added	// as soft blurs rather than sharp breaks.

	96	added	const GROOVE_SMOOTHING = 1;
	97	added
	98	added	/**
	99	added	* The bend and slope of fluted glass at `position`. A flute's center sits on
	100	added	* the position's origin, so center the position where the middle flute
	101	added	* should go. Call it from a fragment shader: it smooths each groove over the
	102	added	* screen-space rate of change of `position`, which only a fragment shader
	103	added	* can measure.
	104	added	*
	105	added	* @param position — Vec2 TSL node in any units with y up, such as `uv()`
	106	added	* scaled to pixels. `fluteWidth` and the returned bend share its units.
	107	added	*/
	108	added	export function fluteSurface(
	109	added	position: TSLNode,
	110	added	options: FluteSurfaceOptions = {},
	111	added	): FluteSurfaceResult {
	112	added	const fluteWidth = max(float(options.fluteWidth ?? 40), 1e-4);
	113	added	const angle = float(options.angle ?? 90);
	114	added	const refraction = float(options.refraction ?? 1);
	115	added	const crossSection = clamp(float(options.crossSection ?? 0.5), 0, 1);
	116	added
	117	added	// ---------------------------------------------
	118	added	// The direction across the flutes
	119	added	// ---------------------------------------------
	120	added	// The flutes run along (cos, sin) of the angle. Across is that direction
	121	added	// turned a quarter turn clockwise, (sin, -cos), so at the default 90
	122	added	// degrees it is (1, 0): across runs left to right over vertical flutes.
	123	added	const angleRadians = angle.mul(Math.PI / 180);
	124	added	const across = vec2(sin(angleRadians), cos(angleRadians).negate());
	125	added
	126	added	// ---------------------------------------------
	127	added	// Repeating space: which part of which flute
	128	added	// ---------------------------------------------
	129	added	// dot() projects the position onto the across direction: its signed
	130	added	// distance across the flutes, in the position's units. Dividing by the
	131	added	// width counts that distance in flutes. The +0.5 below centers a flute on
	132	added	// every whole number, so 2.25 lies a quarter flute right of the center of
	133	added	// flute 2, halfway to its groove.
	134	added	//
	135	added	// fract() keeps only the part after the decimal point, which is how a
	136	added	// shader repeats space: every flute gets the same 0-to-1 ramp, whatever
	137	added	// its number. The +0.5 shifts the ramp so its middle, not its start, lands
	138	added	// on the origin, which puts a flute's center there. At each groove the
	139	added	// ramp jumps from 1 back to 0, and that jump is what breaks the image into
	140	added	// strips.
	141	added	const flutePhase = dot(position, across).div(fluteWidth);
	142	added	const ramp = fract(flutePhase.add(0.5));
	143	added
	144	added	// The distance from the center, before any smoothing. ramp*2-1 runs from
	145	added	// -1 at one groove to 1 at the other, and abs() folds it to run 0 to 1
	146	added	// from the center out on both sides. Where the ramp jumps from 1 to 0 at a
	147	added	// groove, this goes from 1 to 1, so it has no jump to smooth.
	148	added	const fromCenter = abs(ramp.mul(2).sub(1));
	149	added
	150	added	// ---------------------------------------------
	151	added	// Clean grooves: antialiasing from the screen-space rate of change
	152	added	// ---------------------------------------------
	153	added	// The scene has no MSAA, the GPU's own edge smoothing, so a jump in the
	154	added	// ramp lands on whole pixels and a slanted groove draws a staircase. The
	155	added	// fix is to replace the jump with a slope exactly one pixel wide, and to
	156	added	// know how wide a pixel is in flutes, the shader asks the GPU.
	157	added	//
	158	added	// The GPU shades pixels in 2x2 blocks, so each pixel can read how much a
	159	added	// value changes to its neighbor. fwidth() adds that change across and
	160	added	// down, so fwidth(flutePhase) is how many flutes one pixel spans: 0.025 for
	161	added	// a 40-pixel flute, and 0.125 for an 8-pixel one. It is taken of the phase
	162	added	// before fract(), which has no jump in it to throw the measure off. The max
	163	added	// keeps the band from shrinking to nothing, which would divide by zero in
	164	added	// smoothstep() when a flute is very wide.
	165	added	const rampPerPixel = max(fwidth(flutePhase).mul(GROOVE_SMOOTHING), 1e-5);
	166	added
	167	added	// Paper's smoothFract. distanceToGroove is 0 at a groove and falls to -0.5
	168	added	// at the flute's center. smoothstep() turns the last pixel before a groove
	169	added	// into a blend that climbs from 0 to 0.5, so mix() eases the ramp toward
	170	added	// its mirror image, 1 - ramp, and the two meet at 0.5. Both sides of a
	171	added	// groove now arrive at 0.5, the flute's center, where the glass is flat, so
	172	added	// the groove pixel shows the image right at the groove instead of either
	173	added	// flute's bent copy. Away from the grooves the blend is 0 and the ramp is
	174	added	// unchanged.
	175	added	const distanceToGroove = abs(ramp.sub(0.5)).sub(0.5);
	176	added	const grooveBlend = smoothstep(rampPerPixel.negate(), rampPerPixel, distanceToGroove);
	177	added	const smoothRamp = mix(ramp, ramp.oneMinus(), grooveBlend);
	178	added
	179	added	// *2-1 stretches the ramp to run from -1 at one groove, through 0 at the
@@ -0,0 +180,78 @@
	180	added	// center, to 1 at the other groove.
	181	added	const fluteOffset = smoothRamp.mul(2).sub(1);
	182	added
	183	added	// ---------------------------------------------
	184	added	// The cross-section: picking an exponent from the dial
	185	added	// ---------------------------------------------
	186	added	// The dial picks the exponent that shapes the slope below, on a doubling
	187	added	// scale. dialFromRound runs from -1 at a prism, through 0 at round, to 1 at
	188	added	// flat. The prism half raises PRISM_EXPONENT to its distance from round,
	189	added	// and the flat half raises FLAT_EXPONENT the same way. At round both give
	190	added	// 1, since anything to the power 0 is 1, so 0.5 is exactly round whatever
	191	added	// the ends are. Each equal step of the dial multiplies the exponent by the
	192	added	// same factor, so a sweep morphs the shape evenly. With ends of 1/16 and
	193	added	// 16, the exponent doubles every eighth of the dial.
	194	added	const dialFromRound = crossSection.mul(2).sub(1);
	195	added	const exponentEnd = select(
	196	added	dialFromRound.lessThan(0),
	197	added	float(PRISM_EXPONENT),
	198	added	float(FLAT_EXPONENT),
	199	added	);
	200	added	const exponent = pow(exponentEnd, abs(dialFromRound));
	201	added
	202	added	// ---------------------------------------------
	203	added	// The slope: shaping a curve with an exponent
	204	added	// ---------------------------------------------
	205	added	// The slope's size is the distance from the flute's center, \|offset\|,
	206	added	// raised to the exponent. Because that distance runs from 0 to 1, a power
	207	added	// bends the curve between without moving its ends: the center stays flat
	208	added	// and the groove stays steepest.
	209	added	//
	210	added	// - An exponent of 1 leaves a straight line, so the slope grows in step
	211	added	// with the distance: a round lens. Strictly that draws a parabola, a
	212	added	// shallow stand-in for a circular arc, whose slope would shoot up near
	213	added	// the grooves.
	214	added	// - Below 1 the power lifts small values toward 1. x^(1/16) is already
	215	added	// 0.65 at x = 0.001 and 0.96 at 0.5, so the slope jumps to nearly full
	216	added	// just off the center and stays there: two flat faces meeting at a
	217	added	// ridge, a prism.
	218	added	// - Above 1 the power presses small values toward 0. x^16 is 0.00002 at
	219	added	// 0.5 and reaches 0.5 only at 0.96, so the glass stays flat across the
	220	added	// top and turns steep right at each groove.
	221	added	//
	222	added	// pow() needs a base of 0 or more, so the power is taken of fromCenter,
	223	added	// the distance without the groove smoothing, and the offset carries the
	224	added	// sign: offset * distance^(exponent - 1). Away from the grooves the offset
	225	added	// is ±distance, so that works out to ±distance^exponent, the curve above.
	226	added	// On a groove's own pixel the distance is about 1, and 1 to any power is
	227	added	// 1, so the slope follows the smoothed offset through 0 over the same
	228	added	// pixel whatever the exponent. Raising the smoothed offset itself would
	229	added	// undo the smoothing on a prism: x^(1/16) is still 0.82 at x = 0.045, so
	230	added	// the slope would stay near full until a sliver from the groove, and the
	231	added	// grooves would staircase again. The max() keeps the base off 0 at the
	232	added	// center, where a prism's negative power, exponent - 1, would shoot to
	233	added	// infinity. Pointing the result along `across` turns it into a vector, so
	234	added	// on either side of the center the slope points toward the nearer groove.
	235	added	const shapedSlope = fluteOffset.mul(pow(max(fromCenter, 1e-5), exponent.sub(1)));
	236	added
	237	added	// A prism's ridge jumps too. Just off the center x^(1/16) leaps from 0 to
	238	added	// about 0.65 inside a sliver much thinner than a pixel, so the two faces
	239	added	// meet in a staircase of their own. The same pixel width, doubled because
	240	added	// the offset runs twice as fast as the ramp, fades the slope in over the
	241	added	// first pixel either side of the center. On a round or flat flute the
	242	added	// slope there is already close to 0, so the fade changes nothing you can
	243	added	// see. It also softens the groove pixel, where the smoothed offset passes
	244	added	// through 0 on its way between flutes.
	245	added	const ridgeBlend = smoothstep(0, rampPerPixel.mul(2), abs(fluteOffset));
	246	added	const slopeAmount = shapedSlope.mul(ridgeBlend);
	247	added	const slope = across.mul(slopeAmount);
	248	added
	249	added	// The steepness takes the same power of fromCenter rather than of the
	250	added	// smoothed offset. Away from the grooves the two are equal, so it is the
	251	added	// slope's length there. On a groove's own pixel, where the smoothing pulls
	252	added	// the slope through 0, it keeps climbing toward 1. The ridge fade reads
	253	added	// fromCenter too, so it fades only at the center and never at a groove.
	254	added	const steepness = pow(fromCenter, exponent).mul(smoothstep(0, rampPerPixel.mul(2), fromCenter));
	255	added
	256	added	// ---------------------------------------------
	257	added	// The bend: refraction as a sample offset

	258	added	// ---------------------------------------------
	259	added	// Glass doesn't move pixels. It changes which point of the image behind it
	260	added	// reaches the eye, so a shader bends an image by sampling it somewhere
	261	added	// else. The bend is the slope times the dial, in half flute widths. On a
	262	added	// round flute at a refraction of 1, a point at offset x from the center
	263	added	// samples at 2x, so the flute's own width shows twice that width of image:
	264	added	// a squeezed copy of what lies right under it. The bend points away from
	265	added	// the center on both sides, which is what squeezes rather than stretches.
	266	added	// Other cross-sections spread the same span unevenly. A prism shifts each
	267	added	// face's half of the copy outward whole, and a flat top barely moves its
	268	added	// middle and crams the rest against the walls.
	269	added	const bend = slope.mul(refraction).mul(fluteWidth.mul(0.5));
	270	added
	271	added	return { bend, slope, fromCenter, steepness };
	272	added	}

1 file 95 lines added, 0 removed0 of 1 file reviewed

packages/shaders/src/components/fluted-glass/shader.tsx

packages/shaders/src/components/fluted-glass/shader.tsxNew fileReviewed

Base line	Head line	Change	Code

	1	added	'use client';
	2	added
	3	added	// The fluted glass's GPU half: a UV warp that bends the image beneath the
	4	added	// glass, and a color transform that lights it, both reading one surface from
	5	added	// the engine's fluteSurface primitive. This file converts between the pass's
	6	added	// coordinate and the primitive's pixels. The wrapper (./fluted-glass.tsx)
	7	added	// supplies the props.
	8	added	import { useEffect, useMemo } from 'react';
	9	added
	10	added	import type { ShaderNodeObject } from 'three/tsl';
	11	added	import {
	12	added	abs,
	13	added	cos,
	14	added	dot,
	15	added	fract,
	16	added	max,
	17	added	normalize,
	18	added	pow,
	19	added	screenSize,
	20	added	sin,
	21	added	smoothstep,
	22	added	uniform,
	23	added	uv,
	24	added	vec2,
	25	added	vec3,
	26	added	vec4,
	27	added	} from 'three/tsl';
	28	added	import { type Node, Vector3 } from 'three/webgpu';
	29	added
	30	added	import { fluteSurface } from '../../engine.js';
	31	added	import type { AnimatableProp } from '../../react/hooks/animatable-signal/animatable-signal.js';
	32	added	import { useAnimatableUniform } from '../../react/hooks/use-animatable-uniform/use-animatable-uniform.js';
	33	added	import { useBasePassUv } from '../../react/hooks/use-base-pass-uv/use-base-pass-uv.js';
	34	added	import { usePostProcessPass } from '../../react/hooks/use-overlay-pass/use-overlay-pass.js';
	35	added	import { useResize } from '../../react/hooks/use-resize/use-resize.js';
	36	added	import { useShaderContext } from '../../react/hooks/use-shader-context/use-shader-context.js';
	37	added	import { parseColor } from '../shared/color.js';
	38	added
	39	added	export interface FlutedGlassShaderProps {
	40	added	/**
	41	added	* The width of one flute, in CSS pixels. Accepts a static value or an
	42	added	* animation signal.
	43	added	*/
	44	added	fluteWidth: AnimatableProp<number>;
	45	added	/**
	46	added	* The direction the flutes run, in degrees on screen: 0 runs them left to
	47	added	* right and 90 runs them bottom to top. Accepts a static value or an
	48	added	* animation signal.
	49	added	*/
	50	added	angle: AnimatableProp<number>;
	51	added	/**
	52	added	* How far each flute bends the image beneath it, in half flute widths at
	53	added	* the steepest part of the glass. 0 leaves the image unchanged. Accepts a
	54	added	* static value or an animation signal.
	55	added	*/
	56	added	refraction: AnimatableProp<number>;
	57	added	/**
	58	added	* The shape of each flute seen from its end, from 0 to 1: 0 is a prism,
	59	added	* 0.5 is round, and 1 is a flat top with steep walls. The wrapper turns a
	60	added	* name into its point on this dial. Accepts a static value or an animation
	61	added	* signal.
	62	added	*/
	63	added	crossSection: AnimatableProp<number>;
	64	added	/**
	65	added	* Where the light comes from, in degrees counterclockwise on screen, the
	66	added	* way `angle` turns: 0 from the right, 90 from above, 180 from the left,
	67	added	* and 270 from below. Accepts a static value or an animation signal.
	68	added	*/
	69	added	lightAngle: AnimatableProp<number>;
	70	added	/**
	71	added	* How bright the highlight is, from 0 to 1, where 1 adds the full
	72	added	* `highlightColor` at the brightest point. Accepts a static value or an
	73	added	* animation signal.
	74	added	*/
	75	added	highlight: AnimatableProp<number>;
	76	added	/** The highlight's color: hex, `oklch()`, or `oklab()`. */
	77	added	highlightColor: string;
	78	added	/**
	79	added	* How dark the glass gets at each groove, from 0 to 1, where 1 is black
	80	added	* right on the groove. Accepts a static value or an animation signal.
	81	added	*/
	82	added	shadow: AnimatableProp<number>;
	83	added	}
	84	added
	85	added	// ---------------------------------------------
	86	added	// Feel constants (tuned by eye at the build's visual gates)
	87	added	// ---------------------------------------------
	88	added	// How high the light sits above the glass, in degrees: 0 skims across it
	89	added	// and 90 shines straight down. A lower light catches walls that lean
	90	added	// further over, so it moves the highlight out toward the grooves.
	91	added	const LIGHT_HEIGHT = 30;
	92	added	const LIGHT_HEIGHT_RADIANS = (LIGHT_HEIGHT * Math.PI) / 180;
	93	added	// The specular exponent. Higher draws a thinner, harder highlight, and
	94	added	// lower spreads it into a soft sheen across the wall.
	95	added	const HIGHLIGHT_SHARPNESS = 32;
	96	added	// How far the shadow can reach in from each groove, as a share of the way to
	97	added	// the flute's center. Within that reach it falls only where the glass is
@@ -0,0 +98,11 @@
	98	added	// steep. 1 lets it reach the center.
	99	added	const SHADOW_WIDTH = 0.5;
	100	added
	101	added	// The pass's frame has y down and the primitive's has y up, so a vector
	102	added	// that crosses between them flips its y.
	103	added	function flipY(vector: ShaderNodeObject<Node>): ShaderNodeObject<Node> {
	104	added	return vector.mul(vec2(1, -1));
	105	added	}
	106	added
	107	added	// ---------------------------------------------
	108	added	// Mirroring at the canvas edge

	109	added	// ---------------------------------------------
	110	added	// Near the canvas edge the bend can point off the canvas, where the scene
	111	added	// texture has nothing. Left alone, the sampler, the GPU unit that reads a
	112	added	// texture, clamps to the edge texel, the texture's outermost pixel, and
	113	added	// repeats it, which draws a smeared strip. This folds the coordinate back
	114	added	// instead, as if the image were mirrored past each edge.
	115	added	//
	116	added	// fract(x / 2) * 2 counts x along a 0-to-2 cycle, and subtracting 1 makes it
	117	added	// run -1 to 1. Its absolute value then falls from 1 to 0 and climbs back,
	118	added	// and 1 minus that rises from 0 to 1 and falls back: a triangle wave. On
	119	added	// 0..1 it returns x unchanged, past 1 it walks back down, so 1.1 reads 0.9,
	120	added	// and below 0 it walks back up, so -0.1 reads 0.1. It works per component.
	121	added	function mirrorOntoCanvas(coordinate: ShaderNodeObject<Node>): ShaderNodeObject<Node> {
@@ -0,0 +122,27 @@
	122	added	return abs(fract(coordinate.div(2)).mul(2).sub(1)).oneMinus();
	123	added	}
	124	added
	125	added	export function FlutedGlassShader({
	126	added	fluteWidth,
	127	added	angle,
	128	added	refraction,
	129	added	crossSection,
	130	added	lightAngle,
	131	added	highlight,
	132	added	highlightColor,
	133	added	shadow,
	134	added	}: FlutedGlassShaderProps) {
	135	added	const shaderContext = useShaderContext();
	136	added
	137	added	// The dials live in uniforms, values the CPU writes and the GPU reads at
	138	added	// each draw, so changing them never rebuilds the output chain.
	139	added	const fluteWidthUniform = useAnimatableUniform(fluteWidth);
	140	added	const angleUniform = useAnimatableUniform(angle);
	141	added	const refractionUniform = useAnimatableUniform(refraction);
	142	added	const crossSectionUniform = useAnimatableUniform(crossSection);
	143	added	const lightAngleUniform = useAnimatableUniform(lightAngle);
	144	added	const highlightUniform = useAnimatableUniform(highlight);
	145	added	const shadowUniform = useAnimatableUniform(shadow);
	146	added
	147	added	// The highlight color decodes once into linear rgb (parseColor reads hex
	148	added	// and the wide-gamut oklch() and oklab() strings). The Vector3 and its

	149	added	// uniform are created once, and the effect below writes each new color
	150	added	// into the Vector3, so a new color never rebuilds the color transform.
	151	added	const highlightColorVector = useMemo(() => new Vector3(1, 1, 1), []);
	152	added	const highlightColorUniform = useMemo(
	153	added	() => uniform(highlightColorVector),
	154	added	[highlightColorVector],
	155	added	);
	156	added
	157	added	useEffect(() => {
	158	added	highlightColorVector.set(...parseColor(highlightColor));
	159	added	// The bare-uniform-write gotcha in docs/agents/tsl.md: a write into the
	160	added	// Vector3 repaints nothing on a static scene by itself.
@@ -0,0 +161,57 @@
	161	added	shaderContext?.scheduler.requestRender();
	162	added	}, [highlightColor, highlightColorVector, shaderContext]);
	163	added
	164	added	// ---------------------------------------------
	165	added	// CSS pixels -> device pixels
	166	added	// ---------------------------------------------
	167	added	// fluteWidth is in CSS pixels so a flute keeps its size on a 1x and a 2x
	168	added	// display, but the warp below counts device pixels. The renderer's pixel
	169	added	// ratio, which respects maxDPR clamping, converts between them; useResize
	170	added	// fires again on monitor moves and browser zoom, when that ratio changes.
	171	added	// Dither builds its ratio the same way.
	172	added	const resize = useResize();
	173	added	// Created once and never replaced: the effect below writes into it, and
	174	added	// the warp depends on the stable wrapper.
	175	added	const pixelRatioUniform = useMemo(
	176	added	() => uniform(resize.get()[2] \|\| 1),
	177	added	// eslint-disable-next-line react-hooks/exhaustive-deps
	178	added	[],
	179	added	);
	180	added
	181	added	useEffect(() => {
	182	added	const apply = () => {
	183	added	const rendererRatio = shaderContext?.renderer.three.getPixelRatio();
	184	added
	185	added	pixelRatioUniform.value =
	186	added	rendererRatio !== undefined && rendererRatio > 0 ? rendererRatio : resize.get()[2] \|\| 1;
	187	added	// A bare uniform write repaints nothing on a static scene, so ask for
	188	added	// a frame (the bare-uniform-write gotcha in docs/agents/tsl.md).
	189	added	shaderContext?.scheduler.requestRender();
	190	added	};
	191	added
	192	added	apply();
	193	added
	194	added	return resize.on('change', apply);
	195	added	}, [resize, pixelRatioUniform, shaderContext]);
	196	added
	197	added	// ---------------------------------------------
	198	added	// The glass at a pixel
	199	added	// ---------------------------------------------
	200	added	// Both passes below start here, so the light lands where the image bends.
	201	added	// `coordinate` is a pass coordinate, [0, 0] at the top-left with y growing
	202	added	// downward. Into the primitive's frame: subtract 0.5 to measure from the
	203	added	// canvas center, so the middle flute sits in the middle of the canvas and
	204	added	// the flutes turn around it as `angle` changes. Times screenSize, the
	205	added	// drawing buffer in device pixels, turns 0..1 into pixels, so a flute is as
	206	added	// wide across a wide canvas as across a tall one. The y flip points y up,
	207	added	// the frame the primitive's angle is measured in.
	208	added	const surfaceAt = (coordinate: ShaderNodeObject<Node>) =>
	209	added	fluteSurface(flipY(coordinate.sub(0.5).mul(screenSize)), {
	210	added	fluteWidth: fluteWidthUniform.mul(pixelRatioUniform),
	211	added	angle: angleUniform,
	212	added	refraction: refractionUniform,
	213	added	crossSection: crossSectionUniform,
	214	added	});
	215	added
	216	added	// ---------------------------------------------
	217	added	// Refraction: bend the scene through the flutes

	218	added	// ---------------------------------------------
	219	added	// A base-pass UV warp: the callback receives the 0..1 coordinate the
	220	added	// rendered scene is about to be sampled at and returns a replacement.
	221	added	useBasePassUv(
	222	added	(coordinate) => {
	223	added	const { bend } = surfaceAt(coordinate);
	224	added
	225	added	// Back out: the bend comes back in device pixels with y up. Flip y
	226	added	// again and divide by the buffer size to get a 0..1 offset in the
	227	added	// pass's frame, then fold anything off the canvas back onto it.
	228	added	const bent = coordinate.add(flipY(bend).div(screenSize));
	229	added
	230	added	return mirrorOntoCanvas(bent);
	231	added	},
	232	added	[fluteWidthUniform, angleUniform, refractionUniform, crossSectionUniform, pixelRatioUniform],
	233	added	);
	234	added
	235	added	// ---------------------------------------------
	236	added	// Lighting: a shadow at the grooves, a highlight on the walls
	237	added	// ---------------------------------------------
	238	added	// A post-process pass: the callback receives each pixel the scene drew,
	239	added	// already bent by the warp above (`input`, rgba), and returns a
	240	added	// replacement. The warp and this pass draw in the same output quad, and
	241	added	// uv() is the pixel's own pass coordinate, so surfaceAt(uv()) is the glass
	242	added	// at this pixel. The warp starts from uv() too while it runs first. A UV
	243	added	// warp mounted before FlutedGlass, such as Dither's, hands the glass its
	244	added	// moved coordinate instead, so there the bend and the light read the
	245	added	// surface at slightly different points. SHA-267 reworks how warps stack.
	246	added	usePostProcessPass(
	247	added	(input) => {
	248	added	const { slope, fromCenter, steepness } = surfaceAt(uv());
	249	added
	250	added	// The shadow. smoothstep() climbs from 0 to 1 over the outer
	251	added	// SHADOW_WIDTH of the way from the center to the groove, so the shade
	252	added	// is 0 across the middle of the flute and full right on the groove.
	253	added	// Times the steepness, it falls only where the glass is steep: a flat
	254	added	// top darkens on its walls and not across its flat middle, and a
	255	added	// prism, steep from ridge to groove, keeps the whole band. Both read
	256	added	// the glass without the groove smoothing, which pulls the slope to 0
	257	added	// on the groove's own pixel and would leave a bright line down the
	258	added	// middle of the dark one. Multiplying darkens without moving alpha,
	259	added	// and a transparent pixel, which holds no color here, stays
	260	added	// transparent.
	261	added	const shade = smoothstep(1 - SHADOW_WIDTH, 1, fromCenter)
	262	added	.mul(steepness)
	263	added	.mul(shadowUniform);
	264	added	const shaded = input.rgb.mul(shade.oneMinus());
	265	added
	266	added	// The light works in the primitive's frame, y up, where the slope
	267	added	// already is and where `angle` turns. Only directions meet in the math
	268	added	// below, so the frame changes nothing but which way the angles run.
	269	added	//
	270	added	// The surface normal: the direction the glass faces, one unit long.
	271	added	// Flat glass faces straight out of the screen, (0, 0, 1). Tilt it by
	272	added	// the slope, and a wall's normal leans the way the wall faces. At a
	273	added	// slope of 1, at a groove, it leans 45 degrees. normalize() scales the
	274	added	// vector back to one unit long.
	275	added	const normal = normalize(vec3(slope, 1));
	276	added
	277	added	// The direction toward the light, one unit long. lightAngle turns it
	278	added	// counterclockwise around the screen, the way `angle` turns the
	279	added	// flutes, and LIGHT_HEIGHT lifts it off the glass: cos(height) of it
	280	added	// lies along the screen and sin(height) points out of it. The height
	281	added	// is fixed, so its cosine and sine are worked out once here rather
	282	added	// than per pixel.
	283	added	const lightRadians = lightAngleUniform.mul(Math.PI / 180);
	284	added	const toLight = vec3(
	285	added	cos(lightRadians).mul(Math.cos(LIGHT_HEIGHT_RADIANS)),
	286	added	sin(lightRadians).mul(Math.cos(LIGHT_HEIGHT_RADIANS)),
	287	added	Math.sin(LIGHT_HEIGHT_RADIANS),
	288	added	);
	289	added
	290	added	// Specular light, the Blinn-Phong way. A mirror sends light from the
	291	added	// light to the eye where its normal points halfway between the two.
	292	added	// The eye looks straight at the screen, from (0, 0, 1), so the
	293	added	// halfway vector is the normalized sum of that and toLight. dot()
	294	added	// of two unit vectors is the cosine of the angle between them: 1
	295	added	// where the normal points exactly halfway, and lower as it turns
	296	added	// away. pow() raises that to HIGHLIGHT_SHARPNESS, which keeps values
	297	added	// near 1 and crushes the rest, so the highlight narrows to a bright
	298	added	// band on the part of each wall that leans toward the light by the
	299	added	// right amount. Flat glass and walls that face away stay dark. max()
	300	added	// keeps pow()'s base from going below 0.
	301	added	const halfway = normalize(toLight.add(vec3(0, 0, 1)));
	302	added	const specular = pow(max(dot(normal, halfway), 0), HIGHLIGHT_SHARPNESS);
	303	added
	304	added	// Added light, scaled by the dial and by the pixel's alpha, as
	305	added	// CursorRipple's shine is: a transparent pixel has nothing for light
	306	added	// to land on. The color multiplies last, as an argument (the
	307	added	// vec-uniform gotcha in docs/agents/tsl.md). Alpha passes through.
	308	added	const light = specular.mul(highlightUniform).mul(input.a).mul(highlightColorUniform);
	309	added
	310	added	return vec4(shaded.add(light), input.a);
	311	added	},
	312	added	[
	313	added	fluteWidthUniform,
	314	added	angleUniform,
	315	added	refractionUniform,
	316	added	crossSectionUniform,
	317	added	pixelRatioUniform,
	318	added	lightAngleUniform,
	319	added	highlightUniform,
	320	added	highlightColorUniform,
	321	added	shadowUniform,
	322	added	],
	323	added	);
	324	added
	325	added	return null;
	326	added	}

2 files 67 lines added, 0 removed0 of 2 files reviewed

packages/shaders/src/primitives/flute-surface/flute-surface.ts
packages/shaders/src/components/fluted-glass/shader.tsx

packages/shaders/src/primitives/flute-surface/flute-surface.tsNew fileReviewed

Base line	Head line	Change	Code

	1	added	// The surface of fluted glass: identical flutes side by side, each a strip
	2	added	// of glass that bends what is under it. For a point, this works out how
	3	added	// steep the glass is and how far it moves the image, in one call, so light
	4	added	// read from the slope lands where the image bends. FlutedGlass bends and
	5	added	// lights the scene with it, and Mode 2 users call it on their own coordinates.
	6	added	import type { ShaderNodeObject } from 'three/tsl';
	7	added	import {
	8	added	abs,
	9	added	clamp,
	10	added	cos,
	11	added	dot,
	12	added	float,
	13	added	fract,
	14	added	fwidth,
	15	added	max,
	16	added	mix,
	17	added	pow,
	18	added	select,
	19	added	sin,
	20	added	smoothstep,
	21	added	vec2,
	22	added	} from 'three/tsl';
	23	added	import type { Node } from 'three/webgpu';
	24	added
	25	added	import type { TSLNode } from '../color-ramp/color-ramp.js';
	26	added
	27	added	export interface FluteSurfaceOptions {
	28	added	/**
	29	added	* The width of one flute, in the units of `position`. Values near 0 clamp
	30	added	* to a tiny width rather than dividing by zero. Default 40.
	31	added	*/
	32	added	fluteWidth?: TSLNode \| number;
	33	added	/**
	34	added	* The direction the flutes run, in degrees counterclockwise from the
	35	added	* position's +x axis with y up: 0 runs them left to right and 90 runs them
	36	added	* bottom to top, the degrees LinearGradient's angle uses. Default 90,
	37	added	* vertical flutes.
	38	added	*/
	39	added	angle?: TSLNode \| number;
	40	added	/**
	41	added	* How far the glass moves the image, in half flute widths per unit of
	42	added	* slope. 0 leaves it in place. At 1, a groove shows the image half a flute
	43	added	* width away, so each flute shows a copy of twice its own width, squeezed.
	44	added	* Default 1.
	45	added	*/
	46	added	refraction?: TSLNode \| number;
	47	added	/**
	48	added	* The shape of each flute seen from its end, from 0 to 1. 0 is a pointed
	49	added	* prism, two flat faces meeting at a ridge. 0.5 is a round lens. 1 is a
	50	added	* flat top with steep walls. Values between give the shapes between, and
	51	added	* values outside 0 to 1 clamp. Default 0.5.
	52	added	*/
	53	added	crossSection?: TSLNode \| number;
	54	added	}
	55	added
	56	added	export interface FluteSurfaceResult {
	57	added	/**
	58	added	* How far to move the point before you sample the image under the glass,
	59	added	* as a vector in the units and frame of `position`. Add it to `position`.
	60	added	*/
	61	added	bend: ShaderNodeObject<Node>;
	62	added	/**
	63	added	* How steep the glass is, as a vector in the frame of `position`. It
	64	added	* points across the flute, away from the flute's center, and its length
	65	added	* runs from 0 at the center to 1 at a groove.
	66	added	*/
	67	added	slope: ShaderNodeObject<Node>;
	68	added	/**
	69	added	* How far the point sits from its flute's center, from 0 at the center to
	70	added	* 1 at a groove, whatever the cross-section. Unlike the slope it skips the
	71	added	* groove smoothing, so it reaches 1 at a groove from both sides with no
	72	added	* dip. Shading meant to be darkest on the groove reads this.
	73	added	*/
	74	added	fromCenter: ShaderNodeObject<Node>;
	75	added	/**
	76	added	* How steep the glass is, from 0 where it is flat to 1 at a groove. It is
	77	added	* the slope's length without the groove smoothing, so like `fromCenter` it
	78	added	* reaches 1 at a groove from both sides, where the slope dips to 0.
	79	added	* Shading meant to follow the shape of the glass reads this.
	80	added	*/
	81	added	steepness: ShaderNodeObject<Node>;
	82	added	}
	83	added
	84	added	// ---------------------------------------------
	85	added	// Feel constants (tuned by eye at the build's visual gates)
	86	added	// ---------------------------------------------
	87	added	// The slope's exponent at each end of the cross-section dial. A cross-section
	88	added	// of 0.5 always has an exponent of 1. Lower PRISM_EXPONENT sharpens the
	89	added	// prism's faces toward perfectly flat, and higher FLAT_EXPONENT flattens the
	90	added	// top and steepens the walls.
	91	added	const PRISM_EXPONENT = 1 / 16;
	92	added	const FLAT_EXPONENT = 16;
	93	added	// How many screen pixels each groove and the prism's ridge smooth over on
	94	added	// either side. 0 brings back the stair steps; above about 2 the grooves read
	95	added	// as soft blurs rather than sharp breaks.
	96	added	const GROOVE_SMOOTHING = 1;
	97	added
	98	added	/**
	99	added	* The bend and slope of fluted glass at `position`. A flute's center sits on
	100	added	* the position's origin, so center the position where the middle flute
	101	added	* should go. Call it from a fragment shader: it smooths each groove over the
	102	added	* screen-space rate of change of `position`, which only a fragment shader
	103	added	* can measure.
	104	added	*
	105	added	* @param position — Vec2 TSL node in any units with y up, such as `uv()`
	106	added	* scaled to pixels. `fluteWidth` and the returned bend share its units.
	107	added	*/
	108	added	export function fluteSurface(
	109	added	position: TSLNode,
	110	added	options: FluteSurfaceOptions = {},
	111	added	): FluteSurfaceResult {
	112	added	const fluteWidth = max(float(options.fluteWidth ?? 40), 1e-4);
	113	added	const angle = float(options.angle ?? 90);
	114	added	const refraction = float(options.refraction ?? 1);
	115	added	const crossSection = clamp(float(options.crossSection ?? 0.5), 0, 1);
	116	added
	117	added	// ---------------------------------------------
	118	added	// The direction across the flutes
	119	added	// ---------------------------------------------
	120	added	// The flutes run along (cos, sin) of the angle. Across is that direction
	121	added	// turned a quarter turn clockwise, (sin, -cos), so at the default 90
	122	added	// degrees it is (1, 0): across runs left to right over vertical flutes.
	123	added	const angleRadians = angle.mul(Math.PI / 180);
	124	added	const across = vec2(sin(angleRadians), cos(angleRadians).negate());
	125	added
	126	added	// ---------------------------------------------
	127	added	// Repeating space: which part of which flute
	128	added	// ---------------------------------------------
	129	added	// dot() projects the position onto the across direction: its signed
	130	added	// distance across the flutes, in the position's units. Dividing by the
	131	added	// width counts that distance in flutes. The +0.5 below centers a flute on
	132	added	// every whole number, so 2.25 lies a quarter flute right of the center of
	133	added	// flute 2, halfway to its groove.
	134	added	//
	135	added	// fract() keeps only the part after the decimal point, which is how a
	136	added	// shader repeats space: every flute gets the same 0-to-1 ramp, whatever
	137	added	// its number. The +0.5 shifts the ramp so its middle, not its start, lands
	138	added	// on the origin, which puts a flute's center there. At each groove the
	139	added	// ramp jumps from 1 back to 0, and that jump is what breaks the image into
	140	added	// strips.
	141	added	const flutePhase = dot(position, across).div(fluteWidth);
	142	added	const ramp = fract(flutePhase.add(0.5));
	143	added
	144	added	// The distance from the center, before any smoothing. ramp*2-1 runs from
	145	added	// -1 at one groove to 1 at the other, and abs() folds it to run 0 to 1
	146	added	// from the center out on both sides. Where the ramp jumps from 1 to 0 at a
	147	added	// groove, this goes from 1 to 1, so it has no jump to smooth.
	148	added	const fromCenter = abs(ramp.mul(2).sub(1));
	149	added
	150	added	// ---------------------------------------------
	151	added	// Clean grooves: antialiasing from the screen-space rate of change
	152	added	// ---------------------------------------------
	153	added	// The scene has no MSAA, the GPU's own edge smoothing, so a jump in the
	154	added	// ramp lands on whole pixels and a slanted groove draws a staircase. The
	155	added	// fix is to replace the jump with a slope exactly one pixel wide, and to
	156	added	// know how wide a pixel is in flutes, the shader asks the GPU.
	157	added	//
	158	added	// The GPU shades pixels in 2x2 blocks, so each pixel can read how much a
	159	added	// value changes to its neighbor. fwidth() adds that change across and
	160	added	// down, so fwidth(flutePhase) is how many flutes one pixel spans: 0.025 for
	161	added	// a 40-pixel flute, and 0.125 for an 8-pixel one. It is taken of the phase
	162	added	// before fract(), which has no jump in it to throw the measure off. The max
	163	added	// keeps the band from shrinking to nothing, which would divide by zero in
	164	added	// smoothstep() when a flute is very wide.
	165	added	const rampPerPixel = max(fwidth(flutePhase).mul(GROOVE_SMOOTHING), 1e-5);
	166	added
	167	added	// Paper's smoothFract. distanceToGroove is 0 at a groove and falls to -0.5
	168	added	// at the flute's center. smoothstep() turns the last pixel before a groove
	169	added	// into a blend that climbs from 0 to 0.5, so mix() eases the ramp toward
	170	added	// its mirror image, 1 - ramp, and the two meet at 0.5. Both sides of a
	171	added	// groove now arrive at 0.5, the flute's center, where the glass is flat, so
	172	added	// the groove pixel shows the image right at the groove instead of either
	173	added	// flute's bent copy. Away from the grooves the blend is 0 and the ramp is
	174	added	// unchanged.
	175	added	const distanceToGroove = abs(ramp.sub(0.5)).sub(0.5);
	176	added	const grooveBlend = smoothstep(rampPerPixel.negate(), rampPerPixel, distanceToGroove);
	177	added	const smoothRamp = mix(ramp, ramp.oneMinus(), grooveBlend);
	178	added
	179	added	// *2-1 stretches the ramp to run from -1 at one groove, through 0 at the
	180	added	// center, to 1 at the other groove.
	181	added	const fluteOffset = smoothRamp.mul(2).sub(1);
	182	added
	183	added	// ---------------------------------------------
	184	added	// The cross-section: picking an exponent from the dial
	185	added	// ---------------------------------------------
	186	added	// The dial picks the exponent that shapes the slope below, on a doubling
	187	added	// scale. dialFromRound runs from -1 at a prism, through 0 at round, to 1 at
	188	added	// flat. The prism half raises PRISM_EXPONENT to its distance from round,
	189	added	// and the flat half raises FLAT_EXPONENT the same way. At round both give
	190	added	// 1, since anything to the power 0 is 1, so 0.5 is exactly round whatever
	191	added	// the ends are. Each equal step of the dial multiplies the exponent by the
	192	added	// same factor, so a sweep morphs the shape evenly. With ends of 1/16 and
	193	added	// 16, the exponent doubles every eighth of the dial.
	194	added	const dialFromRound = crossSection.mul(2).sub(1);
	195	added	const exponentEnd = select(
	196	added	dialFromRound.lessThan(0),
	197	added	float(PRISM_EXPONENT),
	198	added	float(FLAT_EXPONENT),
	199	added	);
	200	added	const exponent = pow(exponentEnd, abs(dialFromRound));
	201	added
	202	added	// ---------------------------------------------
	203	added	// The slope: shaping a curve with an exponent
	204	added	// ---------------------------------------------
	205	added	// The slope's size is the distance from the flute's center, \|offset\|,
	206	added	// raised to the exponent. Because that distance runs from 0 to 1, a power
	207	added	// bends the curve between without moving its ends: the center stays flat
	208	added	// and the groove stays steepest.
	209	added	//
	210	added	// - An exponent of 1 leaves a straight line, so the slope grows in step
	211	added	// with the distance: a round lens. Strictly that draws a parabola, a
	212	added	// shallow stand-in for a circular arc, whose slope would shoot up near
	213	added	// the grooves.
	214	added	// - Below 1 the power lifts small values toward 1. x^(1/16) is already
	215	added	// 0.65 at x = 0.001 and 0.96 at 0.5, so the slope jumps to nearly full
	216	added	// just off the center and stays there: two flat faces meeting at a
	217	added	// ridge, a prism.
	218	added	// - Above 1 the power presses small values toward 0. x^16 is 0.00002 at
	219	added	// 0.5 and reaches 0.5 only at 0.96, so the glass stays flat across the
	220	added	// top and turns steep right at each groove.
	221	added	//
	222	added	// pow() needs a base of 0 or more, so the power is taken of fromCenter,
	223	added	// the distance without the groove smoothing, and the offset carries the
	224	added	// sign: offset * distance^(exponent - 1). Away from the grooves the offset
	225	added	// is ±distance, so that works out to ±distance^exponent, the curve above.
	226	added	// On a groove's own pixel the distance is about 1, and 1 to any power is
	227	added	// 1, so the slope follows the smoothed offset through 0 over the same
	228	added	// pixel whatever the exponent. Raising the smoothed offset itself would
	229	added	// undo the smoothing on a prism: x^(1/16) is still 0.82 at x = 0.045, so
	230	added	// the slope would stay near full until a sliver from the groove, and the
	231	added	// grooves would staircase again. The max() keeps the base off 0 at the
	232	added	// center, where a prism's negative power, exponent - 1, would shoot to
	233	added	// infinity. Pointing the result along `across` turns it into a vector, so
	234	added	// on either side of the center the slope points toward the nearer groove.
	235	added	const shapedSlope = fluteOffset.mul(pow(max(fromCenter, 1e-5), exponent.sub(1)));
	236	added
	237	added	// A prism's ridge jumps too. Just off the center x^(1/16) leaps from 0 to
	238	added	// about 0.65 inside a sliver much thinner than a pixel, so the two faces
	239	added	// meet in a staircase of their own. The same pixel width, doubled because
	240	added	// the offset runs twice as fast as the ramp, fades the slope in over the
	241	added	// first pixel either side of the center. On a round or flat flute the
	242	added	// slope there is already close to 0, so the fade changes nothing you can
	243	added	// see. It also softens the groove pixel, where the smoothed offset passes
	244	added	// through 0 on its way between flutes.
	245	added	const ridgeBlend = smoothstep(0, rampPerPixel.mul(2), abs(fluteOffset));
	246	added	const slopeAmount = shapedSlope.mul(ridgeBlend);
	247	added	const slope = across.mul(slopeAmount);
	248	added
	249	added	// The steepness takes the same power of fromCenter rather than of the
	250	added	// smoothed offset. Away from the grooves the two are equal, so it is the
	251	added	// slope's length there. On a groove's own pixel, where the smoothing pulls
	252	added	// the slope through 0, it keeps climbing toward 1. The ridge fade reads
@@ -0,0 +253,20 @@
	253	added	// fromCenter too, so it fades only at the center and never at a groove.
	254	added	const steepness = pow(fromCenter, exponent).mul(smoothstep(0, rampPerPixel.mul(2), fromCenter));
	255	added
	256	added	// ---------------------------------------------
	257	added	// The bend: refraction as a sample offset
	258	added	// ---------------------------------------------
	259	added	// Glass doesn't move pixels. It changes which point of the image behind it
	260	added	// reaches the eye, so a shader bends an image by sampling it somewhere
	261	added	// else. The bend is the slope times the dial, in half flute widths. On a
	262	added	// round flute at a refraction of 1, a point at offset x from the center
	263	added	// samples at 2x, so the flute's own width shows twice that width of image:
	264	added	// a squeezed copy of what lies right under it. The bend points away from
	265	added	// the center on both sides, which is what squeezes rather than stretches.
	266	added	// Other cross-sections spread the same span unevenly. A prism shifts each
	267	added	// face's half of the copy outward whole, and a flat top barely moves its
	268	added	// middle and crams the rest against the walls.
	269	added	const bend = slope.mul(refraction).mul(fluteWidth.mul(0.5));
	270	added
	271	added	return { bend, slope, fromCenter, steepness };
	272	added	}

packages/shaders/src/components/fluted-glass/shader.tsxNew fileReviewed

Base line	Head line	Change	Code

	1	added	'use client';
	2	added
	3	added	// The fluted glass's GPU half: a UV warp that bends the image beneath the
	4	added	// glass, and a color transform that lights it, both reading one surface from
	5	added	// the engine's fluteSurface primitive. This file converts between the pass's
	6	added	// coordinate and the primitive's pixels. The wrapper (./fluted-glass.tsx)
	7	added	// supplies the props.
	8	added	import { useEffect, useMemo } from 'react';
	9	added
	10	added	import type { ShaderNodeObject } from 'three/tsl';
	11	added	import {
	12	added	abs,
	13	added	cos,
	14	added	dot,
	15	added	fract,
	16	added	max,
	17	added	normalize,
	18	added	pow,
	19	added	screenSize,
	20	added	sin,
	21	added	smoothstep,
	22	added	uniform,
	23	added	uv,
	24	added	vec2,
	25	added	vec3,
	26	added	vec4,
	27	added	} from 'three/tsl';
	28	added	import { type Node, Vector3 } from 'three/webgpu';
	29	added
	30	added	import { fluteSurface } from '../../engine.js';
	31	added	import type { AnimatableProp } from '../../react/hooks/animatable-signal/animatable-signal.js';
	32	added	import { useAnimatableUniform } from '../../react/hooks/use-animatable-uniform/use-animatable-uniform.js';
	33	added	import { useBasePassUv } from '../../react/hooks/use-base-pass-uv/use-base-pass-uv.js';
	34	added	import { usePostProcessPass } from '../../react/hooks/use-overlay-pass/use-overlay-pass.js';
	35	added	import { useResize } from '../../react/hooks/use-resize/use-resize.js';
	36	added	import { useShaderContext } from '../../react/hooks/use-shader-context/use-shader-context.js';
	37	added	import { parseColor } from '../shared/color.js';
	38	added
	39	added	export interface FlutedGlassShaderProps {
	40	added	/**
	41	added	* The width of one flute, in CSS pixels. Accepts a static value or an
	42	added	* animation signal.
	43	added	*/
	44	added	fluteWidth: AnimatableProp<number>;
	45	added	/**
	46	added	* The direction the flutes run, in degrees on screen: 0 runs them left to
	47	added	* right and 90 runs them bottom to top. Accepts a static value or an
	48	added	* animation signal.
	49	added	*/
	50	added	angle: AnimatableProp<number>;
	51	added	/**
	52	added	* How far each flute bends the image beneath it, in half flute widths at
	53	added	* the steepest part of the glass. 0 leaves the image unchanged. Accepts a
	54	added	* static value or an animation signal.
	55	added	*/
	56	added	refraction: AnimatableProp<number>;
	57	added	/**
	58	added	* The shape of each flute seen from its end, from 0 to 1: 0 is a prism,
	59	added	* 0.5 is round, and 1 is a flat top with steep walls. The wrapper turns a
	60	added	* name into its point on this dial. Accepts a static value or an animation
	61	added	* signal.
	62	added	*/
	63	added	crossSection: AnimatableProp<number>;
	64	added	/**
	65	added	* Where the light comes from, in degrees counterclockwise on screen, the
	66	added	* way `angle` turns: 0 from the right, 90 from above, 180 from the left,
	67	added	* and 270 from below. Accepts a static value or an animation signal.
	68	added	*/
	69	added	lightAngle: AnimatableProp<number>;
	70	added	/**
	71	added	* How bright the highlight is, from 0 to 1, where 1 adds the full
	72	added	* `highlightColor` at the brightest point. Accepts a static value or an
	73	added	* animation signal.
	74	added	*/
	75	added	highlight: AnimatableProp<number>;
	76	added	/** The highlight's color: hex, `oklch()`, or `oklab()`. */
	77	added	highlightColor: string;
	78	added	/**
	79	added	* How dark the glass gets at each groove, from 0 to 1, where 1 is black
	80	added	* right on the groove. Accepts a static value or an animation signal.
	81	added	*/
	82	added	shadow: AnimatableProp<number>;
	83	added	}
	84	added
	85	added	// ---------------------------------------------
	86	added	// Feel constants (tuned by eye at the build's visual gates)
	87	added	// ---------------------------------------------
	88	added	// How high the light sits above the glass, in degrees: 0 skims across it
	89	added	// and 90 shines straight down. A lower light catches walls that lean
	90	added	// further over, so it moves the highlight out toward the grooves.
	91	added	const LIGHT_HEIGHT = 30;
	92	added	const LIGHT_HEIGHT_RADIANS = (LIGHT_HEIGHT * Math.PI) / 180;
	93	added	// The specular exponent. Higher draws a thinner, harder highlight, and
	94	added	// lower spreads it into a soft sheen across the wall.
	95	added	const HIGHLIGHT_SHARPNESS = 32;
	96	added	// How far the shadow can reach in from each groove, as a share of the way to
	97	added	// the flute's center. Within that reach it falls only where the glass is
	98	added	// steep. 1 lets it reach the center.
	99	added	const SHADOW_WIDTH = 0.5;
	100	added
	101	added	// The pass's frame has y down and the primitive's has y up, so a vector
	102	added	// that crosses between them flips its y.
	103	added	function flipY(vector: ShaderNodeObject<Node>): ShaderNodeObject<Node> {
@@ -0,0 +104,23 @@
	104	added	return vector.mul(vec2(1, -1));
	105	added	}
	106	added
	107	added	// ---------------------------------------------
	108	added	// Mirroring at the canvas edge
	109	added	// ---------------------------------------------
	110	added	// Near the canvas edge the bend can point off the canvas, where the scene
	111	added	// texture has nothing. Left alone, the sampler, the GPU unit that reads a
	112	added	// texture, clamps to the edge texel, the texture's outermost pixel, and
	113	added	// repeats it, which draws a smeared strip. This folds the coordinate back
	114	added	// instead, as if the image were mirrored past each edge.
	115	added	//
	116	added	// fract(x / 2) * 2 counts x along a 0-to-2 cycle, and subtracting 1 makes it
	117	added	// run -1 to 1. Its absolute value then falls from 1 to 0 and climbs back,
	118	added	// and 1 minus that rises from 0 to 1 and falls back: a triangle wave. On
	119	added	// 0..1 it returns x unchanged, past 1 it walks back down, so 1.1 reads 0.9,
	120	added	// and below 0 it walks back up, so -0.1 reads 0.1. It works per component.
	121	added	function mirrorOntoCanvas(coordinate: ShaderNodeObject<Node>): ShaderNodeObject<Node> {
	122	added	return abs(fract(coordinate.div(2)).mul(2).sub(1)).oneMinus();
	123	added	}
	124	added
	125	added	export function FlutedGlassShader({
	126	added	fluteWidth,

	127	added	angle,
	128	added	refraction,
	129	added	crossSection,
	130	added	lightAngle,
	131	added	highlight,
	132	added	highlightColor,
	133	added	shadow,
	134	added	}: FlutedGlassShaderProps) {
	135	added	const shaderContext = useShaderContext();
	136	added
	137	added	// The dials live in uniforms, values the CPU writes and the GPU reads at
	138	added	// each draw, so changing them never rebuilds the output chain.
	139	added	const fluteWidthUniform = useAnimatableUniform(fluteWidth);
	140	added	const angleUniform = useAnimatableUniform(angle);
	141	added	const refractionUniform = useAnimatableUniform(refraction);
	142	added	const crossSectionUniform = useAnimatableUniform(crossSection);
	143	added	const lightAngleUniform = useAnimatableUniform(lightAngle);
	144	added	const highlightUniform = useAnimatableUniform(highlight);
	145	added	const shadowUniform = useAnimatableUniform(shadow);
	146	added
	147	added	// The highlight color decodes once into linear rgb (parseColor reads hex
	148	added	// and the wide-gamut oklch() and oklab() strings). The Vector3 and its
	149	added	// uniform are created once, and the effect below writes each new color
	150	added	// into the Vector3, so a new color never rebuilds the color transform.
	151	added	const highlightColorVector = useMemo(() => new Vector3(1, 1, 1), []);
	152	added	const highlightColorUniform = useMemo(
	153	added	() => uniform(highlightColorVector),
	154	added	[highlightColorVector],
	155	added	);
	156	added
	157	added	useEffect(() => {
	158	added	highlightColorVector.set(...parseColor(highlightColor));
	159	added	// The bare-uniform-write gotcha in docs/agents/tsl.md: a write into the
	160	added	// Vector3 repaints nothing on a static scene by itself.
	161	added	shaderContext?.scheduler.requestRender();
	162	added	}, [highlightColor, highlightColorVector, shaderContext]);
	163	added
	164	added	// ---------------------------------------------
	165	added	// CSS pixels -> device pixels
	166	added	// ---------------------------------------------
	167	added	// fluteWidth is in CSS pixels so a flute keeps its size on a 1x and a 2x
	168	added	// display, but the warp below counts device pixels. The renderer's pixel
	169	added	// ratio, which respects maxDPR clamping, converts between them; useResize
	170	added	// fires again on monitor moves and browser zoom, when that ratio changes.
	171	added	// Dither builds its ratio the same way.
	172	added	const resize = useResize();
	173	added	// Created once and never replaced: the effect below writes into it, and
	174	added	// the warp depends on the stable wrapper.
	175	added	const pixelRatioUniform = useMemo(
	176	added	() => uniform(resize.get()[2] \|\| 1),
	177	added	// eslint-disable-next-line react-hooks/exhaustive-deps
	178	added	[],
	179	added	);
	180	added
	181	added	useEffect(() => {
	182	added	const apply = () => {
	183	added	const rendererRatio = shaderContext?.renderer.three.getPixelRatio();
	184	added
	185	added	pixelRatioUniform.value =
	186	added	rendererRatio !== undefined && rendererRatio > 0 ? rendererRatio : resize.get()[2] \|\| 1;
	187	added	// A bare uniform write repaints nothing on a static scene, so ask for
	188	added	// a frame (the bare-uniform-write gotcha in docs/agents/tsl.md).
	189	added	shaderContext?.scheduler.requestRender();
	190	added	};
	191	added
	192	added	apply();
	193	added
	194	added	return resize.on('change', apply);
	195	added	}, [resize, pixelRatioUniform, shaderContext]);
	196	added
	197	added	// ---------------------------------------------
	198	added	// The glass at a pixel
	199	added	// ---------------------------------------------
	200	added	// Both passes below start here, so the light lands where the image bends.
	201	added	// `coordinate` is a pass coordinate, [0, 0] at the top-left with y growing
	202	added	// downward. Into the primitive's frame: subtract 0.5 to measure from the
	203	added	// canvas center, so the middle flute sits in the middle of the canvas and
	204	added	// the flutes turn around it as `angle` changes. Times screenSize, the
	205	added	// drawing buffer in device pixels, turns 0..1 into pixels, so a flute is as
	206	added	// wide across a wide canvas as across a tall one. The y flip points y up,
	207	added	// the frame the primitive's angle is measured in.
	208	added	const surfaceAt = (coordinate: ShaderNodeObject<Node>) =>
	209	added	fluteSurface(flipY(coordinate.sub(0.5).mul(screenSize)), {
	210	added	fluteWidth: fluteWidthUniform.mul(pixelRatioUniform),
	211	added	angle: angleUniform,
	212	added	refraction: refractionUniform,
@@ -0,0 +213,24 @@
	213	added	crossSection: crossSectionUniform,
	214	added	});
	215	added
	216	added	// ---------------------------------------------
	217	added	// Refraction: bend the scene through the flutes
	218	added	// ---------------------------------------------
	219	added	// A base-pass UV warp: the callback receives the 0..1 coordinate the
	220	added	// rendered scene is about to be sampled at and returns a replacement.
	221	added	useBasePassUv(
	222	added	(coordinate) => {
	223	added	const { bend } = surfaceAt(coordinate);
	224	added
	225	added	// Back out: the bend comes back in device pixels with y up. Flip y
	226	added	// again and divide by the buffer size to get a 0..1 offset in the
	227	added	// pass's frame, then fold anything off the canvas back onto it.
	228	added	const bent = coordinate.add(flipY(bend).div(screenSize));
	229	added
	230	added	return mirrorOntoCanvas(bent);
	231	added	},
	232	added	[fluteWidthUniform, angleUniform, refractionUniform, crossSectionUniform, pixelRatioUniform],
	233	added	);
	234	added
	235	added	// ---------------------------------------------
	236	added	// Lighting: a shadow at the grooves, a highlight on the walls

	237	added	// ---------------------------------------------
	238	added	// A post-process pass: the callback receives each pixel the scene drew,
	239	added	// already bent by the warp above (`input`, rgba), and returns a
	240	added	// replacement. The warp and this pass draw in the same output quad, and
	241	added	// uv() is the pixel's own pass coordinate, so surfaceAt(uv()) is the glass
	242	added	// at this pixel. The warp starts from uv() too while it runs first. A UV
	243	added	// warp mounted before FlutedGlass, such as Dither's, hands the glass its
	244	added	// moved coordinate instead, so there the bend and the light read the
	245	added	// surface at slightly different points. SHA-267 reworks how warps stack.
	246	added	usePostProcessPass(
	247	added	(input) => {
	248	added	const { slope, fromCenter, steepness } = surfaceAt(uv());
	249	added
	250	added	// The shadow. smoothstep() climbs from 0 to 1 over the outer
	251	added	// SHADOW_WIDTH of the way from the center to the groove, so the shade
	252	added	// is 0 across the middle of the flute and full right on the groove.
	253	added	// Times the steepness, it falls only where the glass is steep: a flat
	254	added	// top darkens on its walls and not across its flat middle, and a
	255	added	// prism, steep from ridge to groove, keeps the whole band. Both read
	256	added	// the glass without the groove smoothing, which pulls the slope to 0
	257	added	// on the groove's own pixel and would leave a bright line down the
	258	added	// middle of the dark one. Multiplying darkens without moving alpha,
	259	added	// and a transparent pixel, which holds no color here, stays
	260	added	// transparent.
	261	added	const shade = smoothstep(1 - SHADOW_WIDTH, 1, fromCenter)
	262	added	.mul(steepness)
	263	added	.mul(shadowUniform);
	264	added	const shaded = input.rgb.mul(shade.oneMinus());
	265	added
	266	added	// The light works in the primitive's frame, y up, where the slope
	267	added	// already is and where `angle` turns. Only directions meet in the math
	268	added	// below, so the frame changes nothing but which way the angles run.
	269	added	//
	270	added	// The surface normal: the direction the glass faces, one unit long.
	271	added	// Flat glass faces straight out of the screen, (0, 0, 1). Tilt it by
	272	added	// the slope, and a wall's normal leans the way the wall faces. At a
	273	added	// slope of 1, at a groove, it leans 45 degrees. normalize() scales the
	274	added	// vector back to one unit long.
	275	added	const normal = normalize(vec3(slope, 1));
	276	added
	277	added	// The direction toward the light, one unit long. lightAngle turns it
	278	added	// counterclockwise around the screen, the way `angle` turns the
	279	added	// flutes, and LIGHT_HEIGHT lifts it off the glass: cos(height) of it
	280	added	// lies along the screen and sin(height) points out of it. The height
	281	added	// is fixed, so its cosine and sine are worked out once here rather
	282	added	// than per pixel.
	283	added	const lightRadians = lightAngleUniform.mul(Math.PI / 180);
	284	added	const toLight = vec3(
	285	added	cos(lightRadians).mul(Math.cos(LIGHT_HEIGHT_RADIANS)),
	286	added	sin(lightRadians).mul(Math.cos(LIGHT_HEIGHT_RADIANS)),
	287	added	Math.sin(LIGHT_HEIGHT_RADIANS),
	288	added	);
	289	added
	290	added	// Specular light, the Blinn-Phong way. A mirror sends light from the
	291	added	// light to the eye where its normal points halfway between the two.
	292	added	// The eye looks straight at the screen, from (0, 0, 1), so the
	293	added	// halfway vector is the normalized sum of that and toLight. dot()
	294	added	// of two unit vectors is the cosine of the angle between them: 1
	295	added	// where the normal points exactly halfway, and lower as it turns
	296	added	// away. pow() raises that to HIGHLIGHT_SHARPNESS, which keeps values
	297	added	// near 1 and crushes the rest, so the highlight narrows to a bright
	298	added	// band on the part of each wall that leans toward the light by the
	299	added	// right amount. Flat glass and walls that face away stay dark. max()
	300	added	// keeps pow()'s base from going below 0.
	301	added	const halfway = normalize(toLight.add(vec3(0, 0, 1)));
	302	added	const specular = pow(max(dot(normal, halfway), 0), HIGHLIGHT_SHARPNESS);
	303	added
	304	added	// Added light, scaled by the dial and by the pixel's alpha, as
	305	added	// CursorRipple's shine is: a transparent pixel has nothing for light
	306	added	// to land on. The color multiplies last, as an argument (the
	307	added	// vec-uniform gotcha in docs/agents/tsl.md). Alpha passes through.
	308	added	const light = specular.mul(highlightUniform).mul(input.a).mul(highlightColorUniform);
	309	added
	310	added	return vec4(shaded.add(light), input.a);
	311	added	},
	312	added	[
	313	added	fluteWidthUniform,
	314	added	angleUniform,
	315	added	refractionUniform,
	316	added	crossSectionUniform,
	317	added	pixelRatioUniform,
	318	added	lightAngleUniform,
	319	added	highlightUniform,
	320	added	highlightColorUniform,
	321	added	shadowUniform,
	322	added	],
	323	added	);
	324	added
	325	added	return null;
	326	added	}

1 file 46 lines added, 0 removed0 of 1 file reviewed

packages/shaders/src/components/fluted-glass/shader.tsx

packages/shaders/src/components/fluted-glass/shader.tsxNew fileReviewed

Base line	Head line	Change	Code

	1	added	'use client';
	2	added
	3	added	// The fluted glass's GPU half: a UV warp that bends the image beneath the
	4	added	// glass, and a color transform that lights it, both reading one surface from
	5	added	// the engine's fluteSurface primitive. This file converts between the pass's
	6	added	// coordinate and the primitive's pixels. The wrapper (./fluted-glass.tsx)
	7	added	// supplies the props.
	8	added	import { useEffect, useMemo } from 'react';
	9	added
	10	added	import type { ShaderNodeObject } from 'three/tsl';
	11	added	import {
	12	added	abs,
	13	added	cos,
	14	added	dot,
	15	added	fract,
	16	added	max,
	17	added	normalize,
	18	added	pow,
	19	added	screenSize,
	20	added	sin,
	21	added	smoothstep,
	22	added	uniform,
	23	added	uv,
	24	added	vec2,
	25	added	vec3,
	26	added	vec4,
	27	added	} from 'three/tsl';
	28	added	import { type Node, Vector3 } from 'three/webgpu';
	29	added
	30	added	import { fluteSurface } from '../../engine.js';
	31	added	import type { AnimatableProp } from '../../react/hooks/animatable-signal/animatable-signal.js';
	32	added	import { useAnimatableUniform } from '../../react/hooks/use-animatable-uniform/use-animatable-uniform.js';
	33	added	import { useBasePassUv } from '../../react/hooks/use-base-pass-uv/use-base-pass-uv.js';
	34	added	import { usePostProcessPass } from '../../react/hooks/use-overlay-pass/use-overlay-pass.js';
	35	added	import { useResize } from '../../react/hooks/use-resize/use-resize.js';
	36	added	import { useShaderContext } from '../../react/hooks/use-shader-context/use-shader-context.js';
	37	added	import { parseColor } from '../shared/color.js';
	38	added
	39	added	export interface FlutedGlassShaderProps {
	40	added	/**
	41	added	* The width of one flute, in CSS pixels. Accepts a static value or an
	42	added	* animation signal.
	43	added	*/
	44	added	fluteWidth: AnimatableProp<number>;
	45	added	/**
	46	added	* The direction the flutes run, in degrees on screen: 0 runs them left to
	47	added	* right and 90 runs them bottom to top. Accepts a static value or an
	48	added	* animation signal.
	49	added	*/
	50	added	angle: AnimatableProp<number>;
	51	added	/**
	52	added	* How far each flute bends the image beneath it, in half flute widths at
	53	added	* the steepest part of the glass. 0 leaves the image unchanged. Accepts a
	54	added	* static value or an animation signal.
	55	added	*/
	56	added	refraction: AnimatableProp<number>;
	57	added	/**
	58	added	* The shape of each flute seen from its end, from 0 to 1: 0 is a prism,
	59	added	* 0.5 is round, and 1 is a flat top with steep walls. The wrapper turns a
	60	added	* name into its point on this dial. Accepts a static value or an animation
	61	added	* signal.
	62	added	*/
	63	added	crossSection: AnimatableProp<number>;
	64	added	/**
	65	added	* Where the light comes from, in degrees counterclockwise on screen, the
	66	added	* way `angle` turns: 0 from the right, 90 from above, 180 from the left,
	67	added	* and 270 from below. Accepts a static value or an animation signal.
	68	added	*/
	69	added	lightAngle: AnimatableProp<number>;
	70	added	/**
	71	added	* How bright the highlight is, from 0 to 1, where 1 adds the full
	72	added	* `highlightColor` at the brightest point. Accepts a static value or an
	73	added	* animation signal.
	74	added	*/
	75	added	highlight: AnimatableProp<number>;
	76	added	/** The highlight's color: hex, `oklch()`, or `oklab()`. */
	77	added	highlightColor: string;
	78	added	/**
	79	added	* How dark the glass gets at each groove, from 0 to 1, where 1 is black
	80	added	* right on the groove. Accepts a static value or an animation signal.
	81	added	*/
	82	added	shadow: AnimatableProp<number>;
	83	added	}
	84	added
	85	added	// ---------------------------------------------
	86	added	// Feel constants (tuned by eye at the build's visual gates)
	87	added	// ---------------------------------------------
	88	added	// How high the light sits above the glass, in degrees: 0 skims across it
	89	added	// and 90 shines straight down. A lower light catches walls that lean
	90	added	// further over, so it moves the highlight out toward the grooves.
	91	added	const LIGHT_HEIGHT = 30;
	92	added	const LIGHT_HEIGHT_RADIANS = (LIGHT_HEIGHT * Math.PI) / 180;
@@ -0,0 +93,10 @@
	93	added	// The specular exponent. Higher draws a thinner, harder highlight, and
	94	added	// lower spreads it into a soft sheen across the wall.
	95	added	const HIGHLIGHT_SHARPNESS = 32;
	96	added	// How far the shadow can reach in from each groove, as a share of the way to
	97	added	// the flute's center. Within that reach it falls only where the glass is
	98	added	// steep. 1 lets it reach the center.
	99	added	const SHADOW_WIDTH = 0.5;
	100	added
	101	added	// The pass's frame has y down and the primitive's has y up, so a vector
	102	added	// that crosses between them flips its y.

	103	added	function flipY(vector: ShaderNodeObject<Node>): ShaderNodeObject<Node> {
	104	added	return vector.mul(vec2(1, -1));
	105	added	}
	106	added
	107	added	// ---------------------------------------------
	108	added	// Mirroring at the canvas edge
	109	added	// ---------------------------------------------
	110	added	// Near the canvas edge the bend can point off the canvas, where the scene
	111	added	// texture has nothing. Left alone, the sampler, the GPU unit that reads a
	112	added	// texture, clamps to the edge texel, the texture's outermost pixel, and
	113	added	// repeats it, which draws a smeared strip. This folds the coordinate back
	114	added	// instead, as if the image were mirrored past each edge.
	115	added	//
	116	added	// fract(x / 2) * 2 counts x along a 0-to-2 cycle, and subtracting 1 makes it
	117	added	// run -1 to 1. Its absolute value then falls from 1 to 0 and climbs back,
	118	added	// and 1 minus that rises from 0 to 1 and falls back: a triangle wave. On
	119	added	// 0..1 it returns x unchanged, past 1 it walks back down, so 1.1 reads 0.9,
	120	added	// and below 0 it walks back up, so -0.1 reads 0.1. It works per component.
	121	added	function mirrorOntoCanvas(coordinate: ShaderNodeObject<Node>): ShaderNodeObject<Node> {
	122	added	return abs(fract(coordinate.div(2)).mul(2).sub(1)).oneMinus();
	123	added	}
	124	added
	125	added	export function FlutedGlassShader({
	126	added	fluteWidth,
	127	added	angle,
	128	added	refraction,
	129	added	crossSection,
	130	added	lightAngle,
	131	added	highlight,
	132	added	highlightColor,
	133	added	shadow,
	134	added	}: FlutedGlassShaderProps) {
	135	added	const shaderContext = useShaderContext();
	136	added
	137	added	// The dials live in uniforms, values the CPU writes and the GPU reads at
	138	added	// each draw, so changing them never rebuilds the output chain.
	139	added	const fluteWidthUniform = useAnimatableUniform(fluteWidth);
	140	added	const angleUniform = useAnimatableUniform(angle);
	141	added	const refractionUniform = useAnimatableUniform(refraction);
	142	added	const crossSectionUniform = useAnimatableUniform(crossSection);
	143	added	const lightAngleUniform = useAnimatableUniform(lightAngle);
	144	added	const highlightUniform = useAnimatableUniform(highlight);
	145	added	const shadowUniform = useAnimatableUniform(shadow);
	146	added
	147	added	// The highlight color decodes once into linear rgb (parseColor reads hex
	148	added	// and the wide-gamut oklch() and oklab() strings). The Vector3 and its
	149	added	// uniform are created once, and the effect below writes each new color
	150	added	// into the Vector3, so a new color never rebuilds the color transform.
	151	added	const highlightColorVector = useMemo(() => new Vector3(1, 1, 1), []);
	152	added	const highlightColorUniform = useMemo(
	153	added	() => uniform(highlightColorVector),
	154	added	[highlightColorVector],
	155	added	);
	156	added
	157	added	useEffect(() => {
	158	added	highlightColorVector.set(...parseColor(highlightColor));
	159	added	// The bare-uniform-write gotcha in docs/agents/tsl.md: a write into the
	160	added	// Vector3 repaints nothing on a static scene by itself.
	161	added	shaderContext?.scheduler.requestRender();
	162	added	}, [highlightColor, highlightColorVector, shaderContext]);
	163	added
	164	added	// ---------------------------------------------
	165	added	// CSS pixels -> device pixels
	166	added	// ---------------------------------------------
	167	added	// fluteWidth is in CSS pixels so a flute keeps its size on a 1x and a 2x
	168	added	// display, but the warp below counts device pixels. The renderer's pixel
	169	added	// ratio, which respects maxDPR clamping, converts between them; useResize
	170	added	// fires again on monitor moves and browser zoom, when that ratio changes.
	171	added	// Dither builds its ratio the same way.
	172	added	const resize = useResize();
	173	added	// Created once and never replaced: the effect below writes into it, and
	174	added	// the warp depends on the stable wrapper.
	175	added	const pixelRatioUniform = useMemo(
	176	added	() => uniform(resize.get()[2] \|\| 1),
	177	added	// eslint-disable-next-line react-hooks/exhaustive-deps
	178	added	[],
	179	added	);
	180	added
	181	added	useEffect(() => {
	182	added	const apply = () => {
	183	added	const rendererRatio = shaderContext?.renderer.three.getPixelRatio();
	184	added
	185	added	pixelRatioUniform.value =
	186	added	rendererRatio !== undefined && rendererRatio > 0 ? rendererRatio : resize.get()[2] \|\| 1;
	187	added	// A bare uniform write repaints nothing on a static scene, so ask for
	188	added	// a frame (the bare-uniform-write gotcha in docs/agents/tsl.md).
	189	added	shaderContext?.scheduler.requestRender();
	190	added	};
	191	added
	192	added	apply();
	193	added
	194	added	return resize.on('change', apply);
	195	added	}, [resize, pixelRatioUniform, shaderContext]);
	196	added
	197	added	// ---------------------------------------------
	198	added	// The glass at a pixel
	199	added	// ---------------------------------------------
	200	added	// Both passes below start here, so the light lands where the image bends.
	201	added	// `coordinate` is a pass coordinate, [0, 0] at the top-left with y growing
	202	added	// downward. Into the primitive's frame: subtract 0.5 to measure from the
	203	added	// canvas center, so the middle flute sits in the middle of the canvas and
	204	added	// the flutes turn around it as `angle` changes. Times screenSize, the
	205	added	// drawing buffer in device pixels, turns 0..1 into pixels, so a flute is as
	206	added	// wide across a wide canvas as across a tall one. The y flip points y up,
	207	added	// the frame the primitive's angle is measured in.
	208	added	const surfaceAt = (coordinate: ShaderNodeObject<Node>) =>
	209	added	fluteSurface(flipY(coordinate.sub(0.5).mul(screenSize)), {
	210	added	fluteWidth: fluteWidthUniform.mul(pixelRatioUniform),
	211	added	angle: angleUniform,
	212	added	refraction: refractionUniform,
	213	added	crossSection: crossSectionUniform,
	214	added	});
	215	added
	216	added	// ---------------------------------------------
	217	added	// Refraction: bend the scene through the flutes
	218	added	// ---------------------------------------------
	219	added	// A base-pass UV warp: the callback receives the 0..1 coordinate the
	220	added	// rendered scene is about to be sampled at and returns a replacement.
	221	added	useBasePassUv(
	222	added	(coordinate) => {
	223	added	const { bend } = surfaceAt(coordinate);
	224	added
	225	added	// Back out: the bend comes back in device pixels with y up. Flip y
	226	added	// again and divide by the buffer size to get a 0..1 offset in the
	227	added	// pass's frame, then fold anything off the canvas back onto it.
	228	added	const bent = coordinate.add(flipY(bend).div(screenSize));
	229	added
	230	added	return mirrorOntoCanvas(bent);
	231	added	},
@@ -0,0 +232,36 @@
	232	added	[fluteWidthUniform, angleUniform, refractionUniform, crossSectionUniform, pixelRatioUniform],
	233	added	);
	234	added
	235	added	// ---------------------------------------------
	236	added	// Lighting: a shadow at the grooves, a highlight on the walls
	237	added	// ---------------------------------------------
	238	added	// A post-process pass: the callback receives each pixel the scene drew,
	239	added	// already bent by the warp above (`input`, rgba), and returns a
	240	added	// replacement. The warp and this pass draw in the same output quad, and
	241	added	// uv() is the pixel's own pass coordinate, so surfaceAt(uv()) is the glass
	242	added	// at this pixel. The warp starts from uv() too while it runs first. A UV
	243	added	// warp mounted before FlutedGlass, such as Dither's, hands the glass its
	244	added	// moved coordinate instead, so there the bend and the light read the
	245	added	// surface at slightly different points. SHA-267 reworks how warps stack.
	246	added	usePostProcessPass(
	247	added	(input) => {
	248	added	const { slope, fromCenter, steepness } = surfaceAt(uv());
	249	added
	250	added	// The shadow. smoothstep() climbs from 0 to 1 over the outer
	251	added	// SHADOW_WIDTH of the way from the center to the groove, so the shade
	252	added	// is 0 across the middle of the flute and full right on the groove.
	253	added	// Times the steepness, it falls only where the glass is steep: a flat
	254	added	// top darkens on its walls and not across its flat middle, and a
	255	added	// prism, steep from ridge to groove, keeps the whole band. Both read
	256	added	// the glass without the groove smoothing, which pulls the slope to 0
	257	added	// on the groove's own pixel and would leave a bright line down the
	258	added	// middle of the dark one. Multiplying darkens without moving alpha,
	259	added	// and a transparent pixel, which holds no color here, stays
	260	added	// transparent.
	261	added	const shade = smoothstep(1 - SHADOW_WIDTH, 1, fromCenter)
	262	added	.mul(steepness)
	263	added	.mul(shadowUniform);
	264	added	const shaded = input.rgb.mul(shade.oneMinus());
	265	added
	266	added	// The light works in the primitive's frame, y up, where the slope
	267	added	// already is and where `angle` turns. Only directions meet in the math

	268	added	// below, so the frame changes nothing but which way the angles run.
	269	added	//
	270	added	// The surface normal: the direction the glass faces, one unit long.
	271	added	// Flat glass faces straight out of the screen, (0, 0, 1). Tilt it by
	272	added	// the slope, and a wall's normal leans the way the wall faces. At a
	273	added	// slope of 1, at a groove, it leans 45 degrees. normalize() scales the
	274	added	// vector back to one unit long.
	275	added	const normal = normalize(vec3(slope, 1));
	276	added
	277	added	// The direction toward the light, one unit long. lightAngle turns it
	278	added	// counterclockwise around the screen, the way `angle` turns the
	279	added	// flutes, and LIGHT_HEIGHT lifts it off the glass: cos(height) of it
	280	added	// lies along the screen and sin(height) points out of it. The height
	281	added	// is fixed, so its cosine and sine are worked out once here rather
	282	added	// than per pixel.
	283	added	const lightRadians = lightAngleUniform.mul(Math.PI / 180);
	284	added	const toLight = vec3(
	285	added	cos(lightRadians).mul(Math.cos(LIGHT_HEIGHT_RADIANS)),
	286	added	sin(lightRadians).mul(Math.cos(LIGHT_HEIGHT_RADIANS)),
	287	added	Math.sin(LIGHT_HEIGHT_RADIANS),
	288	added	);
	289	added
	290	added	// Specular light, the Blinn-Phong way. A mirror sends light from the
	291	added	// light to the eye where its normal points halfway between the two.
	292	added	// The eye looks straight at the screen, from (0, 0, 1), so the
	293	added	// halfway vector is the normalized sum of that and toLight. dot()
	294	added	// of two unit vectors is the cosine of the angle between them: 1
	295	added	// where the normal points exactly halfway, and lower as it turns
	296	added	// away. pow() raises that to HIGHLIGHT_SHARPNESS, which keeps values
	297	added	// near 1 and crushes the rest, so the highlight narrows to a bright
	298	added	// band on the part of each wall that leans toward the light by the
	299	added	// right amount. Flat glass and walls that face away stay dark. max()
	300	added	// keeps pow()'s base from going below 0.
	301	added	const halfway = normalize(toLight.add(vec3(0, 0, 1)));
	302	added	const specular = pow(max(dot(normal, halfway), 0), HIGHLIGHT_SHARPNESS);
	303	added
	304	added	// Added light, scaled by the dial and by the pixel's alpha, as
	305	added	// CursorRipple's shine is: a transparent pixel has nothing for light
	306	added	// to land on. The color multiplies last, as an argument (the
	307	added	// vec-uniform gotcha in docs/agents/tsl.md). Alpha passes through.
	308	added	const light = specular.mul(highlightUniform).mul(input.a).mul(highlightColorUniform);
	309	added
	310	added	return vec4(shaded.add(light), input.a);
	311	added	},
	312	added	[
	313	added	fluteWidthUniform,
	314	added	angleUniform,
	315	added	refractionUniform,
	316	added	crossSectionUniform,
	317	added	pixelRatioUniform,
	318	added	lightAngleUniform,
	319	added	highlightUniform,
	320	added	highlightColorUniform,
	321	added	shadowUniform,
	322	added	],
	323	added	);
	324	added
	325	added	return null;
	326	added	}

1 file 87 lines added, 0 removed0 of 1 file reviewed

packages/shaders/src/components/fluted-glass/shader.tsx

packages/shaders/src/components/fluted-glass/shader.tsxNew fileReviewed

Base line	Head line	Change	Code

	1	added	'use client';
	2	added
	3	added	// The fluted glass's GPU half: a UV warp that bends the image beneath the
	4	added	// glass, and a color transform that lights it, both reading one surface from
	5	added	// the engine's fluteSurface primitive. This file converts between the pass's
	6	added	// coordinate and the primitive's pixels. The wrapper (./fluted-glass.tsx)
	7	added	// supplies the props.
	8	added	import { useEffect, useMemo } from 'react';
	9	added
	10	added	import type { ShaderNodeObject } from 'three/tsl';
	11	added	import {
	12	added	abs,
	13	added	cos,
	14	added	dot,
	15	added	fract,
	16	added	max,
	17	added	normalize,
	18	added	pow,
	19	added	screenSize,
	20	added	sin,
	21	added	smoothstep,
	22	added	uniform,
	23	added	uv,
	24	added	vec2,
	25	added	vec3,
	26	added	vec4,
	27	added	} from 'three/tsl';
	28	added	import { type Node, Vector3 } from 'three/webgpu';
	29	added
	30	added	import { fluteSurface } from '../../engine.js';
	31	added	import type { AnimatableProp } from '../../react/hooks/animatable-signal/animatable-signal.js';
	32	added	import { useAnimatableUniform } from '../../react/hooks/use-animatable-uniform/use-animatable-uniform.js';
	33	added	import { useBasePassUv } from '../../react/hooks/use-base-pass-uv/use-base-pass-uv.js';
	34	added	import { usePostProcessPass } from '../../react/hooks/use-overlay-pass/use-overlay-pass.js';
	35	added	import { useResize } from '../../react/hooks/use-resize/use-resize.js';
	36	added	import { useShaderContext } from '../../react/hooks/use-shader-context/use-shader-context.js';
	37	added	import { parseColor } from '../shared/color.js';
	38	added
	39	added	export interface FlutedGlassShaderProps {
	40	added	/**
	41	added	* The width of one flute, in CSS pixels. Accepts a static value or an
	42	added	* animation signal.
	43	added	*/
	44	added	fluteWidth: AnimatableProp<number>;
	45	added	/**
	46	added	* The direction the flutes run, in degrees on screen: 0 runs them left to
	47	added	* right and 90 runs them bottom to top. Accepts a static value or an
	48	added	* animation signal.
	49	added	*/
	50	added	angle: AnimatableProp<number>;
	51	added	/**
	52	added	* How far each flute bends the image beneath it, in half flute widths at
	53	added	* the steepest part of the glass. 0 leaves the image unchanged. Accepts a
	54	added	* static value or an animation signal.
	55	added	*/
	56	added	refraction: AnimatableProp<number>;
	57	added	/**
	58	added	* The shape of each flute seen from its end, from 0 to 1: 0 is a prism,
	59	added	* 0.5 is round, and 1 is a flat top with steep walls. The wrapper turns a
	60	added	* name into its point on this dial. Accepts a static value or an animation
	61	added	* signal.
	62	added	*/
	63	added	crossSection: AnimatableProp<number>;
	64	added	/**
	65	added	* Where the light comes from, in degrees counterclockwise on screen, the
	66	added	* way `angle` turns: 0 from the right, 90 from above, 180 from the left,
	67	added	* and 270 from below. Accepts a static value or an animation signal.
	68	added	*/
	69	added	lightAngle: AnimatableProp<number>;
	70	added	/**
	71	added	* How bright the highlight is, from 0 to 1, where 1 adds the full
	72	added	* `highlightColor` at the brightest point. Accepts a static value or an
	73	added	* animation signal.
	74	added	*/
	75	added	highlight: AnimatableProp<number>;
	76	added	/** The highlight's color: hex, `oklch()`, or `oklab()`. */
	77	added	highlightColor: string;
	78	added	/**
	79	added	* How dark the glass gets at each groove, from 0 to 1, where 1 is black
	80	added	* right on the groove. Accepts a static value or an animation signal.
	81	added	*/
	82	added	shadow: AnimatableProp<number>;
	83	added	}
	84	added
@@ -0,0 +85,14 @@
	85	added	// ---------------------------------------------
	86	added	// Feel constants (tuned by eye at the build's visual gates)
	87	added	// ---------------------------------------------
	88	added	// How high the light sits above the glass, in degrees: 0 skims across it
	89	added	// and 90 shines straight down. A lower light catches walls that lean
	90	added	// further over, so it moves the highlight out toward the grooves.
	91	added	const LIGHT_HEIGHT = 30;
	92	added	const LIGHT_HEIGHT_RADIANS = (LIGHT_HEIGHT * Math.PI) / 180;
	93	added	// The specular exponent. Higher draws a thinner, harder highlight, and
	94	added	// lower spreads it into a soft sheen across the wall.
	95	added	const HIGHLIGHT_SHARPNESS = 32;
	96	added	// How far the shadow can reach in from each groove, as a share of the way to
	97	added	// the flute's center. Within that reach it falls only where the glass is
	98	added	// steep. 1 lets it reach the center.

	99	added	const SHADOW_WIDTH = 0.5;
	100	added
	101	added	// The pass's frame has y down and the primitive's has y up, so a vector
	102	added	// that crosses between them flips its y.
	103	added	function flipY(vector: ShaderNodeObject<Node>): ShaderNodeObject<Node> {
	104	added	return vector.mul(vec2(1, -1));
	105	added	}
	106	added
	107	added	// ---------------------------------------------
	108	added	// Mirroring at the canvas edge
	109	added	// ---------------------------------------------
	110	added	// Near the canvas edge the bend can point off the canvas, where the scene
	111	added	// texture has nothing. Left alone, the sampler, the GPU unit that reads a
	112	added	// texture, clamps to the edge texel, the texture's outermost pixel, and
	113	added	// repeats it, which draws a smeared strip. This folds the coordinate back
	114	added	// instead, as if the image were mirrored past each edge.
	115	added	//
	116	added	// fract(x / 2) * 2 counts x along a 0-to-2 cycle, and subtracting 1 makes it
	117	added	// run -1 to 1. Its absolute value then falls from 1 to 0 and climbs back,
	118	added	// and 1 minus that rises from 0 to 1 and falls back: a triangle wave. On
	119	added	// 0..1 it returns x unchanged, past 1 it walks back down, so 1.1 reads 0.9,
	120	added	// and below 0 it walks back up, so -0.1 reads 0.1. It works per component.
	121	added	function mirrorOntoCanvas(coordinate: ShaderNodeObject<Node>): ShaderNodeObject<Node> {
	122	added	return abs(fract(coordinate.div(2)).mul(2).sub(1)).oneMinus();
	123	added	}
	124	added
	125	added	export function FlutedGlassShader({
	126	added	fluteWidth,
	127	added	angle,
	128	added	refraction,
	129	added	crossSection,
	130	added	lightAngle,
	131	added	highlight,
	132	added	highlightColor,
	133	added	shadow,
	134	added	}: FlutedGlassShaderProps) {
	135	added	const shaderContext = useShaderContext();
	136	added
	137	added	// The dials live in uniforms, values the CPU writes and the GPU reads at
	138	added	// each draw, so changing them never rebuilds the output chain.
	139	added	const fluteWidthUniform = useAnimatableUniform(fluteWidth);
	140	added	const angleUniform = useAnimatableUniform(angle);
	141	added	const refractionUniform = useAnimatableUniform(refraction);
	142	added	const crossSectionUniform = useAnimatableUniform(crossSection);
	143	added	const lightAngleUniform = useAnimatableUniform(lightAngle);
@@ -0,0 +144,22 @@
	144	added	const highlightUniform = useAnimatableUniform(highlight);
	145	added	const shadowUniform = useAnimatableUniform(shadow);
	146	added
	147	added	// The highlight color decodes once into linear rgb (parseColor reads hex
	148	added	// and the wide-gamut oklch() and oklab() strings). The Vector3 and its
	149	added	// uniform are created once, and the effect below writes each new color
	150	added	// into the Vector3, so a new color never rebuilds the color transform.
	151	added	const highlightColorVector = useMemo(() => new Vector3(1, 1, 1), []);
	152	added	const highlightColorUniform = useMemo(
	153	added	() => uniform(highlightColorVector),
	154	added	[highlightColorVector],
	155	added	);
	156	added
	157	added	useEffect(() => {
	158	added	highlightColorVector.set(...parseColor(highlightColor));
	159	added	// The bare-uniform-write gotcha in docs/agents/tsl.md: a write into the
	160	added	// Vector3 repaints nothing on a static scene by itself.
	161	added	shaderContext?.scheduler.requestRender();
	162	added	}, [highlightColor, highlightColorVector, shaderContext]);
	163	added
	164	added	// ---------------------------------------------
	165	added	// CSS pixels -> device pixels

	166	added	// ---------------------------------------------
	167	added	// fluteWidth is in CSS pixels so a flute keeps its size on a 1x and a 2x
	168	added	// display, but the warp below counts device pixels. The renderer's pixel
	169	added	// ratio, which respects maxDPR clamping, converts between them; useResize
	170	added	// fires again on monitor moves and browser zoom, when that ratio changes.
	171	added	// Dither builds its ratio the same way.
	172	added	const resize = useResize();
	173	added	// Created once and never replaced: the effect below writes into it, and
	174	added	// the warp depends on the stable wrapper.
	175	added	const pixelRatioUniform = useMemo(
	176	added	() => uniform(resize.get()[2] \|\| 1),
	177	added	// eslint-disable-next-line react-hooks/exhaustive-deps
	178	added	[],
	179	added	);
	180	added
	181	added	useEffect(() => {
	182	added	const apply = () => {
	183	added	const rendererRatio = shaderContext?.renderer.three.getPixelRatio();
	184	added
	185	added	pixelRatioUniform.value =
	186	added	rendererRatio !== undefined && rendererRatio > 0 ? rendererRatio : resize.get()[2] \|\| 1;
	187	added	// A bare uniform write repaints nothing on a static scene, so ask for
	188	added	// a frame (the bare-uniform-write gotcha in docs/agents/tsl.md).
	189	added	shaderContext?.scheduler.requestRender();
	190	added	};
	191	added
	192	added	apply();
	193	added
	194	added	return resize.on('change', apply);
	195	added	}, [resize, pixelRatioUniform, shaderContext]);
	196	added
	197	added	// ---------------------------------------------
	198	added	// The glass at a pixel
	199	added	// ---------------------------------------------
	200	added	// Both passes below start here, so the light lands where the image bends.
	201	added	// `coordinate` is a pass coordinate, [0, 0] at the top-left with y growing
	202	added	// downward. Into the primitive's frame: subtract 0.5 to measure from the
	203	added	// canvas center, so the middle flute sits in the middle of the canvas and
	204	added	// the flutes turn around it as `angle` changes. Times screenSize, the
	205	added	// drawing buffer in device pixels, turns 0..1 into pixels, so a flute is as
	206	added	// wide across a wide canvas as across a tall one. The y flip points y up,
	207	added	// the frame the primitive's angle is measured in.
	208	added	const surfaceAt = (coordinate: ShaderNodeObject<Node>) =>
	209	added	fluteSurface(flipY(coordinate.sub(0.5).mul(screenSize)), {
	210	added	fluteWidth: fluteWidthUniform.mul(pixelRatioUniform),
	211	added	angle: angleUniform,
	212	added	refraction: refractionUniform,
	213	added	crossSection: crossSectionUniform,
	214	added	});
	215	added
	216	added	// ---------------------------------------------
	217	added	// Refraction: bend the scene through the flutes
	218	added	// ---------------------------------------------
	219	added	// A base-pass UV warp: the callback receives the 0..1 coordinate the
	220	added	// rendered scene is about to be sampled at and returns a replacement.
	221	added	useBasePassUv(
	222	added	(coordinate) => {
	223	added	const { bend } = surfaceAt(coordinate);
	224	added
	225	added	// Back out: the bend comes back in device pixels with y up. Flip y
	226	added	// again and divide by the buffer size to get a 0..1 offset in the
	227	added	// pass's frame, then fold anything off the canvas back onto it.
	228	added	const bent = coordinate.add(flipY(bend).div(screenSize));
	229	added
	230	added	return mirrorOntoCanvas(bent);
	231	added	},
	232	added	[fluteWidthUniform, angleUniform, refractionUniform, crossSectionUniform, pixelRatioUniform],
	233	added	);
	234	added
	235	added	// ---------------------------------------------
	236	added	// Lighting: a shadow at the grooves, a highlight on the walls
	237	added	// ---------------------------------------------
	238	added	// A post-process pass: the callback receives each pixel the scene drew,
	239	added	// already bent by the warp above (`input`, rgba), and returns a
	240	added	// replacement. The warp and this pass draw in the same output quad, and
	241	added	// uv() is the pixel's own pass coordinate, so surfaceAt(uv()) is the glass
	242	added	// at this pixel. The warp starts from uv() too while it runs first. A UV
	243	added	// warp mounted before FlutedGlass, such as Dither's, hands the glass its
	244	added	// moved coordinate instead, so there the bend and the light read the
	245	added	// surface at slightly different points. SHA-267 reworks how warps stack.
	246	added	usePostProcessPass(
	247	added	(input) => {
	248	added	const { slope, fromCenter, steepness } = surfaceAt(uv());
	249	added
	250	added	// The shadow. smoothstep() climbs from 0 to 1 over the outer
	251	added	// SHADOW_WIDTH of the way from the center to the groove, so the shade
	252	added	// is 0 across the middle of the flute and full right on the groove.
	253	added	// Times the steepness, it falls only where the glass is steep: a flat
	254	added	// top darkens on its walls and not across its flat middle, and a
	255	added	// prism, steep from ridge to groove, keeps the whole band. Both read
	256	added	// the glass without the groove smoothing, which pulls the slope to 0
	257	added	// on the groove's own pixel and would leave a bright line down the
	258	added	// middle of the dark one. Multiplying darkens without moving alpha,
	259	added	// and a transparent pixel, which holds no color here, stays
	260	added	// transparent.
	261	added	const shade = smoothstep(1 - SHADOW_WIDTH, 1, fromCenter)
	262	added	.mul(steepness)
@@ -0,0 +263,51 @@
	263	added	.mul(shadowUniform);
	264	added	const shaded = input.rgb.mul(shade.oneMinus());
	265	added
	266	added	// The light works in the primitive's frame, y up, where the slope
	267	added	// already is and where `angle` turns. Only directions meet in the math
	268	added	// below, so the frame changes nothing but which way the angles run.
	269	added	//
	270	added	// The surface normal: the direction the glass faces, one unit long.
	271	added	// Flat glass faces straight out of the screen, (0, 0, 1). Tilt it by
	272	added	// the slope, and a wall's normal leans the way the wall faces. At a
	273	added	// slope of 1, at a groove, it leans 45 degrees. normalize() scales the
	274	added	// vector back to one unit long.
	275	added	const normal = normalize(vec3(slope, 1));
	276	added
	277	added	// The direction toward the light, one unit long. lightAngle turns it
	278	added	// counterclockwise around the screen, the way `angle` turns the
	279	added	// flutes, and LIGHT_HEIGHT lifts it off the glass: cos(height) of it
	280	added	// lies along the screen and sin(height) points out of it. The height
	281	added	// is fixed, so its cosine and sine are worked out once here rather
	282	added	// than per pixel.
	283	added	const lightRadians = lightAngleUniform.mul(Math.PI / 180);
	284	added	const toLight = vec3(
	285	added	cos(lightRadians).mul(Math.cos(LIGHT_HEIGHT_RADIANS)),
	286	added	sin(lightRadians).mul(Math.cos(LIGHT_HEIGHT_RADIANS)),
	287	added	Math.sin(LIGHT_HEIGHT_RADIANS),
	288	added	);
	289	added
	290	added	// Specular light, the Blinn-Phong way. A mirror sends light from the
	291	added	// light to the eye where its normal points halfway between the two.
	292	added	// The eye looks straight at the screen, from (0, 0, 1), so the
	293	added	// halfway vector is the normalized sum of that and toLight. dot()
	294	added	// of two unit vectors is the cosine of the angle between them: 1
	295	added	// where the normal points exactly halfway, and lower as it turns
	296	added	// away. pow() raises that to HIGHLIGHT_SHARPNESS, which keeps values
	297	added	// near 1 and crushes the rest, so the highlight narrows to a bright
	298	added	// band on the part of each wall that leans toward the light by the
	299	added	// right amount. Flat glass and walls that face away stay dark. max()
	300	added	// keeps pow()'s base from going below 0.
	301	added	const halfway = normalize(toLight.add(vec3(0, 0, 1)));
	302	added	const specular = pow(max(dot(normal, halfway), 0), HIGHLIGHT_SHARPNESS);
	303	added
	304	added	// Added light, scaled by the dial and by the pixel's alpha, as
	305	added	// CursorRipple's shine is: a transparent pixel has nothing for light
	306	added	// to land on. The color multiplies last, as an argument (the
	307	added	// vec-uniform gotcha in docs/agents/tsl.md). Alpha passes through.
	308	added	const light = specular.mul(highlightUniform).mul(input.a).mul(highlightColorUniform);
	309	added
	310	added	return vec4(shaded.add(light), input.a);
	311	added	},
	312	added	[
	313	added	fluteWidthUniform,

	314	added	angleUniform,
	315	added	refractionUniform,
	316	added	crossSectionUniform,
	317	added	pixelRatioUniform,
	318	added	lightAngleUniform,
	319	added	highlightUniform,
	320	added	highlightColorUniform,
	321	added	shadowUniform,
	322	added	],
	323	added	);
	324	added
	325	added	return null;
	326	added	}

3 files 76 lines added, 0 removed0 of 3 files reviewed

apps/docs-tests/visual/fluted-glass.spec.ts
apps/docs-tests/visual/fluted-glass.spec.ts-snapshots/fluted-glass-default-chromium-linux.png
apps/docs-tests/visual/fluted-glass.spec.ts-snapshots/fluted-glass-default-chromium-darwin.png

apps/docs-tests/visual/fluted-glass.spec.tsNew fileReviewed

Base line	Head line	Change	Code

	1	added	import type { Page } from '@playwright/test';
	2	added
@@ -0,0 +3,11 @@
	3	added	import { expect, test } from './fixtures';
	4	added	import { waitForShader } from './helpers';
	5	added
	6	added	test('FlutedGlass — default story', async ({ page }) => {
	7	added	await page.goto('/components/fluted-glass?visualTest=1');
	8	added	await waitForShader(page);
	9	added	await expect(page.locator('canvas').first()).toHaveScreenshot('fluted-glass-default.png');
	10	added	});
	11	added
	12	added	// The probe draws hard diagonal stripes under FlutedGlass at its defaults.
	13	added	// Query params set the glass's dials, drop the glass with glass=none, or drop

	14	added	// the stripes with source=none.
	15	added	const PROBE = '/dev/fluted-glass-probe?visualTest=1';
	16	added	// FlutedGlass's default flute width in CSS pixels, which is device pixels at
	17	added	// the config's deviceScaleFactor of 1. A flute's center sits on the canvas
	18	added	// center, so the grooves fall half a flute either side of it and every flute
	19	added	// width beyond.
	20	added	const FLUTE_WIDTH = 40;
	21	added	// How far either side of a groove each sample column sits, in pixels. Wide
	22	added	// enough to step clear of the groove's own pixel, narrow enough that
	23	added	// unbroken stripes rarely change between the two columns.
	24	added	const COLUMN_OFFSET = 3;
	25	added	// The least the highlight must brighten the walls that face the light, in
	26	added	// brightness levels from 0 to 255, averaged over those walls. The defaults
	27	added	// measured about 18 on macOS, so this leaves room for another GPU.
	28	added	const GAIN_ON_LIT_WALLS = 6;
	29	added
	30	added	/** The probe's canvas as each pixel's brightness, the mean of its channels. */
	31	added	interface Brightness {
	32	added	width: number;
	33	added	/** Brightness from 0 to 255 at a pixel. */
	34	added	at: (x: number, y: number) => number;
	35	added	/** The middle band of rows, clear of the site header drawn over the canvas. */
	36	added	rows: number[];
	37	added	}
	38	added
	39	added	/**
	40	added	* Loads the probe with `query` appended and reads its canvas. The screenshot
	41	added	* decodes in the page, which has the browser's PNG decoder, and comes back
	42	added	* one byte of brightness per pixel.
	43	added	*/
	44	added	async function probeBrightness(page: Page, query: string): Promise<Brightness> {
	45	added	await page.goto(`${PROBE}${query}`);
	46	added	await page.locator('canvas').first().waitFor();
	47	added	await waitForShader(page);
	48	added
	49	added	const shot = await page.locator('canvas').first().screenshot();
	50	added	const { width, height, bytes } = await page.evaluate(async (pngBase64) => {
	51	added	const response = await fetch(`data:image/png;base64,${pngBase64}`);
	52	added	const bitmap = await createImageBitmap(await response.blob());
	53	added	const canvas = document.createElement('canvas');
	54	added
	55	added	canvas.width = bitmap.width;
	56	added	canvas.height = bitmap.height;
	57	added	const context = canvas.getContext('2d')!;
	58	added
	59	added	context.drawImage(bitmap, 0, 0);
	60	added	const rgba = context.getImageData(0, 0, bitmap.width, bitmap.height).data;
	61	added	let binary = '';
	62	added
	63	added	for (let index = 0; index < rgba.length; index += 4) {
	64	added	const sum = (rgba[index] ?? 0) + (rgba[index + 1] ?? 0) + (rgba[index + 2] ?? 0);
	65	added
	66	added	binary += String.fromCharCode(Math.round(sum / 3));
	67	added	}
	68	added
	69	added	return { width: bitmap.width, height: bitmap.height, bytes: btoa(binary) };
	70	added	}, shot.toString('base64'));
	71	added	const pixels = Buffer.from(bytes, 'base64');
	72	added	const rows: number[] = [];
	73	added
	74	added	for (let y = Math.floor(height * 0.2); y < Math.floor(height * 0.8); y += 1) rows.push(y);
	75	added
	76	added	return { width, at: (x, y) => pixels[y * width + x] ?? 0, rows };
	77	added	}
	78	added
	79	added	/** The x of every groove on a canvas `width` pixels wide, left to right. */
	80	added	function grooves(width: number): number[] {
	81	added	const center = width / 2;
	82	added	const first =
	83	added	center + FLUTE_WIDTH / 2 - Math.floor((center + FLUTE_WIDTH / 2) / FLUTE_WIDTH) * FLUTE_WIDTH;
	84	added	const positions: number[] = [];
	85	added
	86	added	for (let groove = first; groove < width; groove += FLUTE_WIDTH) {
	87	added	positions.push(Math.round(groove));
	88	added	}
	89	added
	90	added	return positions;
	91	added	}
	92	added
	93	added	/**
	94	added	* The share of rows where the pixels just left and just right of a groove
	95	added	* fall on different sides of mid-gray, over every groove on the canvas. On
	96	added	* unbroken stripes the two columns differ only where a stripe edge passes
	97	added	* between them. Through the glass they read the image from far apart, so
	98	added	* they differ far more often.
	99	added	*/
	100	added	function grooveBreaks(image: Brightness): number {
	101	added	let pairs = 0;
	102	added	let breaks = 0;
	103	added
	104	added	for (const groove of grooves(image.width)) {
	105	added	const left = groove - COLUMN_OFFSET;
	106	added	const right = groove + COLUMN_OFFSET;
	107	added
	108	added	if (left < 0 \|\| right >= image.width) continue;
	109	added	for (const y of image.rows) {
	110	added	pairs += 1;
	111	added	if (image.at(left, y) > 128 !== image.at(right, y) > 128) breaks += 1;
	112	added	}
	113	added	}
	114	added
	115	added	return breaks / pairs;
	116	added	}
	117	added
	118	added	/**
	119	added	* How much brighter `lit` is than `unlit` on average, over the left half and
	120	added	* the right half of every whole flute, two pixels clear of the grooves and
	121	added	* the center.
	122	added	*/
	123	added	function wallGain(lit: Brightness, unlit: Brightness): { left: number; right: number } {
	124	added	let left = 0;
	125	added	let right = 0;
	126	added	let count = 0;
	127	added
	128	added	for (const groove of grooves(lit.width)) {
	129	added	if (groove + FLUTE_WIDTH >= lit.width) continue;
	130	added	for (const y of lit.rows) {
	131	added	for (let step = 2; step <= FLUTE_WIDTH / 2 - 2; step += 1) {
	132	added	const leftX = groove + step;
	133	added	const rightX = groove + FLUTE_WIDTH - step;
	134	added
	135	added	left += lit.at(leftX, y) - unlit.at(leftX, y);
	136	added	right += lit.at(rightX, y) - unlit.at(rightX, y);
	137	added	count += 1;
	138	added	}
	139	added	}
	140	added	}
	141	added
	142	added	return { left: left / count, right: right / count };
	143	added	}
	144	added
	145	added	/**
	146	added	* The x of every column `near` to `far` pixels out from a groove, on both
	147	added	* sides of every groove on a canvas `width` pixels wide. Column 0 touches
	148	added	* the groove.
	149	added	*/
	150	added	function columnsNearGrooves(width: number, near: number, far: number): number[] {
	151	added	const columns: number[] = [];
	152	added
	153	added	for (const groove of grooves(width)) {
	154	added	for (let step = near; step <= far; step += 1) {
	155	added	columns.push(groove - 1 - step, groove + step);
	156	added	}
	157	added	}
	158	added
	159	added	return columns.filter((x) => x >= 0 && x < width);
	160	added	}
	161	added
	162	added	/**
	163	added	* The share of `unshaded`'s brightness that `shaded` loses, over the columns
	164	added	* `near` to `far` pixels out from every groove.
	165	added	*/
	166	added	function shadowShare(shaded: Brightness, unshaded: Brightness, near: number, far: number): number {
	167	added	let lost = 0;
	168	added	let total = 0;
	169	added
	170	added	for (const x of columnsNearGrooves(shaded.width, near, far)) {
	171	added	for (const y of shaded.rows) {
	172	added	lost += unshaded.at(x, y) - shaded.at(x, y);
	173	added	total += unshaded.at(x, y);
	174	added	}
	175	added	}
	176	added
	177	added	return lost / total;
	178	added	}
	179	added
	180	added	/** The largest brightness difference between two loads, pixel for pixel. */
	181	added	function maxDifference(first: Brightness, second: Brightness): number {
	182	added	let largest = 0;
	183	added
	184	added	for (const y of first.rows) {
	185	added	for (let x = 0; x < first.width; x += 1) {
	186	added	largest = Math.max(largest, Math.abs(first.at(x, y) - second.at(x, y)));
	187	added	}
	188	added	}
	189	added
@@ -0,0 +190,65 @@
	190	added	return largest;
	191	added	}
	192	added
	193	added	// A regenerated baseline of inert glass would pass its own screenshot, so
	194	added	// this checks that the glass breaks the stripes at all. Both loads turn the
	195	added	// light off, since the shadow and highlight also change the columns either
	196	added	// side of a groove, and this measures the bend alone. The same probe with
	197	added	// refraction 0 is the inert reference. At 1280 px wide a stripe repeats every
	198	added	// 113 px across a row, so the two columns differ on about 11% of rows without
	199	added	// the glass. Through it, they read the image 28 px apart, and differ on
	200	added	// about half.
	201	added	test('FlutedGlass — stripes break at the grooves', async ({ page }) => {
	202	added	const inert = grooveBreaks(await probeBrightness(page, '&highlight=0&shadow=0&refraction=0'));
	203	added	const glass = grooveBreaks(await probeBrightness(page, '&highlight=0&shadow=0'));
	204	added
	205	added	expect(glass, `groove breaks: glass ${glass}, inert ${inert}`).toBeGreaterThan(inert + 0.2);
	206	added	});
	207	added
	208	added	// The default light comes from the upper left, so over vertical flutes the
	209	added	// left wall of each flute faces it and catches the highlight, and the right
	210	added	// wall faces away. Both loads turn the shadow off, so the highlight is the
	211	added	// only difference between them.
	212	added	test('FlutedGlass — the highlight lights the walls that face the light', async ({ page }) => {
	213	added	const unlit = await probeBrightness(page, '&highlight=0&shadow=0');
	214	added	const lit = await probeBrightness(page, '&shadow=0');
	215	added	const gain = wallGain(lit, unlit);
	216	added	const message = `brightness gain: left walls ${gain.left}, right walls ${gain.right}`;
	217	added
	218	added	expect(gain.left, message).toBeGreaterThan(GAIN_ON_LIT_WALLS);
	219	added	expect(gain.right, message).toBeLessThan(gain.left / 4);
	220	added	});
	221	added
	222	added	// A flat top is flat across its middle and steep only at its walls, so its
	223	added	// shadow belongs on the walls. Both loads turn the highlight off, and only
	224	added	// the shadow differs between them. Columns 0 and 1 out from a groove sit on
	225	added	// the walls. Columns 4 to 9 sit a fifth to a half of the way to the center:
	226	added	// inside the shadow's reach, but on glass that is flat.
	227	added	test('FlutedGlass — on a flat top the shadow stays on the walls', async ({ page }) => {
	228	added	const unshaded = await probeBrightness(page, '&crossSection=flat&highlight=0&shadow=0');
	229	added	const shaded = await probeBrightness(page, '&crossSection=flat&highlight=0&shadow=1');
	230	added	const walls = shadowShare(shaded, unshaded, 0, 1);
	231	added	const flatTop = shadowShare(shaded, unshaded, 4, 9);
	232	added	const message = `share of brightness the shadow takes: walls ${walls}, flat top ${flatTop}`;
	233	added
	234	added	expect(walls, message).toBeGreaterThan(0.1);
	235	added	expect(flatTop, message).toBeLessThan(0.02);
	236	added	});
	237	added
	238	added	// With nothing to bend and no light, the glass draws the Source exactly as
	239	added	// the Source alone does.
	240	added	test('FlutedGlass — inert glass leaves the Source unchanged', async ({ page }) => {
	241	added	const source = await probeBrightness(page, '&glass=none');
	242	added	const inert = await probeBrightness(page, '&refraction=0&highlight=0&shadow=0');
	243	added
	244	added	expect(maxDifference(source, inert)).toBeLessThanOrEqual(1);
	245	added	});
	246	added
	247	added	// Over a transparent scene the canvas shows the probe page's black
	248	added	// background. Light added to a pixel with no coverage would show on it.
	249	added	test('FlutedGlass — a transparent pixel gets no highlight', async ({ page }) => {
	250	added	const black = await probeBrightness(page, '&glass=none&source=none');
	251	added	const glass = await probeBrightness(page, '&source=none&highlight=1&shadow=1');
	252	added
	253	added	expect(maxDifference(black, glass)).toBeLessThanOrEqual(1);
	254	added	});