Point-Cloud MaterializationVertex-colored GLB point-cloud shader for Three.js
Explore four reversible Three.js TSL transitions and six independent point motions that materialize a local GLB as a color-preserving point surface.
How model color and complexity shape the point cloud.
- Family
- GPGPU Materialization
- Status
- Archived · fully demonstrated
- Drivers
- Time · State · Transition progress · Point motion · Local geometry · Vertex color · Model complexity
- Primitive
- Point cloud · Data textures · Procedural torus knot or local GLB
- Pipeline
- GPGPU flow field · Deterministic surface sampling · Vertex and material color · Adaptive point sizing · Four selectable transition paths · Six independent point motions · Alpha-hashed settled surface
- Source
- 4 mapped units
The live TSL presentation separates four reversible transitions—organic arcs, a spiral vortex, a radial bloom, and a traveling wave—from six continuous point motions: drift, orbit, breathe, ripple, twist, and flutter. The built-in torus knot still resolves as a polished alpha-hashed surface with normal-offset sparks, while a local GLB becomes a dense anchored point surface that preserves RGB vertex and base-material colors with adaptive sizing.
The extracted GLSL remains archived unchanged for provenance. The live TSL presentation combines four reversible 3.5-second transitions with six independent looping point motions and shared built-in and uploaded endpoints.
This preview uses one managed WebGPU renderer with automatic WebGL2 fallback, a capped pixel ratio, deterministic geometry, and complete GPU cleanup when you leave or switch studies.
Pipeline, step by step
- Flow the unresolved cloud
The live TSL field drives deterministic 4D simplex motion until global materialization begins.
- Sample model color
Triangle surfaces are sampled deterministically; interpolated RGB vertex colors multiply each mesh's base-material color.
- Choose a transition journey
Organic arcs, a spiral vortex, a radial bloom, and a traveling wave each trace a reversible 3.5-second path between the same endpoints.
- Animate the unresolved points
Drift, orbit, breathe, ripple, twist, and flutter loop independently through the cloud and fade away as the settled surface appears.
- Resolve the settled surface
The torus knot fades in as one polished alpha-hashed surface with normal-offset sparks; an uploaded GLB remains a dense anchored point surface with adaptive sizing.
CompatibilityThe live study uses Three.js 0.185.0, preferring WebGPU and falling back automatically to WebGL2. Source, classification, and notes remain readable when graphics are unavailable, animation is disabled, or the graphics device is lost.
CreditFirst-party GLSL is extracted from commit d018f6d057c8f30144979bbcc95436cfb405d7c5; the shared 4D simplex dependency retains the Ashima MIT notice.
Open-source adaptationThe unlicensed GLB pendant is replaced by a deterministic torus knot and an optional browser-local GLB target. Imported RGB vertex colors multiply the model's base-material color; textures remain local and are not sampled. The extracted archival GLSL remains unchanged for provenance, including its original audio branches. The live TSL presentation intentionally departs from the archived staged reveal by separating four reversible transition journeys from six independent looping point motions while retaining shared built-in and uploaded endpoints.
Materialize your own model.
Choose one self-contained GLB 2.0 file. Echoes samples its triangle surfaces into up to 64K points, preserves RGB vertex and base-material colors, and uses adaptive point sizing as model complexity increases.
The file is processed in memory in this browser tab. It is never uploaded, stored, or included in analytics.
GLB 2.0 · 20 MB maximum · static triangle meshes. RGB vertex colors multiply each mesh's base-material color. Texture maps, animation, cameras, and lights are ignored. Draco, Meshopt, and instancing are not supported.
Procedural torus knot is active.
GLSL source: GPGPU compute, vertex, and fragment stages.
uniform float uTime;
uniform float uDeltaTime;
uniform sampler2D uBase;
uniform float uFlowFieldInfluence;
uniform float uFlowFieldStrength;
uniform float uFlowFieldFrequency;
// Audio uniforms
uniform float uAudioLevel;
uniform float uBass;
uniform float uMid;
uniform float uTreble;
uniform float uShaderEnabled;
uniform float uFlowEnabled;
uniform float uMidFlowTimeEnabled;
uniform float uMidFlowTimeStrength;
uniform float uBassFlowInfluenceEnabled;
uniform float uBassFlowInfluenceStrength;
uniform float uTrebleFlowFrequencyEnabled;
uniform float uTrebleFlowFrequencyStrength;
uniform float uAudioGateEnabled;
uniform float uAudioGateLow;
uniform float uAudioGateHigh;
uniform float uAudioGateBassMix;
uniform float uBassFlowStrengthEnabled;
uniform float uBassFlowStrength;
uniform float uAudioFlowEnabled;
uniform float uAudioFlowStrength;
uniform float uReturnEnabled;
uniform float uReturnStrength;
#include ../includes/simplexNoise4d.glsl
void main() {
float time = uTime * 0.2 + uMid * uMidFlowTimeStrength * uMidFlowTimeEnabled * uShaderEnabled;
vec2 uv = gl_FragCoord.xy / resolution.xy;
vec4 particle = texture(uParticles, uv);
vec4 base = texture(uBase, uv);
float strength = simplexNoise4d(vec4(base.xyz * 0.7, time + 1.0));
float influence = (uFlowFieldInfluence - 0.5) * (- 2.0) - uBass * uBassFlowInfluenceStrength * uBassFlowInfluenceEnabled * uShaderEnabled;
strength = smoothstep(influence, 1.0, strength);
float freq = uFlowFieldFrequency + uTreble * uTrebleFlowFrequencyStrength * uTrebleFlowFrequencyEnabled * uShaderEnabled;
vec3 flowField = vec3(
simplexNoise4d(vec4(particle.xyz * freq + 0.0, time)),
simplexNoise4d(vec4(particle.xyz * freq + 1.0, time)),
simplexNoise4d(vec4(particle.xyz * freq + 2.0, time))
);
flowField = normalize(flowField);
float audioInput = uAudioLevel + uBass * uAudioGateBassMix;
float audioActivity = mix(1.0, smoothstep(uAudioGateLow, uAudioGateHigh, audioInput), uAudioGateEnabled);
float bassStrength = uBass * uBassFlowStrength * uBassFlowStrengthEnabled * uShaderEnabled;
float audioStrength = audioInput * uAudioFlowStrength * uAudioFlowEnabled * uShaderEnabled;
float currentStrength = (uFlowFieldStrength + bassStrength + audioStrength) * audioActivity * uFlowEnabled * uShaderEnabled;
particle.xyz += flowField * uDeltaTime * strength * currentStrength;
particle.xyz += (base.xyz - particle.xyz) * uDeltaTime * uReturnStrength * uReturnEnabled * uShaderEnabled;
gl_FragColor = particle;
}