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
Procedural terrain shader. New terrain gets generated procedurally as it shifts inside the sandbox.
Check it out here and generate your own terrain. A deserts, snowy place, or even something extra terrestrial. 👾
I built this experiment using WebGL and GLSL as part of the great Three.js Masterclass by Bruno Simon 🙌
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
Related posts
New case study - tash.cards, a Y Combinator backed platform for investing in graded sports cards. Identity design, commissioned by baked.design
The heart of the system is a pattern language taken from security printing. Every letter of the wordmark becomes a guilloché tile, like the engraving on banknotes and certificates, and tiles combine into endless patterns.
Nice!
I love it too
Landing Page Design Concept for a Live Touring Platform
Tourline is a landing page design concept for a booking platform that turns an agent's inbox into one live record per show: holds, offers, routing, contracts and settlement.
How it's built:
Hero is a real-time 3D concert stage in Three.js. Scroll moves the show through its lifecycle: hold, offer, advance, show night, settle.
Custom volumetric light beams written as a GLSL shader, with real spotlights lighting the stage and crowd, bloom, lens glare and dust caught in the beams.
The LED wall, side screens and LED floor are live canvas textures. The headline renders on the wall, then breaks into LED dots as you scroll.
Beam choreography runs at 124 BPM with four lighting modes, and the camera responds to the cursor.
ScrollTrigger and smooth scroll drive the section reveals, route drawing and the interactive inbox.
If you book tours for a living, what is the one thing you would change here? Or tell me what you would build next.
Breaking the headline into LED dots as you scroll is a lovely way to tie the copy to the stage. With that much going on in the hero, how did you keep it light on mid-range laptops? Did you cap the pixel ratio or turn some of the bloom and glare off?