Three.js Hypnotic Effects: Shaders, Feedback, Depth and Flow
For hypnotic browser graphics, the renderer matters less than continuity: the GPU needs to sustain a field that evolves smoothly, stays responsive, and never exposes the machinery underneath.
Use time, not frame counts
Animation should be derived from elapsed time so the scene remains continuous across different refresh rates and temporary frame drops. Sine, cosine, phase offsets, and periodic coordinates make loops mathematically seamless instead of relying on a hard frame-number reset.
Full-screen shaders can replace heavy scenes
A ShaderMaterial on a single full-screen triangle or plane can synthesize depth, spirals, fog, interference, and color directly per pixel. This reduces draw calls and makes it practical to fill the viewport with complex procedural structure while keeping the JavaScript scene graph simple.
Feedback creates visual memory
Ping-pong render targets allow a frame to be transformed and blended into the next one. Slightly scaling, rotating, or warping the previous frame before recombination creates recursive echoes and afterimage trails. On mobile hardware this can be expensive, so mathematical approximations or lower-resolution feedback buffers are useful fallbacks.
Raymarching creates impossible volume
Signed-distance fields and raymarching can describe tunnels, repeated cells, folded spaces, and smooth blends without traditional polygon modeling. The cost is pixel-bound rather than mesh-bound, so adaptive quality and resolution control are essential.
Performance is part of the illusion
Dropped frames break absorption immediately. Clamp device pixel ratio, batch or instance repeated objects, limit expensive full-screen passes, reuse allocations, and explicitly dispose GPU resources. The visual system should become simpler before the frame pacing becomes unstable.