Dan Greenheck's banner
Dan Greenheck's profile picture

Dan Greenheck

@dangreenheck • 8,303 subscribers

Catholic ✝️ Father 👹 Three.js Wizard 🧙🏼‍♂️ 🗺️ https://t.co/hvt2fd6AnM 🌊 https://t.co/RZJ2xWnbbY 💥 https://t.co/uPdfGNWBoR 🌳 https://t.co/9Xmp8javAl

Shorts

After spending 4 HOURS debugging a sign flip issue, I finally got clouds to refract properly underwater! 🎉

After spending 4 HOURS debugging a sign flip issue, I finally got clouds to refract properly underwater! 🎉

62,244 görüntüleme

I asked Fable to build a realistic AAA water simulation with Three.js to see if I should quit my job. 500k tokens later, I'm disappointed. Almost the same exact slop you get with Opus. (Fable on left, Three.js Water Pro on right). Good results still require taste, deep knowledge of the problem domain, and a lot of patience.

I asked Fable to build a realistic AAA water simulation with Three.js to see if I should quit my job. 500k tokens later, I'm disappointed. Almost the same exact slop you get with Opus. (Fable on left, Three.js Water Pro on right). Good results still require taste, deep knowledge of the problem domain, and a lot of patience.

452,462 görüntüleme

Three.js Water Pro is getting a realism update!

Three.js Water Pro is getting a realism update!

34,979 görüntüleme

Replaced the old buoyancy system with a proper volume-displacement system. Now I can finally catch some sick air in my galleon.

Replaced the old buoyancy system with a proper volume-displacement system. Now I can finally catch some sick air in my galleon.

23,980 görüntüleme

I made a dumb mistake with my water shader🤦🏻‍♂️ The wave evolution equation has two parts: a standing wave component and a traveling wave component. When I was first getting this all to work, I hard-coded constants so the waves were always traveling forward at full speed. By adding a "standing wave ratio" where I can control the ratio between the two terms, I can now achieve wave patterns that oscillate in place. The video on the left has SWR = 0 and the video on the right SWR = 0.7 (I exaggerated the waves a bit to make the difference more noticeable). Now I have to re-record all my marketing videos...😭

I made a dumb mistake with my water shader🤦🏻‍♂️ The wave evolution equation has two parts: a standing wave component and a traveling wave component. When I was first getting this all to work, I hard-coded constants so the waves were always traveling forward at full speed. By adding a "standing wave ratio" where I can control the ratio between the two terms, I can now achieve wave patterns that oscillate in place. The video on the left has SWR = 0 and the video on the right SWR = 0.7 (I exaggerated the waves a bit to make the difference more noticeable). Now I have to re-record all my marketing videos...😭

125,747 görüntüleme

Someone asked if EZ-Tree supported vines. I said no, but the idea sounded cool so I let Claude give it a try. 5 minutes later, we have vines! 🤩 Thanks for the suggestion, Michael Boisson! I'll get this update published shortly.

Someone asked if EZ-Tree supported vines. I said no, but the idea sounded cool so I let Claude give it a try. 5 minutes later, we have vines! 🤩 Thanks for the suggestion, Michael Boisson! I'll get this update published shortly.

94,657 görüntüleme

Three.js is straight up cracked

Three.js is straight up cracked

20,128 görüntüleme

I planned on releasing my Three.js WebGPU water shader 2 weeks ago, but I promised myself I would stop half-assing things this year. I'm glad I waited. I'll be selling the whole package for $99. Full demo video coming soon, but includes FFT water sim, underwater effects, dynamic sky + fog, buoyancy, and more. Every aspect is tunable. Comes with 8 presets and 4 quality levels so it will run on any device. You'll get full source code + demo code, plus all future updates and fixes. Join waitlist now and get an email for 20% off at launch #threejs #webgpu #shaders

I planned on releasing my Three.js WebGPU water shader 2 weeks ago, but I promised myself I would stop half-assing things this year. I'm glad I waited. I'll be selling the whole package for $99. Full demo video coming soon, but includes FFT water sim, underwater effects, dynamic sky + fog, buoyancy, and more. Every aspect is tunable. Comes with 8 presets and 4 quality levels so it will run on any device. You'll get full source code + demo code, plus all future updates and fixes. Join waitlist now and get an email for 20% off at launch #threejs #webgpu #shaders

50,738 görüntüleme

If you've tried getting AI to write TSL shaders, you know the pain: deprecated imports, phantom functions and compilation errors. In my latest blog post, I share a prompt to help you overcome these issues: Using the prompt, I was able to one-shot this particle simulation with Claude Opus 4.5. #threejs #webgl #webgpu #tsl #shaders

