Dan Greenheck's banner
Dan Greenheck's profile picture

Dan Greenheck

@dangreenheck • 7,585 subscribers

Catholic ✝️ Father of 2 gremlins 👹 Serial hobbyist 🎨 Building https://t.co/YJxcAXQ8a2

Shorts

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,656 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,643 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,611 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

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,499 görüntüleme

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

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

92,972 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

Hmm what am I working on?!

Hmm what am I working on?!

11,533 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,299 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

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,905 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,194 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

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

51,771 görüntüleme • 16 saat önce

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,155,169 görüntüleme • 1 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

59,397 görüntüleme • 4 gün ö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

174,793 görüntüleme • 16 gün ö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,391 görüntüleme • 22 gün ö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

19,879 görüntüleme • 5 gün ö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,056 görüntüleme • 3 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,298 görüntüleme • 12 gün ö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,630 görüntüleme • 2 ay ö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

23,733 görüntüleme • 15 gün ö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,690 görüntüleme • 1 ay ö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,420 görüntüleme • 4 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,713 görüntüleme • 2 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,968 görüntüleme • 3 ay önce

Ever wish you could prompt a Lego model into existence? Well now you can! (LEGO you know where to find me!)
0:35
dangreenheck's profile picture

Ever wish you could prompt a Lego model into existence? Well now you can! (LEGO you know where to find me!)

Dan Greenheck

36,438 görüntüleme • 2 ay önce

Add in some shoreline + depth-based transparency effects. Starting to look real nice! 😍 #threejs #webgpu #shaders
0:36
dangreenheck's profile picture

Add in some shoreline + depth-based transparency effects. Starting to look real nice! 😍 #threejs #webgpu #shaders

Dan Greenheck

65,739 görüntüleme • 5 ay önce

I'm releasing my #threejs procedural tree generator as open source. Over 30 tunable parameters with the option to export to .glb. It's been fun reviving this project from the vault, but time to move on. Enjoy! 👍🏻 🎮Demo: 💻Source:
1:24
dangreenheck's profile picture

I'm releasing my #threejs procedural tree generator as open source. Over 30 tunable parameters with the option to export to .glb. It's been fun reviving this project from the vault, but time to move on. Enjoy! 👍🏻 🎮Demo: 💻Source:

Dan Greenheck

158,682 görüntüleme • 2 yıl önce

Well it took an all nighter (isn't all the best coding done at 4AM?!), but Three.js Water Pro v2.0 has launched! 🚀 Super excited about this launch—I've added a new wave system, sky/water transitions, improved foam effects, reflections, and so much more. Here's a little cinematic trailer I put together (sound on🫧). Enjoy!
0:34
dangreenheck's profile picture

Well it took an all nighter (isn't all the best coding done at 4AM?!), but Three.js Water Pro v2.0 has launched! 🚀 Super excited about this launch—I've added a new wave system, sky/water transitions, improved foam effects, reflections, and so much more. Here's a little cinematic trailer I put together (sound on🫧). Enjoy!

Dan Greenheck

27,855 görüntüleme • 2 ay önce

I made a visual shader editor for Three.js... and I'm ready for people to start breaking it! 🔨💥
0:49
dangreenheck's profile picture

I made a visual shader editor for Three.js... and I'm ready for people to start breaking it! 🔨💥

Dan Greenheck

33,842 görüntüleme • 3 ay önce

Finally got some time to work on Three.js Water Pro again. Testing out the new foam trails system tonight. Each buoyant object has its own foam generator so you can customize the foam trail for each object (size, decay, opacity, etc.). Foam system now includes wave crests, surface, shoreline, and trails! Last feature remaining for the V2 release is sea spray. This one has proven to be a bit tricky so I'm still testing out different solutions.
0:24
dangreenheck's profile picture

Finally got some time to work on Three.js Water Pro again. Testing out the new foam trails system tonight. Each buoyant object has its own foam generator so you can customize the foam trail for each object (size, decay, opacity, etc.). Foam system now includes wave crests, surface, shoreline, and trails! Last feature remaining for the V2 release is sea spray. This one has proven to be a bit tricky so I'm still testing out different solutions.

Dan Greenheck

30,834 görüntüleme • 3 ay önce