The Architecture of 3D Hypnotism: Advanced Rendering, Procedural Geometry, and Shader Ecosystems in Three.js

Full report

On this page

The intersection of computer graphics, neuroscience, and computational mathematics has given rise to highly immersive web experiences capable of inducing trance-like cognitive states. These visual phenomena, commonly referred to as programmatic or 3D hypnotism, rely on precise mathematical continuousness, high-contrast visual stimuli, and fluid motion to captivate the human visual cortex. Through the utilization of Three.js—a high-level JavaScript abstraction layer over the native WebGL and emerging WebGPU APIs—creative technologists can engineer sophisticated procedural geometries, complex shader networks, and audio-reactive systems that run at an unwavering sixty frames per second directly within the browser1.

Creating hypnotic illusions in three dimensions is fundamentally distinct from standard 3D modeling or video playback. It relies on the procedural generation of perfect loops, infinite permutations driven by mathematical formulas, and the manipulation of rendering pipelines to create psychological motion aftereffects1. By moving away from static assets and relying on time-based trigonometric functions, developers craft infinite, seamless variations of a scene. This report provides an exhaustive analysis of the mechanics behind 3D hypnotism using Three.js, examining the psychological underpinnings of optical illusions, the construction of procedural geometries like logarithmic spirals, advanced GLSL shader implementations, audio-reactive entrainment, the integration of React Three Fiber, and the stringent performance optimizations required to sustain the illusion on consumer hardware.

Neuro-Perceptual Foundations of Visual Illusions

To engineer a compelling hypnotic experience, it is necessary to exploit specific perceptual mechanisms within the human visual system. Optical illusions, particularly those involving continuous geometric motion, manipulate how the brain processes depth, speed, and contrast.

The motion aftereffect, frequently referred to as the waterfall illusion, is a powerful tool in the creation of hypnotic visual states3. When the human eye fixates on continuous movement in a single direction—such as an endless tunnel, a cascading particle field, or a rotating spiral—the motion-selective neurons in the visual cortex begin to experience neural fatigue5. If the observer subsequently shifts their gaze to a stationary object, these fatigued neurons fire at a lower baseline rate than their counterparts, causing the brain to incorrectly perceive motion in the opposite direction3. In programmatic graphics, inducing this effect requires unbroken, seamless motion. Frame counting is highly discouraged; instead, animations must rely on continuous time-based mathematics utilizing sine, cosine, and modulo operators to ensure that the visual flow is never interrupted by loading states or rendering hitches1.

The hypnotic quality is further enhanced by utilizing high-contrast op-art aesthetics, popularized by artists such as Bridget Riley, which create geometric interference patterns and vibratory optical effects6. The combination of movement and high-contrast shapes, such as concentric polygons or spiraling hexagons, triggers a sensory overload that forces the viewer's focus to a single point, effectively inducing a flow state.

Hypnotic 3D experiences often centralize the viewer's focal point. By forcing the virtual camera along an infinite, twisting path or rotating concentric geometries around a central axis, the application demands total visual concentration7. This required concentration strips away extraneous cognitive loads, inducing a meditative state often sought after in digital art installations and web-based minigames7. The visual flow behaves akin to sensory entrainment, particularly when synchronized with rhythmic audio. Stroboscopic effects or pulsing visuals that match alpha-wave frequencies can theoretically influence neural oscillatory states, anchoring the user in a deep meditative flow9.

 

AI-Assisted Generative Architecture and Prompt Engineering

The development of hypnotic WebGL shaders and Three.js environments has been significantly accelerated by large language models. The integration of generative AI allows developers to rapidly prototype the mathematical foundations of perfect loops and infinite variations. AI assistants can instantly generate procedural code based on natural language descriptions of mood, motion, and geometric relationships1.

Producing effective hypnotic code via AI requires strict prompt engineering guardrails. Developers establish a technical preamble that constraints the AI's output to a specific architectural format. For instance, the prompt must mandate the use of ES6 module resolution, mapping specific pinned versions of Three.js to ensure compatibility12. The prompt must dictate that the canvas fills the entire browser window responsively, utilizes a dark background to maximize contrast, and strictly avoids user interface overlays, text, or manual controls that would break the visual immersion1. Most importantly, the AI must be instructed to rely exclusively on procedural generation—forbidding the loading of external image assets or models—and to drive all motion seamlessly using time-based math rather than incremental frame counting1.

