Orb-to-Scene RevealGPGPU point-cloud morph shader for Three.js
Inspect a Three.js point-cloud morph that moves 16K–64K particles from an orb into seeded terrain using GPGPU feedback, lifetime resets, fog, and GLSL.
How GPGPU feedback drives the point-cloud transition.
- Family
- Point-cloud Transition
- Status
- Active
- Drivers
- Time · Reveal progress · Particle lifetime
- Primitive
- Point cloud · Data textures · Procedural terrain target · Orb target
- Pipeline
- GPGPU position feedback · Lifetime reset · 4D simplex flow field · Vertex target morph · Lit point sprites and fog
- Source
- 4 mapped units
A GPGPU position texture resets each particle by lifetime, pushes it through a 4D simplex field, and blends the rendered point from an orb target into seeded procedural terrain. Lit sprites and depth fog complete the scene reveal.
The visual behavior and production defaults are retained in the TSL adaptation. Only application-specific orchestration and unlicensed model inputs were replaced, leaving a focused study that can be read independently of the original product.
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
- Initialize the particle targets
Each point receives an orb position, a seeded terrain position, and a deterministic lifetime within a 16K or 64K budget.
- Advance the GPGPU feedback texture
A compute shader resets expired points and moves active particles through the shared 4D simplex flow field.
- Morph orb into terrain
Reveal progress blends the vertex targets while the live simulation adds controlled drift to the transition.
- Light and fog the sprites
The fragment stage shades circular points and fades them into depth fog to complete the scene reveal.
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 PLY target is replaced by deterministic seeded terrain. The orb target, lifetime reset, flow field, morph, sprite lighting, and fog remain.
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;
#include ../includes/simplexNoise4d.glsl
void main() {
float time = uTime * 0.1;
vec2 uv = gl_FragCoord.xy / resolution.xy;
vec4 particle = texture(uParticles, uv);
vec4 base = texture(uBase, uv);
if (particle.a >= 1.0) {
particle.a = mod(particle.a, 1.0);
particle.xyz = base.xyz;
} else {
float strength = simplexNoise4d(vec4(base.xyz * 0.7, time + 1.0));
float influence = (uFlowFieldInfluence - 0.5) * -2.0;
strength = smoothstep(influence, 1.0, strength);
vec3 flowField = vec3(
simplexNoise4d(vec4(particle.xyz * uFlowFieldFrequency + 0.0, time)),
simplexNoise4d(vec4(particle.xyz * uFlowFieldFrequency + 1.0, time)),
simplexNoise4d(vec4(particle.xyz * uFlowFieldFrequency + 2.0, time))
);
flowField = normalize(flowField);
particle.xyz += flowField * uDeltaTime * strength * uFlowFieldStrength;
particle.a += uDeltaTime * 0.35;
}
gl_FragColor = particle;
}