How houmahani/codrops-depth-gallery works
Atmospheric Depth Gallery is a browser-based Three.js experience: visitors scroll through image planes, while depth and scroll velocity drive palette transitions and motion. The runtime entry point initializes the engine, which preloads gallery textures and coordinates scrolling and the experience. The experience composes the gallery, color labels, shader background, and animated trail. The README documents the depth-scrolling, per-image palette concept; sampled source shows the main orchestration and several component calls. Some engine and effect update details are excerpted only partially, so uncertain connections are omitted.
Main entry points: Experience/index.js Experience · Engine.js Engine · Gallery.js Gallery Planes · Background/index.js Shader Background
Components 15
Runtime Coordination
- App Entry
src/main.js - Engine
src/Experience/Engine.js - Experience
src/Experience/index.js - Debug Controls
src/Experience/Debug.js
Depth Gallery
- Scroll Input
src/Experience/Scroll.js - Gallery Planes
src/Experience/Gallery.js - Gallery Palette Data
src/data/galleryData.js
Atmospheric Effects
- Shader Background
src/Experience/Background/index.js - Vertex Shader
src/Experience/Background/shaders/vertex.glsl - Fragment Shader
src/Experience/Background/shaders/fragment.glsl - Trail Controller
src/Experience/TrailController.js - Trail Geometry
src/Experience/Trail.js - Trail Particles
src/Experience/TrailHeadParticles.js
Color Interface
- Color Labels
src/Experience/Label.js
Other components
- Visitor
Connections 16
- Visitor → App Entry: opens gallery
- App Entry → Engine: creates
src/main.js - Engine → Experience: initializes
src/Experience/Engine.js - Engine → Gallery Planes: preloads textures
src/Experience/Engine.js - Engine → Scroll Input: creates
src/Experience/Engine.js - Experience → Gallery Planes: initializes and updates
src/Experience/index.js - Experience → Color Labels: initializes and updates
src/Experience/index.js - Experience → Shader Background: initializes and updates
src/Experience/index.js - Experience → Trail Controller: initializes and updates
src/Experience/index.js - Experience → Debug Controls: creates
src/Experience/index.js - Gallery Planes → Gallery Palette Data: loads plane data
src/Experience/Gallery.js - Color Labels → Gallery Planes: reads plane colors
src/Experience/Label.js - Shader Background → Vertex Shader: uses shader
src/Experience/Background/index.js - Shader Background → Fragment Shader: uses shader
src/Experience/Background/index.js - Trail Controller → Trail Geometry: adds trail points
src/Experience/TrailController.js - Trail Controller → Trail Particles: updates particles
src/Experience/TrailController.js