Interactive WebGL Experience: Dive into Physics with DIEGETICInteractive WebGL Experience: Dive into Physics with DIEGETIC
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
RUDRESH's avatar
RUDRESH H R
• May 16
DIEGETIC — Break The Surface
An experimental WebGL project where the interface is the interaction. A physics-simulated surface fills the screen — drag to tear through it, double-click to trigger a cinematic curtain collapse with air resistance and billowing flutter.
Built with Three.js, Verlet integration physics (9,600+ constraint points), raycaster-driven tearing, real-time shadow mapping, and hand-drawn editorial typography via the Canvas API.
Stack: Three.js · JavaScript · WebGL · Verlet Physics · Canvas API · Space Grotesk
three.jsWebGLjavascriptdeveloperFrontend DevelopmentWeb DesignWeb DevelopmentJavaScript
RUDRESH's avatar
RUDRESH H R
• May 16
comments, suggestons, feedback are welcomed😊
Madob 's avatar
Madob Acharjya
• May 17
Thanks!
Emman's avatar
Emman Ermitaño
• May 19
Interesting 🔥 Where did you design your preview?
RUDRESH's avatar
RUDRESH H R
• May 20
Thanks! 🙌 No design tool — the preview IS the project. The whole visual (typography, layout, crosshairs) is generated with code using Canvas API + Three.js. It's a live interactive WebGL experience, not a static design. The tearable surface runs on a custom Verlet physics engine with 9,600+ constraint points 🔥
Emman's avatar
Emman Ermitaño
• May 20
Cool. I reckon the "tear" effect could still be improved a bit, though it really does feel alive 👍
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started