Modular Matrix

Interactive 3D study built with Three.js, BatchedMesh, and WebGPURenderer, exploring efficient mesh rendering, TSL-driven post-processing, and a playful light/dark transition system.

Demo: proto.lucidity.design/sites/modular-matrix

Overview

This project is sourced from and adapted from Christophe Choffel's Codrops demo and article, focused on:

• BatchedMesh for rendering many repeated mesh parts efficiently
• WebGPURenderer for the newer Three.js WebGPU pipeline
• TSL / node-based post-processing for ambient occlusion, depth of field, vignette, and anti-aliasing
• Interactive pointer-driven motion and animated mode switching

The original demo uses a randomly composed modular block system animated with fractal-noise-inspired motion, with post-processing tuned to create a tilt-shift, miniature-like feel.

Source

• Original repo: ULuIQ12/codrops-batchedmesh
• Codrops article: Interactive 3D with Three.js BatchedMesh and WebGPURenderer

Local Preview

This repository is currently a static build export. To preview it locally, serve the project root with any static file server, for example:

python3 -m http.server 8080

Then open http://localhost:8080.

Credits

• Demo and article concept by Christophe Choffel / Codrops
• Forked from the upstream Codrops demo repository linked above