Once these guardrails are established, prompt iteration shifts to the aesthetic layer. Directing the AI to generate "hexagons that slowly rotate and scale in a breathing pattern with a rainbow trail" or "rotating concentric rings with alternating black and white segments that create a Moiré interference pattern" yields rapid prototypes of op-art1. These procedural outputs can be tweaked in seconds, allowing the developer to alter frequencies, color palettes, and geometric densities until the optimal hypnotic cadence is achieved.

Procedural Geometry and Infinite Environments

The illusion of infinity is central to 3D hypnotism. Loading static 3D models from external file formats is often inefficient and breaks the continuous procedural nature of the illusion. Instead, the Three.js ecosystem relies on primitive and parametric geometries that can be mathematically warped to create endless environments2.

Spline Extrusion and the Moving Frenet-Serret Frame

The "infinite tunnel" is a staple of hypnotic visual design, placing the viewer inside an endless, twisting conduit. This is achieved not by building a massive geometric mesh, but by extruding a 2D shape along a closed 3D mathematical curve and infinitely looping the camera's position along that same curve13.

The architecture begins by defining a 3D spline using the THREE.CatmullRomCurve3 class, which generates a smooth curve through an array of randomized or patterned spatial coordinates13. Once the spline is established, a THREE.TubeGeometry is constructed by extruding a circular cross-section along the exact path13.

A critical mathematical challenge in this extrusion is preventing the tunnel from twisting, collapsing, or exhibiting flipped normals at sharp curves. To solve this, Three.js employs the Frenet-Serret formulas to calculate a moving reference frame—consisting of a Tangent, Normal, and Binormal (TNB)—along the curve15. By taking the derivative of the normalized tangent and carrying the previous frame's binormal forward (the moving Frenet frame technique), the geometry maintains structural integrity without collapsing, creating a perfectly smooth conduit for the viewer to travel through15.

Because the spline is configured as a closed loop, its starting and ending coordinates are mathematically identical14. In the continuous rendering loop, a fractional time variable increments on every frame. The camera's position is updated by calculating a precise coordinate on the curve based on this time fraction. To ensure the camera smoothly follows the tunnel's trajectory, a secondary coordinate slightly ahead of the camera is calculated, and the camera invokes the lookAt() method to face this forward trajectory13. When the time variable reaches its maximum bounds, modulo math resets the value. Because the geometry is a closed loop, this positional reset is visually imperceptible to the user, yielding the flawless illusion of an infinite journey13.

Logarithmic Spirals and Geometric Saturation

While continuous tunnels provide forward momentum, spirals induce rotational hypnotism. Archimedean spirals expand at a constant rate, but logarithmic spirals—often found in nature, such as in nautilus shells, hurricanes, or galaxy formations—expand exponentially, creating a much stronger sensation of infinite depth and structural scale16.

In a three-dimensional Cartesian coordinate system, a logarithmic spiral curve connecting two points can be mathematically derived. The relationship between the angle [Figure omitted from source export] and the radius [Figure omitted from source export] is governed by the equation [Figure omitted from source export], which can be parameterized along the Z-axis as [Figure omitted from source export]16.

To construct this procedurally in Three.js, developers subclass the THREE.Curve base object. By extending the class and overriding the getPoint(t) method, one can define the precise [Figure omitted from source export] and [Figure omitted from source export] coordinates for any float [Figure omitted from source export] between 0 and 1\. The radial expansion is calculated separately from the vertical travel, utilizing trigonometric functions mixed with exponential growth17.

Once the curve generates an array of vertices, it can be visualized using TubeGeometry or BufferGeometry18. To construct a hypnotic "galaxy" entity, developers merge hundreds of these discrete geometries. However, rendering thousands of complex spirals individually introduces massive overhead19.

