Polygon Shredder

A modernized local rebuild of Polygon Shredder: a WebGL / Three.js particle sculpture that turns dense fields of box fragments into a flowing, confetti-like form.

This version keeps the original piece as the reference point, but updates the runtime to a modern Vite + ES modules setup and adds a more usable control surface for local experimentation, previews, and exports.

Media

Demo

• Live demo: proto.lucidity.design/sites/polygon-shredder

What This Version Includes

• Modern Vite-based setup with current three modules
• Original-inspired default motion shape and palette
• Projected hard-light texture path restored without showing a visible spotlight object
• Expanded controls for motion, camera, lighting, density, and color presets
• Randomizers for motion, lighting, colors, and full-scene variation
• URL state sharing
• Built-in savePng and saveGif exports
• Production build that works from a subdirectory rather than assuming domain root

Controls

• Move the mouse to steer the field when followMouse is enabled
• Drag to orbit the camera
• Scroll to zoom
• Press Space to pause or resume
• Open the controls panel to adjust motion, density, lighting, colors, demo mode, and export actions

Local Development

Install

npm install

Run

npm run dev

Build

npm run build

Preview Production Build

npm run preview

Project Structure

• src/main.js: app bootstrap, controls, presets, exports, and rendering loop
• src/Simulation.js: particle simulation render targets and reseeding logic
• src/shaders.js: simulation, particle, and shadow shaders
• vite.config.js: Vite config, relative base, and chunking

Credits

• Inspired by The Polygon Shredder by Jaume Sanchez / spite
• Curl noise GLSL reference: cabbibo/glsl-curl-noise