If you've tried getting AI to write TSL shaders, you know the pain: deprecated imports, phantom functions and compilation errors. In my latest blog post, I share a prompt to help you overcome these issues: Using the prompt, I was able to one-shot this particle simulation with Claude Opus 4.5. #threejs #webgl #webgpu #tsl #shaders

61,519 görüntüleme

The vision is slowing coming to life... 🌎 #threejs

The vision is slowing coming to life... 🌎 #threejs

93,933 görüntüleme

🌊 THREE.JS WATER PRO GIVEAWAY 🌊 Build/vibecode a water/ocean themed game using Three.js and win a free copy of Three.js Water Pro! Rules: 🎮 Must be a playable game 💧 Water/ocean theme 💻 Start from scratch — fresh project only 🔗 Reply to this post with a link to your game ⏰ Submit by Monday 12:00 AM UTC 🗳️ Winner selected by me (tip: be creative!) I'll announce the winner on Monday. That's it. Best game wins. Go build!

🌊 THREE.JS WATER PRO GIVEAWAY 🌊 Build/vibecode a water/ocean themed game using Three.js and win a free copy of Three.js Water Pro! Rules: 🎮 Must be a playable game 💧 Water/ocean theme 💻 Start from scratch — fresh project only 🔗 Reply to this post with a link to your game ⏰ Submit by Monday 12:00 AM UTC 🗳️ Winner selected by me (tip: be creative!) I'll announce the winner on Monday. That's it. Best game wins. Go build!

23,520 görüntüleme

🚨 Three.js Roadmap is having a Memorial Day Sale through 5/25! Use the code SPRING30 at checkout and get 30% OFF Water Pro and all of my courses.

🚨 Three.js Roadmap is having a Memorial Day Sale through 5/25! Use the code SPRING30 at checkout and get 30% OFF Water Pro and all of my courses.

12,365 görüntüleme

Last night, I realized that I complete forgot about reflections!🤦🏻‍♂️ Quickly implemented SSR this afternoon. Makes such a huge difference, especially in adding some depth to distant objects.

Last night, I realized that I complete forgot about reflections!🤦🏻‍♂️ Quickly implemented SSR this afternoon. Makes such a huge difference, especially in adding some depth to distant objects.

23,767 görüntüleme

The next Three.js Water Pro update will give some much needed love to the presets. Here's an example of the update tropical preset! 🌴 FYI, this will likely be my last release for a while (aside from any bug fixes) since I have other projects I'd like to work on. This release will pretty much contain every wishlist feature I wanted to add from the beginning. So far the list includes - Rain - Sea spray - Persistent foam for improved whitecaps - Improved underwater caustics - Improved lighting - Updated presets - A whole bunch of bug fixes - Performance improvements (I also have one more secret feature in the works that I think you guys are going to like 😏)

The next Three.js Water Pro update will give some much needed love to the presets. Here's an example of the update tropical preset! 🌴 FYI, this will likely be my last release for a while (aside from any bug fixes) since I have other projects I'd like to work on. This release will pretty much contain every wishlist feature I wanted to add from the beginning. So far the list includes - Rain - Sea spray - Persistent foam for improved whitecaps - Improved underwater caustics - Improved lighting - Updated presets - A whole bunch of bug fixes - Performance improvements (I also have one more secret feature in the works that I think you guys are going to like 😏)

10,441 görüntüleme

Sorry but this isn't even close to a realistic simulation. This Three.js water simulation took weeks of effort, hundreds of prompts, and I needed to pull on my CS and physics background to understand where the AI was failing (which happens often). Maybe some day agents will be able to generate complex simulations in a single prompt but for now they can only generate toy prototypes.

Sorry but this isn't even close to a realistic simulation. This Three.js water simulation took weeks of effort, hundreds of prompts, and I needed to pull on my CS and physics background to understand where the AI was failing (which happens often). Maybe some day agents will be able to generate complex simulations in a single prompt but for now they can only generate toy prototypes.

16,327 görüntüleme

Hmm what am I working on?!

Hmm what am I working on?!

11,539 görüntüleme

Well this is a bit of a bummer. I discovered there's an existing free atmosphere/cloud package for Three.js / R3F that has all the features I was planning on implementing for Three.js Sky Pro. The weird thing is I knew this existed already? But when I searched for it, I think I happened across a different, less-featured solution. I guess it's back to the drawing board!