This necessitates the use of THREE.InstancedMesh. Instanced rendering allows the application to define a single geometric buffer and a single material, but render thousands of copies of it in a single GPU draw call7. Each instance maintains its own lightweight transformation matrix containing position, rotation, and scale data. For mobile-first hypnotic experiences—such as endless runner games inside kaleidoscopic tunnels—InstancedMesh is mandatory7. By utilizing a compute shader or CPU-side typed arrays to iteratively update the transformation matrices of these instances every frame, the application can simulate fluid dynamics, flocking behaviors, or rotating op-art interference patterns without inducing CPU bottlenecks2.

Advanced Shader Programming and Optical Distortions

While procedural geometry defines the structural shape of the illusion, custom shaders define its behavior. Shaders are highly parallelized programs written in GLSL (OpenGL Shading Language) that execute directly on the GPU, calculating transformations for every vertex and colors for every pixel on the screen22. Three.js exposes this capability through ShaderMaterial and RawShaderMaterial, providing uniforms, varying variables, and attributes to pass data seamlessly from the CPU2.

The Mathematics of Log-Polar Mapping

A cornerstone technique in 2D and 3D optical illusions is log-polar mapping. This mathematical transformation converts standard Cartesian coordinates [Figure omitted from source export] into logarithmic polar coordinates [Figure omitted from source export]11. By doing so, operations that represent complex rotations or scaling in standard space become simple horizontal or vertical translations in log-polar space, making them computationally trivial to animate25.

The continuous mapping function is defined mathematically as:

[Figure omitted from source export]

[Figure omitted from source export]

In a GLSL fragment shader, this is executed by transforming the current normalized pixel coordinates. The built-in length() function derives the magnitude (the distance from the origin), and the atan() function derives the angle26. The GLSL implementation typically follows this structure:

 

 

 

OpenGL Shading Language

vec2 logPolar(vec2 pos) {     return vec2(log(length(pos)), atan(pos.y, pos.x)); }

Because atan in GLSL can return values in the range of [Figure omitted from source export] depending on its overload parameters, this radial angle must be mapped cleanly to texture coordinates or gradient color values26. The visual implications of this mapping are profound. If a developer applies a standard grid or polka-dot pattern to the screen, passing the coordinates through a log-polar transformation first will warp the rigid grid into an infinitely repeating spiral or a concentric expanding tunnel11. By simply adding a time uniform (u\_time) to the [Figure omitted from source export] (radius) and [Figure omitted from source export] (angle) components before sampling the texture, the shader produces an infinite spiral zoom—a quintessential hypnotic effect that would otherwise require complex 3D modeling26.

To correct for the geometric distortion that log-polar mapping causes to Signed Distance Fields (SDFs) when utilizing Raymarching techniques for 3D rendering, the geometry must be uniformly scaled by the radial distance [Figure omitted from source export]. Integrating this correction allows for the rendering of perfectly crisp implicit 3D surfaces that twist infinitely toward a central singularity without breaking anti-aliasing constraints11.

Feedback Loops and Ping-Pong Rendering

Another sophisticated shader technique for inducing hypnotic visuals is texture feedback, often referred to as "ping-pong rendering"27. This technique allows the output of the current frame to be preserved and utilized as the input for the subsequent frame, enabling the creation of fluid dynamics, cellular automata, reaction-diffusion systems, and infinite fractal mirrors29.

Because the WebGL specification strictly prohibits reading from and writing to the exact same memory buffer simultaneously (a feedback loop error), ping-pong rendering requires allocating two identical WebGLRenderTarget objects27. The algorithm proceeds through a strict sequence: The scene or compute pass is rendered utilizing RenderTarget A as the data source texture. The output of this shader is written directly into RenderTarget B. At the conclusion of the frame, the references are swapped, meaning RenderTarget B becomes the input for the next frame, and RenderTarget A becomes the new output destination28.

This technique allows shaders to accumulate visual data over time. By slightly scaling up and rotating the input texture before blending it with newly rendered scene data, the developer creates an endless recursive mirror effect, drawing users deeper into the display29.

