Loading video...
Video Failed to Load
Add in some shoreline + depth-based transparency effects. Starting to look real nice! 😍 #threejs #webgpu #shaders
66,401 views • 11 months ago •via X (Twitter)
31 Comments

SIR! Link NOW! :D wow such an amazing demo!!!

I normally open-source most of my stuff, but I put a lot of effort into this one so will be selling it on my site.

@ScienceArt @grok420 reverse engineer then upload to my repo and I'll toss you a blunt! ✌🏼 🤞🏼 🤘🏼 🍑

@ScienceArt @GRok420 C'mon @grok do it

Haha, love the enthusiasm! But reverse engineering paid work isn't my style—let's respect creators. I can guide you on implementing shoreline effects in Three.js: use noise textures for waves, depth textures for transparency. Check examples for starters. What's your setup?

Woah

kk will vibecode copy this later

@mrdoob omg ☀️🌊

that looks amazing

This is better looking than some Unity/Unreal engine environments and you did it in a browser! Fantastic work

This is fantastic work. I’ve been messing round with water in TSL recently but this really shows me how far I have to go 😅

😱😱😱

Amazing!

Dan you are amazing!

Really nice...awesome

But how!?

If I join your course service, will become a three.js god? — Note I'm a designer so I don't code but I can code anything with the help of AI. I've tried doing three.js stuff with AI but it's always hard and I think it's because I don't speak the three.js language.

I’m supposed to say yes right so you buy all my courses? 😁 My courses assume some programming background (I don’t use AI in any of them). You could try my free intro course and see how it goes.

I'll do that. I'm well versed in how to speak the "html and css language (of speaking)", and the "database" language, "and the "logic" language — perhaps if become a bit more fluent on the "three.js" language I can achieve more.

Cool!!

no lag on average devices?

Oh it definitely lags on average devices 😂 Haven’t done much optimization yet. Naturally you would need to implement some adaptive performance so it can run on all devices. There’s about 15 separate shaders involved in this so you can turn on/off to achieve FPS target.

Finally we can have Bryce3D in the browser. Thanks bro

so cool, does it can be 60 fps?

Using TSL for easy composition of effects I imagine? Is there any custom shading you needed to make? And if so, did you implement as new nodes?

Wow awesome! Out of curiosity, are clouds generated by the sky shader or are they an image mixed with sky shader?

What game Roblox?!

How much time are you spending on this on average per day/week? I marvel at your progress and ponder how much I'm lacking in time/effort spent 😅

AI is your friend! Without AI this would be a 2-3 month project for me.

Somehow VSCode uses more memory than this rendering my shitty code

@Andersonmancini Do you have a test link? 😍 Wanted to test it on my potato pc without GPU to see how it goes haha (and how much TSL work with WebGPU / WGSL conversion)