Well this is a bit of a bummer. I discovered there's an existing free atmosphere/cloud package for Three.js / R3F that has all the features I was planning on implementing for Three.js Sky Pro. The weird thing is I knew this existed already? But when I searched for it, I think I happened across a different, less-featured solution. I guess it's back to the drawing board!

12,348 görüntüleme

Stop fighting GLSL strings in Three.js 🥊 TSL (Three.js Shading Language) lets you write shaders in JavaScript with actual IDE support, proper debugging, and the ability to seamlessly extend existing materials. Learn more in my latest blog post 👇🏻 #threejs #webgl #webgpu #tsl #threejsroadmap

Stop fighting GLSL strings in Three.js 🥊 TSL (Three.js Shading Language) lets you write shaders in JavaScript with actual IDE support, proper debugging, and the ability to seamlessly extend existing materials. Learn more in my latest blog post 👇🏻 #threejs #webgl #webgpu #tsl #threejsroadmap

20,928 görüntüleme

Playing around with a new concept for the Three.js Roadmap home page. What do you think? 🤔

Playing around with a new concept for the Three.js Roadmap home page. What do you think? 🤔

13,209 görüntüleme

This is most satisfying thing I've ever made ☺️🔨 I've been working on adding Voronoi fracturing to three-piñata, my open-source mesh fracturing library for Three.js. This creates much more realistic fracture patterns. If you want to learn how to do this, I'm going to be adding a course to Three.js Roadmap teaching you how to build destructible environments. If you're interested, be sure to sign up for my newsletter to get notified when the course is released! (Link in comments 👇🏻) #threejs #webgl #3dgraphics #threejsroadmap

This is most satisfying thing I've ever made ☺️🔨 I've been working on adding Voronoi fracturing to three-piñata, my open-source mesh fracturing library for Three.js. This creates much more realistic fracture patterns. If you want to learn how to do this, I'm going to be adding a course to Three.js Roadmap teaching you how to build destructible environments. If you're interested, be sure to sign up for my newsletter to get notified when the course is released! (Link in comments 👇🏻) #threejs #webgl #3dgraphics #threejsroadmap

10,573 görüntüleme

Videos

LIVE
1.2k

Anya Rossi

sweetdream.ai

SweetDream.aiSponsored•Livecam
Streaming Now

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

HD live stream
Exclusive private shows
1.2k viewers online

Free preview available • Premium content

After over a dozen attempts, I think I finally figured out how to get proper looking foam/churn on wave crests!
0:28
dangreenheck's profile picture

After over a dozen attempts, I think I finally figured out how to get proper looking foam/churn on wave crests!

Dan Greenheck

1,156,191 görüntüleme • 2 ay önce

I'm adding a new "Max" quality setting to Three.js Water Pro that produces near-cinematic-level detail. It can resolve 500m waves all the way down to 1cm ripples. And before anyone asks, no, this will not run on your phone 😂
0:45
dangreenheck's profile picture

I'm adding a new "Max" quality setting to Three.js Water Pro that produces near-cinematic-level detail. It can resolve 500m waves all the way down to 1cm ripples. And before anyone asks, no, this will not run on your phone 😂

Dan Greenheck

82,523 görüntüleme • 8 gün önce

Jokingly asked Fable to build me Crysis in Three.js. It may not be Crysis, but the fact this is all done procedurally in basically one shot is kind of blowing my mind right now.
0:33
dangreenheck's profile picture

Jokingly asked Fable to build me Crysis in Three.js. It may not be Crysis, but the fact this is all done procedurally in basically one shot is kind of blowing my mind right now.

Dan Greenheck

232,473 görüntüleme • 1 ay önce

Me: Fable, build me an open-world RPG in Three.js where I get to run around and blow stuff up with a bazooka Fable: Hold my beer
1:16
dangreenheck's profile picture

Me: Fable, build me an open-world RPG in Three.js where I get to run around and blow stuff up with a bazooka Fable: Hold my beer

Dan Greenheck

186,884 görüntüleme • 1 ay önce

I've spent the last 6 months and 200+ hours making the best looking water on the web. Today, I'm launching Three.js Water Pro V3, the most advanced iteration yet 🚀 What's New ✅ Completely overhauled wave simulation and lighting ✅ Multiplayer-ready determinism ✅ Persistent wave-crest foam ✅ Sea spray emitters ✅ Wake generators ✅ Rain ...and much more! Learn more 👇🏻
0:51
dangreenheck's profile picture