However, architectural hardware disparities present severe challenges. While discrete desktop GPUs handle render target swaps highly efficiently, mobile hardware utilizes Tile-Based Deferred Rendering (TBDR)31. On mobile devices, changing a framebuffer state triggers a massive pipeline stall, as the GPU must halt processing, resolve the tile memory, and push it back to the main system memory. Consequently, extensive ping-pong shading on mobile devices can drastically cripple frame rates31. For mobile-first hypnotic experiences, developers must carefully weigh the visual benefit of feedback loops against this performance penalty, often opting for purely mathematical spatial displacement over texture feedback where possible31.

Volumetric Caustics, Refraction, and Raytracing

Creating realistic material properties, such as the hypnotic dispersion of light through a diamond or the undulating caustics of water, requires techniques that push the boundaries of standard WebGL. For objects like diamonds, simulating internal reflections, refractions, and chromatic splitting creates a convincing, sparkling focal point that holds the viewer's attention33.

Achieving this in Three.js involves utilizing Bounding Volume Hierarchies (BVH). The three-mesh-bvh library generates spatial index structures that allow custom shaders to perform highly efficient raycasting directly against the geometry's faces33. The custom ShaderMaterial incorporates uniforms for the environment map, the BVH acceleration structure, the index of refraction (IOR), bounce counts, and chromatic aberration strength33. As the virtual camera orbits the object, the shader calculates multiple internal ray bounces, splitting the white light into spectral colors to simulate the physical properties of a gemstone, creating a mesmerizing optical display33.

For fluid caustics, ping-pong rendering is once again employed to generate the normal maps of a simulated water surface34. By extracting the normals and refracting the incident light vectors through them, the shader calculates the areas of light concentration (caustics) on the surfaces below. By passing these calculated light intensities into a render target, they can be projected onto the environment, yielding the soothing, undulating light patterns characteristic of shallow water34.

Audio Reactivity: Entraining Visuals to Sound

To elevate a visual loop from a simple graphical demonstration to a truly hypnotic experience, cross-modal sensory stimulation is required. Audio reactivity—where the visual environment throbs, warps, and shifts in perfect synchronization with a musical track—creates a feedback loop in the user's perception, strongly reinforcing the rhythmic trance10.

The Web Audio API and AnalyserNode

Implementing real-time audio visualization in the browser relies entirely on the native Web Audio API36. By routing an audio source—such as an HTML \<audio\> element, a microphone input via getUserMedia, or a synthesized Tone.js sequence—through an AudioContext, developers can tap into the signal using an AnalyserNode10.

The AnalyserNode acts as the bridge between sound and graphics. It performs a Fast Fourier Transform (FFT) on the audio signal, mathematically decomposing the complex waveform into discrete frequency bands (e.g., sub-bass, mid, treble)10. The granularity of this data is determined by the fftSize property; a higher value provides finer frequency resolution at the cost of processing time38.

On every iteration of the requestAnimationFrame loop, the application requests the current state of the audio data:

 

 

 

JavaScript

const data \= new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(data);

This populates the typed array with values ranging from 0 to 255, representing the amplitude of each specific frequency band at that exact millisecond10. Alternatively, getByteTimeDomainData can be utilized to extract the raw un-transformed waveform data10.

Beat Detection and Signal Smoothing

To map this data meaningfully into a Three.js scene, raw frequency arrays must be processed into normalized scalar values35. A simplistic approach involves calculating the average amplitude across all bins. However, standard averaging often results in jittery, noisy visual movement that breaks the hypnotic flow38.

To create a hypnotic, "breathing" aesthetic, developers must implement temporal smoothing algorithms. By utilizing linear interpolation (lerp), the visual target value gradually eases toward the current audio amplitude, smoothing out the harsh peaks and valleys of the raw audio signal38.

For more precise audio reactivity, energy-based beat detection is employed. This involves calculating the instantaneous energy of the signal, mathematically defined as [Figure omitted from source export], and maintaining a history buffer of the last several frames36. A beat is triggered only when the instantaneous energy drastically exceeds the mean of the history buffer by a specific threshold multiplier36.

Shader Integration and Particle Physics

Once these scalar values are computed on the CPU, they are injected directly into the active ShaderMaterial as uniforms (e.g., uniform float u\_audioLevel)10. The application of this data varies based on the desired visual outcome.

 

