threejs-temporal-surfaces

Name: threejs-temporal-surfaces
Author: scottstts

377stars47forks

How to install threejs-temporal-surfaces?

scottstts/threejs-awesome-graphics-agent-skills/threejs-temporal-surfaces

$npx -y skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-temporal-surfaces

Installs into the current project.

Summary

Build view-aligned and screen-space surface effects in Three.js. Use for touch-history frost and thaw, ping-pong accumulation, reduced-resolution blur, crystalline masks, two-scale refraction, and procedural rain droplets that refract and blur a background through wet glass.

Files · 1

View on GitHub

SKILL.md

1	# Temporal Surfaces
2
3	Choose persistent history or procedural screen-space evolution explicitly. Do
4	not fake accumulation with time-only noise, and do not allocate history for an
5	effect whose complete state is analytic in time.
6
7	## Pipeline
8
9	```text
10	persistent surface: input -> ping-pong state -> blur -> structure -> refraction
11	procedural surface: time/coverage -> analytic field -> optical normal -> refraction/blur
12	```
13
14	Read [references/ping-pong-accumulation.md](references/ping-pong-accumulation.md)
15	for an exact frost pass graph, pointer-history channels, blur and refraction
16	coupling, and implementation defects that must be corrected.
17
18	Read the
19	[touch-history frost implementation](examples/touch-history-frost/frost-surface-effect.js) for the
20	previous/deposit/next state transition, reduced blur, static structures,
21	frost-mask composition, and two-scale refraction.
22
23	Read [references/refractive-window-rain.md](references/refractive-window-rain.md)
24	and the
25	[refractive window rain implementation](examples/refractive-window-rain/window-rain-effect.js)
26	for layered static and travelling droplets, finite-difference optical normals,
27	background refraction, stochastic disc blur, aspect fill, and presentation.
28
29	## Rules
30
31	- Separate persistent state, analytic procedural state, and scene color.
32	- Preserve separate visible-mask and tilt-response channels.
33	- Use half-float for this history path unless a measured lower format is equivalent.
34	- Convert per-frame history decay to frame-rate-independent decay.
35	- Run the two-pass scene blur at reduced resolution.
36	- Pre-render static procedural textures once.
37	- Define and test resize/reset behavior for both history targets and static targets.
38	- Do not route world footprints, object-UV paint, or simulation-plane wetness here; this skill is view-aligned or screen-space.
39
40	## Routing boundary
41
42	Use `$threejs-procedural-vfx` for world- or object-space residue and particles.
43	Use `$threejs-precipitation-surfaces` for world-space rain, puddles, snow, and
44	weather-surface coupling. This skill owns view-aligned wet-glass optics and
45	screen-space persistent history.

People who liked this also viewed

6 picks

Type

threejs-temporal-surfaces

377stars47forks

View on GitHub

How to install threejs-temporal-surfaces?

scottstts/threejs-awesome-graphics-agent-skills/threejs-temporal-surfaces

$npx -y skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-temporal-surfaces

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Temporal Surfaces
2
3	Choose persistent history or procedural screen-space evolution explicitly. Do
4	not fake accumulation with time-only noise, and do not allocate history for an
5	effect whose complete state is analytic in time.
6
7	## Pipeline
8
9	```text
10	persistent surface: input -> ping-pong state -> blur -> structure -> refraction
11	procedural surface: time/coverage -> analytic field -> optical normal -> refraction/blur
12	```
13
14	Read [references/ping-pong-accumulation.md](references/ping-pong-accumulation.md)
15	for an exact frost pass graph, pointer-history channels, blur and refraction
16	coupling, and implementation defects that must be corrected.
17
18	Read the
19	[touch-history frost implementation](examples/touch-history-frost/frost-surface-effect.js) for the
20	previous/deposit/next state transition, reduced blur, static structures,
21	frost-mask composition, and two-scale refraction.
22
23	Read [references/refractive-window-rain.md](references/refractive-window-rain.md)
24	and the
25	[refractive window rain implementation](examples/refractive-window-rain/window-rain-effect.js)
26	for layered static and travelling droplets, finite-difference optical normals,
27	background refraction, stochastic disc blur, aspect fill, and presentation.
28
29	## Rules
30
31	- Separate persistent state, analytic procedural state, and scene color.
32	- Preserve separate visible-mask and tilt-response channels.
33	- Use half-float for this history path unless a measured lower format is equivalent.
34	- Convert per-frame history decay to frame-rate-independent decay.
35	- Run the two-pass scene blur at reduced resolution.
36	- Pre-render static procedural textures once.
37	- Define and test resize/reset behavior for both history targets and static targets.
38	- Do not route world footprints, object-UV paint, or simulation-plane wetness here; this skill is view-aligned or screen-space.
39
40	## Routing boundary
41
42	Use `$threejs-procedural-vfx` for world- or object-space residue and particles.
43	Use `$threejs-precipitation-surfaces` for world-space rain, puddles, snow, and
44	weather-surface coupling. This skill owns view-aligned wet-glass optics and
45	screen-space persistent history.

People who liked this also viewed

6 picks

Type