I've spent the last 6 months and 200+ hours making the best looking water on the web. Today, I'm launching Three.js Water Pro V3, the most advanced iteration yet 🚀 What's New ✅ Completely overhauled wave simulation and lighting ✅ Multiplayer-ready determinism ✅ Persistent wave-crest foam ✅ Sea spray emitters ✅ Wake generators ✅ Rain ...and much more! Learn more 👇🏻

Dan Greenheck

180,197 görüntüleme • 1 ay önce

Three.js Water Pro is making Subnautica in the browser a real possibility. Rewrote the lighting model so light reflecting off the ocean floor is now refracted and attenuated based on real-world physics. Still can't believe what a difference it makes🤯
1:14
dangreenheck's profile picture

Three.js Water Pro is making Subnautica in the browser a real possibility. Rewrote the lighting model so light reflecting off the ocean floor is now refracted and attenuated based on real-world physics. Still can't believe what a difference it makes🤯

Dan Greenheck

175,646 görüntüleme • 2 ay önce

"AAA graphics aren't possible in the browser" Hold my beer 🍺
0:52
dangreenheck's profile picture

"AAA graphics aren't possible in the browser" Hold my beer 🍺

Dan Greenheck

116,800 görüntüleme • 2 ay önce

After 5 failed attempts and a week of long nights (thanks for nothing Claude), I finally have seamless air/water transitions in Three.js Water Pro. I was going to save this for V3 but the existing transition was so bad, I wanted to get it fixed and done right. If you want to get notified when Three.js Water Pro V2 gets released—plus weekly Three.js tips and tutorials—be sure to sign up for my newsletter. You'll also receive a code for 10% OFF you first order when you sign up!
0:29
dangreenheck's profile picture

After 5 failed attempts and a week of long nights (thanks for nothing Claude), I finally have seamless air/water transitions in Three.js Water Pro. I was going to save this for V3 but the existing transition was so bad, I wanted to get it fixed and done right. If you want to get notified when Three.js Water Pro V2 gets released—plus weekly Three.js tips and tutorials—be sure to sign up for my newsletter. You'll also receive a code for 10% OFF you first order when you sign up!

Dan Greenheck

206,561 görüntüleme • 4 ay önce

Here's a list of the upcoming features in Three.js Water Pro v3. It's a big update! ✅ Improved Wave Realism — Updated spectrum produces more organic wave patterns. ✅Improve Lighting Model — completely revamped lighting model that produces realistic color changes in shallows areas and allows you to see through water surface ✅Persistent Wave-Crest Foam — Foam lingers and rolls off breaking waves. ✅Multiplayer-Ready Determinism — fixed-step simulation and syncing between clients ✅Sea Spray — attach emitters to boats, rocks, etc. to generate spray as water hits the surface ✅Rain — wind-driven streaks plus water-surface ripples. ✅HDRI Environment Maps — procedural sky has been replaced by realistic HDRI maps ✅Boat Wake — V-shaped wakes with automatic foam on breaking crests, and much more!
0:23
dangreenheck's profile picture

Here's a list of the upcoming features in Three.js Water Pro v3. It's a big update! ✅ Improved Wave Realism — Updated spectrum produces more organic wave patterns. ✅Improve Lighting Model — completely revamped lighting model that produces realistic color changes in shallows areas and allows you to see through water surface ✅Persistent Wave-Crest Foam — Foam lingers and rolls off breaking waves. ✅Multiplayer-Ready Determinism — fixed-step simulation and syncing between clients ✅Sea Spray — attach emitters to boats, rocks, etc. to generate spray as water hits the surface ✅Rain — wind-driven streaks plus water-surface ripples. ✅HDRI Environment Maps — procedural sky has been replaced by realistic HDRI maps ✅Boat Wake — V-shaped wakes with automatic foam on breaking crests, and much more!

Dan Greenheck

61,820 görüntüleme • 1 ay önce

Three.js Water Pro v3.1.0 is now live! - Water appearance on WebGL/WebGPU is now 100% unified - Improved persistent foam better captures details on swells, waves and ripples - Plus lots of important bug fixes 🪳🔨 Try it now! 👉🏻
1:00
dangreenheck's profile picture

Three.js Water Pro v3.1.0 is now live! - Water appearance on WebGL/WebGPU is now 100% unified - Improved persistent foam better captures details on swells, waves and ripples - Plus lots of important bug fixes 🪳🔨 Try it now! 👉🏻

Dan Greenheck

39,743 görüntüleme • 1 ay önce

I've had so many people ask for a live demo of Three.js Water Pro, so I'm excited to finally deliver!🚀 Try out all the presets, tweak all the knobs and test performance on your target devices. I've added a mobile-responsive UI as well. Have fun! 🤿🌊🐟
1:30
dangreenheck's profile picture