In advanced particle systems, such as audio-reactive fire simulations, physics variables are strictly controlled by the audio data. Gravity applies a constant downward force, while drag is calculated against the velocity of the particles. To mimic the realistic flickering tongues of a flame—caused by hot, less dense gases moving upward into low-pressure regions—the simulation spawns randomized pressure points37. As the audio intensity increases, the lifespan and gravitational pull of these pressure points alter, causing the fire to dance and surge in sync with the music, providing a highly organic hypnotic anchor37.

Post-Processing Pipelines for Ethereal Aesthetics

While procedural geometry and standard materials form the structural foundation of a scene, the surreal, ethereal qualities required for hypnotism—such as glowing light blooms, chromatic aberration, pixel distortion, and trailing afterimages—are generated during post-processing39. In Three.js, post-processing is a technique wherein the entire 3D scene is rendered not directly to the screen, but into an offscreen 2D texture buffer40. This flat texture is then mapped onto a full-screen quadrilateral plane and processed through a series of sequential 2D image filters before finally being drawn to the user's display41.

The EffectComposer Architecture

The core of the Three.js post-processing ecosystem is the EffectComposer42. The composer acts as a pipeline manager, stacking visual effects in a linear chain. The first pass in this chain is invariably the RenderPass, which simply draws the raw 3D scene into the initial buffer39.

Following the RenderPass, developers can chain multiple specialized effects. For hypnotic experiences, the UnrealBloomPass is arguably the most critical component39. This pass simulates the light scattering that occurs inside a physical camera lens when exposed to intense brightness39. It functions by isolating pixels that exceed a defined brightness threshold, downsampling and applying Gaussian blurs to them across multiple mipmap levels, and additively blending the blurred result back over the original image44. The resulting effect is a soft, hallucinatory glow enveloping all illuminated geometry, which softens hard digital edges and enhances the dreamlike atmosphere.

Custom ShaderPass Implementations

While built-in passes like bloom or depth-of-field are useful, true creative expression requires writing custom post-processing filters using the ShaderPass32. A ShaderPass accepts a custom ShaderMaterial and automatically binds the output of the previous rendering step to a uniform texture, typically named tDiffuse or inputBuffer32.

Custom post-processing allows for advanced image manipulations that alter the viewer's perception.

Chromatic Aberration: By independently offsetting the sampling coordinates of the Red, Green, and Blue channels of the tDiffuse texture, developers can simulate the color fringing of a flawed optical lens33. By driving this offset magnitude with the u\_audioLevel uniform, the entire screen can tear into its constituent RGB channels during heavy musical impacts, creating a violent, disorienting visual stutter that breaks and resets the hypnotic flow.

Sobel Edge Detection and Sketch Effects: To create non-photorealistic, illustrative hallucinations, developers write a ShaderPass utilizing the Sobel operator. The shader samples the image within a 3x3 pixel kernel, calculating the horizontal and vertical color gradients to identify sharp color transitions43. By isolating these edges and blending them with a normal buffer and procedurally generated noise textures, the 3D scene is flattened into a swirling, sketchy, hand-drawn aesthetic that continuously boils and shifts over time43.

Afterimages and Motion Trails: By utilizing an AfterimagePass, the pipeline maintains a history of previous frames, blending them with the current frame at a diminished opacity46. This creates long, fading trails behind moving objects. In a hypnotic context, this exacerbates the motion aftereffect, tricking the eye into seeing phantom geometries that trace the paths of moving lights long after they have passed.

React Three Fiber and the Modern Ecosystem

The architecture of building Three.js applications has fundamentally shifted with the widespread adoption of React Three Fiber (R3F). R3F is a React renderer for Three.js, allowing developers to construct 3D scenes declaratively utilizing reusable components29.

This paradigm is exceptionally beneficial for complex hypnotic scenes. For instance, the useFrame hook in R3F exposes the render loop directly to individual components, allowing geometries to handle their own localized rotation and time-based trigonometric updates without polluting a massive global animation loop21.

Furthermore, R3F simplifies advanced rendering setups like portals and dual-scene rendering. Utilizing the createPortal function, developers can render an entirely separate sub-scene into a WebGLRenderTarget using a custom camera29. This offscreen texture can then be mapped onto a material in the main scene. This architecture is perfect for creating "fluid X-ray reveals" or inter-dimensional portals, where the viewer peers through a hypnotic geometric construct to see an entirely different reality rendered behind it29.

Performance Optimization and the WebGPU Transition

A visual illusion is instantly shattered by dropped frames or visual stuttering. To maintain the requisite 60 frames per second—especially on mobile devices, which are constrained by thermal throttling and limited battery power—aggressive optimization of the WebGL rendering pipeline is strictly mandatory21.

Managing Draw Calls and Geometry

The primary bottleneck in WebGL applications is the volume of draw calls issued by the CPU to the GPU. Each unique mesh and material combination requires a separate draw call50. On mobile devices, exceeding approximately 100 draw calls per frame can induce significant lag21.

To circumvent this, static geometries sharing the same material must be mathematically combined using BufferGeometryUtils.mergeGeometries, reducing them to a single draw call21. For dynamic objects, InstancedMesh must be employed. If the dynamic objects possess differing geometries, the newer BatchedMesh API allows multiple distinct geometries to be batched into a single draw call, providing immense flexibility for rendering complex, varied environments without the CPU overhead21.

Post-Processing Efficiency and Memory Management

Post-processing is notoriously expensive. UnrealBloomPass, for example, performs multiple read/write operations across various resolutions. To optimize this, developers must explicitly manage the devicePixelRatio44. Modern smartphones often feature pixel ratios of 2.0 or 3.0, meaning a full-screen render entails millions of pixels. By clamping the pixel ratio or explicitly passing lower resolution vectors to the UnrealBloomPass constructor, the visual quality remains acceptable while drastically reducing the GPU load21.

Furthermore, anti-aliasing poses a challenge. Standard WebGL Multi-Sample Anti-Aliasing (MSAA) is often lost when rendering to an offscreen target in the EffectComposer. Applying a shader-based anti-aliasing pass like FXAA or SMAA as the final step in the composer is necessary to prevent jagged edges, but this introduces yet another fullscreen texture read31.

In high-performance Three.js applications, memory leaks are a persistent threat. Unused geometries, materials, and textures are not automatically garbage collected from the GPU memory21. Developers must manually invoke the .dispose() method on all BufferGeometry, Material, Texture, and WebGLRenderTarget objects when they are removed from the scene to prevent application crashes21.

The WebGPU Paradigm and TSL

As modern browsers transition from WebGL to WebGPU, the methodology for writing shaders in Three.js is evolving. The library now supports TSL (Three Shader Language), a JavaScript-based API for constructing shader node graphs that compile down to either GLSL or WGSL (WebGPU Shading Language) seamlessly21.

TSL allows developers to define mathematical operations, procedural noise, and custom lighting models using JavaScript variables and functions, replacing the need to write raw GLSL strings21. Most importantly, WebGPU unlocks compute shaders—programs that execute highly parallel mathematical calculations without passing through the rasterization pipeline. For hypnotic simulations, compute shaders can drive massive fluid simulations, calculate gravitational attraction for millions of particles, and handle collision detection entirely on the GPU21. This eliminates the need to pass state data back and forth between the CPU and GPU, removing one of the most significant bottlenecks in generative 3D art and allowing for unprecedented levels of geometric density21.

Conclusion

The creation of 3D hypnotic experiences using Three.js represents a highly specialized discipline bridging artistry, mathematics, and systems engineering. By understanding the neuro-perceptual mechanics of motion aftereffects and focal entrainment, developers can target the human visual cortex with immense precision. Implementing this requires a masterful command of procedural geometries—such as logarithmic spirals and Frenet-Serret derived infinite splines—to guarantee continuous, seamless motion. Furthermore, the manipulation of the GPU pipeline via complex GLSL/TSL shaders, log-polar mappings, and custom post-processing architectures generates the ethereal, trance-like visual fidelity necessary for complete immersion. When fused with real-time audio analysis via the Web Audio API, the visuals transcend mere graphics, becoming a reactive, pulsating entity that acts upon the viewer's psychology. However, this level of graphical complexity is only viable through rigorous adherence to performance optimization, ensuring that the fragile illusion of infinity is never broken by the limitations of the underlying hardware.