I've had so many people ask for a live demo of Three.js Water Pro, so I'm excited to finally deliver!🚀 Try out all the presets, tweak all the knobs and test performance on your target devices. I've added a mobile-responsive UI as well. Have fun! 🤿🌊🐟

Dan Greenheck

102,922 görüntüleme • 3 ay önce

Well turns out I was closer than I thought! 😬 Added my own special sauce and now we got some really freaking epic clouds 💪🏻 I am so happy right now, I spent so many hours trying to get the clouds to look like this.
1:38
dangreenheck's profile picture

Well turns out I was closer than I thought! 😬 Added my own special sauce and now we got some really freaking epic clouds 💪🏻 I am so happy right now, I spent so many hours trying to get the clouds to look like this.

Dan Greenheck

22,429 görüntüleme • 26 gün önce

I was tired of hunting for good looking tree assets that didn't cost a fortune, so I decided to make a tool to generate my own. 50+ parameters, direct export to GLB, 100% free. Try it out 👉🏻
1:08
dangreenheck's profile picture

I was tired of hunting for good looking tree assets that didn't cost a fortune, so I decided to make a tool to generate my own. 50+ parameters, direct export to GLB, 100% free. Try it out 👉🏻

Dan Greenheck

118,767 görüntüleme • 6 ay önce

Three.js Water Pro v2.1 is now live! 🌊 Some exciting updates in this version - Improved FPS by ~30% across all quality levels - Support for transparent objects - Tunable standing vs. traveling waves Going to take a bit of a break from this project now to focus on my WebGPU course and sky shader!
0:41
dangreenheck's profile picture

Three.js Water Pro v2.1 is now live! 🌊 Some exciting updates in this version - Improved FPS by ~30% across all quality levels - Support for transparent objects - Tunable standing vs. traveling waves Going to take a bit of a break from this project now to focus on my WebGPU course and sky shader!

Dan Greenheck

62,993 görüntüleme • 3 ay önce

Still needs a lot of work, but after a gazillion attempts, i finally figured out how to get decent looking foam that gathers on the leading edges of waves! Will continue to tweak this a bit, followed by ocean spray next!
0:36
dangreenheck's profile picture

Still needs a lot of work, but after a gazillion attempts, i finally figured out how to get decent looking foam that gathers on the leading edges of waves! Will continue to tweak this a bit, followed by ocean spray next!

Dan Greenheck

78,999 görüntüleme • 5 ay önce

Well it wasn't easy, but I finally got Sky Pro rendering a physically-based atmosphere + dynamic/volumetric clouds + reflections at 120FPS on my laptop 🙌🏻
0:55
dangreenheck's profile picture

Well it wasn't easy, but I finally got Sky Pro rendering a physically-based atmosphere + dynamic/volumetric clouds + reflections at 120FPS on my laptop 🙌🏻

Dan Greenheck

29,457 görüntüleme • 1 ay önce

As the kids say these days, "I cooked" 👨🏻‍🍳
0:55
dangreenheck's profile picture

As the kids say these days, "I cooked" 👨🏻‍🍳

Dan Greenheck

38,815 görüntüleme • 2 ay önce

Finally get to see my water and sky together in the same scene 🤩 I think I have no choice but to build Sea of Thieves in the browser now.
0:28
dangreenheck's profile picture

Finally get to see my water and sky together in the same scene 🤩 I think I have no choice but to build Sea of Thieves in the browser now.

Dan Greenheck

13,033 görüntüleme • 24 gün önce

It's amazing what proper lighting (and Skyrim music 😁) can do to a scene. I'm replacing the procedural sky in Three.js Water Pro v3 with HDRIs from Polyhaven (converted to UltraHDR jpeg, only 500KB instead of 20MB). I think the results speak for themselves.
0:41
dangreenheck's profile picture

It's amazing what proper lighting (and Skyrim music 😁) can do to a scene. I'm replacing the procedural sky in Three.js Water Pro v3 with HDRIs from Polyhaven (converted to UltraHDR jpeg, only 500KB instead of 20MB). I think the results speak for themselves.

Dan Greenheck

24,010 görüntüleme • 2 ay önce

Physically-based volumetric clouds in Three.js. The browser is closer to AAA than people think.
1:25
dangreenheck's profile picture

Physically-based volumetric clouds in Three.js. The browser is closer to AAA than people think.

Dan Greenheck

20,368 görüntüleme • 1 ay önce