Works cited

1. How to Create Visuals With AI-Generated Code (No Coding Required), https://spaceage.tv/news/creating-motion-graphic-visuals-with-ai-code

2. Three.js Visual & Interactive Encyclopedia \- A Complete Guide, https://neuralpixelgames.github.io/threejs-visual-guide/

3. The motion aftereffect \- PubMed, https://pubmed.ncbi.nlm.nih.gov/21227087/

4. Waterfall Illusion \- The Illusions Index, https://www.illusionsindex.org/i/waterfall-illusion

5. The Power of Visual Motion Priming | Psychology Today, https://www.psychologytoday.com/us/blog/illusions-delusions-and-reality/202209/the-power-visual-motion-priming

6. Optical Illusions, awesome Optical Illusions, Bridget Riley, op Art, https://www.pikist.com/en-clipart-sp2t2

7. Tunnel Rush \- Ultimate 3D Reaction Challenge \- Seele AI, https://www.seeles.ai/games/action/tunnel-rush-ultimate-3d-reaction-challenge

8. Three.js Sakura Animation Project \- 3D Web Design | CodeTap, https://codetap.org/project/threejs-sakura-animation-project

9. Programme and abstracts \- Physics, http://www.physics.lancs.ac.uk/ESGCO2016/ESGCO\_abstracts\_book.pdf

10. Coding a 3D Audio Visualizer with Three.js, GSAP & Web Audio API, https://tympanus.net/codrops/2025/06/18/coding-a-3d-audio-visualizer-with-three-js-gsap-web-audio-api/

11. Log-spherical Mapping in SDF Raymarching \- osar.fr, https://www.osar.fr/notes/logspherical/

12. petergpt/3d-prompt-collection \- GitHub, https://github.com/petergpt/3d-prompt-collection

13. Three.js Torus Tunnel: 3D WebGL Web Animation \- CodeTap, https://codetap.org/project/torus-tunnel-threejs-animation

14. Curve Modifiers in Three.js \- Medium, https://medium.com/samsung-internet-dev/curve-modifiers-in-three-js-1ada72c61677

15. Drawing a long 3D tube · Issue \#905 · mrdoob/three.js \- GitHub, https://github.com/mrdoob/three.js/issues/905?timeline\_page=1

16. Equation of a 3D curve shaped like a logarithmic spiral, https://math.stackexchange.com/questions/1599238/equation-of-a-3d-curve-shaped-like-a-logarithmic-spiral

17. Connecting two points with a 3D logarithmic spiral (Julia), https://stackoverflow.com/questions/73072738/connecting-two-points-with-a-3d-logarithmic-spiral-julia

18. The Curve class in threejs a general overview \- Dustin Pfister, https://dustinpfister.github.io/2022/06/17/threejs-curve/

19. Logarithmic Spiral \- Resources \- three.js forum, https://discourse.threejs.org/t/logarithmic-spiral/9913

20. 2D SDF Operation(1)\_Some Transformations | by Julito(盆栽), https://medium.com/@ohbonsai/2d-sdf-operation-1-some-transformations-419fe97e3ae1

21. 100 Three.js Tips That Actually Improve Performance (2026) \- Utsubo, https://www.utsubo.com/blog/threejs-best-practices-100-tips

22. Webgl Gems Standard I Final | PDF | Web Gl | 3 D Computer Graphics, https://www.scribd.com/document/516089809/Webgl-Gems-Standard-I-Final

23. The Study of Shaders with React Three Fiber \- Sarvar Murad, https://sarvar-murad.medium.com/the-study-of-shaders-with-react-three-fiber-7f49351efdce

24. ShaderMaterial – three.js docs, https://threejs.org/docs/pages/ShaderMaterial.html

25. Fractals/Computer graphic techniques/2D/exp \- Wikibooks, https://en.wikibooks.org/wiki/Fractals/Computer\_graphic\_techniques/2D/exp

26. Playing With GLSL | hylu blog, https://hylu.dev/posts/2023/old/dev/playing\_with\_glsl/

27. Workflow from Shadertoy to React Three Fiber \- R3F \- The Front Dev, https://www.thefrontdev.co.uk/workflow-from-shadertoy-to-react-three-fiber-r3f/

28. Using pingpong approach for rendering to texture \- three.js forum, https://discourse.threejs.org/t/using-pingpong-approach-for-rendering-to-texture-no-errors-nothing-rendering-to-screen/48456

29. Beautiful and mind-bending effects with WebGL Render Targets, https://blog.maximeheckel.com/posts/beautiful-and-mind-bending-effects-with-webgl-render-targets/

30. douglasgoodwin/shader-playground \- GitHub, https://github.com/douglasgoodwin/shader-playground

31. Best practices for ping-pong shading \- OpenGL \- Khronos Forums, https://community.khronos.org/t/best-practices-for-ping-pong-shading/6697

32. Custom Passes · pmndrs/postprocessing Wiki \- GitHub, https://github.com/pmndrs/postprocessing/wiki/Custom-Passes

33. How to Create Custom Shaders for a diamond in Three Js \- Auriga IT, https://aurigait.com/blog/how-to-create-custom-shaders-for-a-diamond-in-three-js/

34. Shining a light on Caustics with Shaders and React Three Fiber, https://blog.maximeheckel.com/posts/caustics-in-webgl/

35. 10 Creative Coding Examples & Project Ideas (2026) \- Lovable, https://lovable.dev/guides/creative-coding-examples-project-ideas

36. sandner-art/Audio-Shader-Studio \- GitHub, https://github.com/sandner-art/Audio-Shader-Studio

37. Final Report: Music-reactive Real-time Fire Simulation, https://pkargupta.github.io/firemusic/final\_report/index.html

38. Building a Voice Reactive Orb in React: Audio Visualization for, https://medium.com/@therealmilesjackson/building-a-voice-reactive-orb-in-react-audio-visualization-for-voice-assistants-2bee12797b93

39. Post-processing \- Sangil Lee, https://sangillee.com/2025-01-15-post-processing/

40. The Complete Guide to Three.js Post-Processing in 2026, https://threejsroadmap.com/blog/the-complete-guide-to-threejs-post-processing-in-2026

41. Simple postprocessing in three.js \- Medium, https://luruke.medium.com/simple-postprocessing-in-three-js-91936ecadfb7

42. Three.js Post Processing Tutorial | Easy & Quick for Beginners, https://www.youtube.com/watch?v=\_da8WNeZZ4w

43. Sketchy Pencil Effect with Three.js Post-Processing \- Codrops, https://tympanus.net/codrops/2022/11/29/sketchy-pencil-effect-with-three-js-post-processing/

44. How Do You Optimize Three.js Performance for Mobile Devices, https://digitalstrategyforce.com/journal/how-do-you-optimize-threejs-performance-for-mobile-devices/

45. Case study: Building an interaction design portfolio \- Medium, https://medium.com/design-bootcamp/building-an-interaction-design-portfolio-a-case-study-9560179e9bab

46. ShaderPass – three.js docs, https://threejs.org/docs/pages/ShaderPass.html

47. Core \- three.js docs, https://threejs.org/docs/index.html?q=po

48. infinite | Codrops, https://tympanus.net/codrops/tag/infinite/

49. Building a Dual-Scene Fluid X-Ray Reveal Effect in Three.js \- Codrops, https://tympanus.net/codrops/2026/03/23/building-a-dual-scene-fluid-x-ray-reveal-effect-in-three-js/

50. The Legend of IceCoon case study / Advanced webGL \- First Part, https://medium.com/@Samsy/the-legend-of-icecoon-case-study-advanced-webgl-first-part-185742e82429

51. threejs-scene-builder \- Skill \- Smithery, https://smithery.ai/skills/Dexploarer/threejs-scene-builder

52. Bloom selective animate performance \- Questions \- three.js forum, https://discourse.threejs.org/t/bloom-selective-animate-performance/34783

53. TSL – three.js docs, https://threejs.org/docs/pages/TSL.html