Dan Greenheck's banner

Dan Greenheck

@dangreenheck • 12,608 subscribers

Catholic ✝️ Husband 👫 Father 👹 3D Wizard 🧙🏼‍♂️ 🗺️ https://t.co/hvt2fd6AnM

Shorts

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 просмотров

Once you start working on water rendering, you are cursed with never seeing the world the same. I was at a resort with the fam this weekend and noticed this little stream out back. I couldn't have asked for a better reference for understanding water/foam transport in flowing water! Super helpful as I work on the rivers add-on for Water Pro. Luckily my wife is very understanding of my insanity and patiently waited while I captured video of the entire thing 😂

Once you start working on water rendering, you are cursed with never seeing the world the same. I was at a resort with the fam this weekend and noticed this little stream out back. I couldn't have asked for a better reference for understanding water/foam transport in flowing water! Super helpful as I work on the rivers add-on for Water Pro. Luckily my wife is very understanding of my insanity and patiently waited while I captured video of the entire thing 😂

48,840 просмотров

I've been pondering something... My end goal with my city simulator is to publish it on Steam. I was planning on using Three.js for prototyping and then porting this over to Unity to take advantage of ECS/Burst. But then I realized I could probably port all of the simulation code from TypeScript to Rust if I wanted to make it ultra-fast. And then I can continue to use Three.js for the renderer and then embed it into an Electron app. Is that a dumb idea? What pitfalls are there with this approach? Curious what people's experience publishing games using Electron has been.

I've been pondering something... My end goal with my city simulator is to publish it on Steam. I was planning on using Three.js for prototyping and then porting this over to Unity to take advantage of ECS/Burst. But then I realized I could probably port all of the simulation code from TypeScript to Rust if I wanted to make it ultra-fast. And then I can continue to use Three.js for the renderer and then embed it into an Electron app. Is that a dumb idea? What pitfalls are there with this approach? Curious what people's experience publishing games using Electron has been.

48,037 просмотров

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,890 просмотров

$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,828 просмотров

Running at Max settings on my M5 Pro, went from 45 FPS to 70 FPS 🚀 Biggest win was updating FFT to use WebGPU workgroup memory. I have a few more optimizations I want to investigate but will deploy updated versions later this week.

Running at Max settings on my M5 Pro, went from 45 FPS to 70 FPS 🚀 Biggest win was updating FFT to use WebGPU workgroup memory. I have a few more optimizations I want to investigate but will deploy updated versions later this week.

34,152 просмотров

Three.js Water Pro v3.4 is now live! 🚀 Live Demo: This update adds Jerlov water types—a convenient way of modeling water color based on algae, silt and stain concentrations. The legacy color system is still available for those requiring more artistic control over the water color.

Three.js Water Pro v3.4 is now live! 🚀 Live Demo: This update adds Jerlov water types—a convenient way of modeling water color based on algae, silt and stain concentrations. The legacy color system is still available for those requiring more artistic control over the water color.

30,760 просмотров

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,693 просмотров

Three.js Water Pro is getting a realism update!

Three.js Water Pro is getting a realism update!

35,508 просмотров

I've been working on Three.js Water Pro for 9 months and somehow I missed this🤦🏻‍♂️ I was looking at some reference photos and noticed that when air bubbles get trapped under the surface in turbulent water, it causes the water color to brighten and shift towards green. This phenomenon is called "broadband backscattering". The video shows the before and after (I cranked it up to make it more noticeable). I'll be releasing this along with other minor improvements to the wave simulation in Water Pro v3.6.

I've been working on Three.js Water Pro for 9 months and somehow I missed this🤦🏻‍♂️ I was looking at some reference photos and noticed that when air bubbles get trapped under the surface in turbulent water, it causes the water color to brighten and shift towards green. This phenomenon is called "broadband backscattering". The video shows the before and after (I cranked it up to make it more noticeable). I'll be releasing this along with other minor improvements to the wave simulation in Water Pro v3.6.

17,967 просмотров

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,827 просмотров

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.

24,049 просмотров

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 просмотров

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

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

93,933 просмотров

Results for the Three.js Tiny Worlds game jam are in! 🌎 🎮 🥇 1st place: Under Glass Link: Developer: Ólafur Nils Sigurðsson 🥈 2nd place: Spin the World Link: Developer: Aaron Claes 🥉 3rd place: On A Space Journey Link: Developer: Sander de Wildt Thank you everyone for your submissions! We had a lot of fun playing through these. I will be contacting the winners individually with instructions on how to receive your prizes.

Results for the Three.js Tiny Worlds game jam are in! 🌎 🎮 🥇 1st place: Under Glass Link: Developer: Ólafur Nils Sigurðsson 🥈 2nd place: Spin the World Link: Developer: Aaron Claes 🥉 3rd place: On A Space Journey Link: Developer: Sander de Wildt Thank you everyone for your submissions! We had a lot of fun playing through these. I will be contacting the winners individually with instructions on how to receive your prizes.

13,654 просмотров

Three.js is straight up cracked

Three.js is straight up cracked

20,205 просмотров

🌊 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,782 просмотров

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,846 просмотров

🚨 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,636 просмотров

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 просмотров

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

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

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

Ever wonder what $1874.40 of Opus 5.5 tokens looks like? Wonder no more. I highly recommend watching the whole video on 1080p on a large screen with sound on. Pay attention to all the little details. - Birds flying and diving into the ocean. - Cloth, signs and lights swaying in the wind. - Crabs scuttling along the shore and burrowing when you get close. - Fish swimming alongside the whale. - Lights illuminating the dock at night Then zoom out and see the entire island. Never dipping below 60 FPS at 1440p resolution. Yes, there's a few bugs and visual artifacts, some textures need improving, the shorelines waves sometimes look funny, but these are so trivial to fix at this point. FYI I'm on the $200 subscription plan. This used 59% of my weekly usage and took 2h 7h of API time using multiple subagents, about 8h in real-time. There was extremely little technical direction here. 99% of my prompts were "Add X and Y" or "This looks weird, make it better". It's a great time for hobbyists, bad time for professionals. This experiment has further cemented my view that technical creatives are about to experience a massive disruption.

Ever wonder what $1874.40 of Opus 5.5 tokens looks like? Wonder no more. I highly recommend watching the whole video on 1080p on a large screen with sound on. Pay attention to all the little details. - Birds flying and diving into the ocean. - Cloth, signs and lights swaying in the wind. - Crabs scuttling along the shore and burrowing when you get close. - Fish swimming alongside the whale. - Lights illuminating the dock at night Then zoom out and see the entire island. Never dipping below 60 FPS at 1440p resolution. Yes, there's a few bugs and visual artifacts, some textures need improving, the shorelines waves sometimes look funny, but these are so trivial to fix at this point. FYI I'm on the $200 subscription plan. This used 59% of my weekly usage and took 2h 7h of API time using multiple subagents, about 8h in real-time. There was extremely little technical direction here. 99% of my prompts were "Add X and Y" or "This looks weird, make it better". It's a great time for hobbyists, bad time for professionals. This experiment has further cemented my view that technical creatives are about to experience a massive disruption.

895,431 просмотров • 25 дней назад

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

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

1,157,009 просмотров • 5 месяцев назад

Since Steam is taking absolutely ages to approve my account, I figured I'd show a little preview of what I'm working on! About 6 years ago, I had the idea of making a multiplayer wizard dueling game where every single part of the environment was destructible. This motivated me to create OpenFracture for Unity, which eventually became three-piñata for Three.js. I never ended up making the game, but I finally remembered the idea and decided to try building out a prototype! Lots of work left all around, but I was able to get local multiplayer working and the core concept feels quite fun. Let me know what you think!

Since Steam is taking absolutely ages to approve my account, I figured I'd show a little preview of what I'm working on! About 6 years ago, I had the idea of making a multiplayer wizard dueling game where every single part of the environment was destructible. This motivated me to create OpenFracture for Unity, which eventually became three-piñata for Three.js. I never ended up making the game, but I finally remembered the idea and decided to try building out a prototype! Lots of work left all around, but I was able to get local multiplayer working and the core concept feels quite fun. Let me know what you think!

69,325 просмотров • 13 дней назад

Just some AI slop I built with Three.js

Just some AI slop I built with Three.js

229,283 просмотров • 1 месяц назад

Turned my coastal demo into a cozy fishing game 🎣 Catch fish, sell them to Joe and buy new tackle and parts for your boat from Marta by the boathouse! Did a lot of additional iteration on the environments, plants, models and graphics, adding in more wear and tear to make it look more realistic. Ran an optimization pass which improved performance from 60FPS to 100FPS, but I chewed up most of that adding in new features. It's also now using native WebGPU to give the AI more control. I thought maybe it would struggle with this since Three.js code is likely much more common in training data, but it never missed a beat. Anyways, this is my last update on this project. Wanted to see how far I could take Opus 5.5. Didn't really find the limits to be honest.

Turned my coastal demo into a cozy fishing game 🎣 Catch fish, sell them to Joe and buy new tackle and parts for your boat from Marta by the boathouse! Did a lot of additional iteration on the environments, plants, models and graphics, adding in more wear and tear to make it look more realistic. Ran an optimization pass which improved performance from 60FPS to 100FPS, but I chewed up most of that adding in new features. It's also now using native WebGPU to give the AI more control. I thought maybe it would struggle with this since Three.js code is likely much more common in training data, but it never missed a beat. Anyways, this is my last update on this project. Wanted to see how far I could take Opus 5.5. Didn't really find the limits to be honest.

67,350 просмотров • 24 дней назад

I promised something cool this week. Time to deliver! 🚀 Meet Three.js Particle Fluids—a WebGPU-based library for simulating fluids, rigid/soft bodies, cloth, and gases. Live demo 👉🏻 Source Code 👉🏻 What makes PBFs so special? Because *everything* is represented as particles, you can have fluids, soft-bodies and cloth in a single scene and they all collide and interact with each other. This let's you create some really cool effects that are difficult to do with other methods: - You can squirt water at a cloth and it will push back - Cloth drapes around objects - Soft bodies can float or mix into fluids You can easily tune performance across devices by modifying particle counts. I spent quite a few hours building and researching this a few months ago but it never really reached a level of quality I was happy with releasing. Fast-forward to today, I was able to leverage Opus 5.5 to get the library to a more complete state. Excited to see what people build with this!

I promised something cool this week. Time to deliver! 🚀 Meet Three.js Particle Fluids—a WebGPU-based library for simulating fluids, rigid/soft bodies, cloth, and gases. Live demo 👉🏻 Source Code 👉🏻 What makes PBFs so special? Because everything is represented as particles, you can have fluids, soft-bodies and cloth in a single scene and they all collide and interact with each other. This let's you create some really cool effects that are difficult to do with other methods: - You can squirt water at a cloth and it will push back - Cloth drapes around objects - Soft bodies can float or mix into fluids You can easily tune performance across devices by modifying particle counts. I spent quite a few hours building and researching this a few months ago but it never really reached a level of quality I was happy with releasing. Fast-forward to today, I was able to leverage Opus 5.5 to get the library to a more complete state. Excited to see what people build with this!

54,533 просмотров • 20 дней назад

YOU SHALL NOT PASS! 🧙🏼‍♂️ - Tripo3D for model and rigging - Re-textured using Codex image_gen - Mixamo mutant animations - Three.js Fire Pro for the fire/smoke VFX Doing some explorations in modeling/rigging ahead of my AI game dev course. Join waitlist here👇🏻

YOU SHALL NOT PASS! 🧙🏼‍♂️ - Tripo3D for model and rigging - Re-textured using Codex image_gen - Mixamo mutant animations - Three.js Fire Pro for the fire/smoke VFX Doing some explorations in modeling/rigging ahead of my AI game dev course. Join waitlist here👇🏻

20,156 просмотров • 6 дней назад

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.

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.

232,827 просмотров • 4 месяцев назад

I still consider this one of the best Three.js renderings I've ever made.

I still consider this one of the best Three.js renderings I've ever made.

86,292 просмотров • 1 месяц назад

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 👇🏻

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 👇🏻

223,129 просмотров • 4 месяцев назад

I got a bit carried away today! This was meant to be the Water Pro v4 demo, but at this point it's becoming so much more considering all of the extra features around it. Still trying to navigate the weirdness that we are all living through right now, but I gotta say I did enjoy watching this little island unfold today. I'm going to continue working on this and address all the little bugs (how many can you count in the video? 😁) and may sell it as an additional premium asset/Three.js engine starter pack to go along with Water Pro. Let me know if any of you are interested. I could bundle some terrain tools into it, texture painting, vegetation placement, etc.

I got a bit carried away today! This was meant to be the Water Pro v4 demo, but at this point it's becoming so much more considering all of the extra features around it. Still trying to navigate the weirdness that we are all living through right now, but I gotta say I did enjoy watching this little island unfold today. I'm going to continue working on this and address all the little bugs (how many can you count in the video? 😁) and may sell it as an additional premium asset/Three.js engine starter pack to go along with Water Pro. Let me know if any of you are interested. I could bundle some terrain tools into it, texture painting, vegetation placement, etc.

34,432 просмотров • 19 дней назад

Who's ready to melt their GPU?! 🙋🏻‍♂️ Three.js Fire Pro is now available as an open-source package! Create effects using the built-in editor, export your configuration and load into your scene. Try it out👇🏻 See README for information on how to use

Who's ready to melt their GPU?! 🙋🏻‍♂️ Three.js Fire Pro is now available as an open-source package! Create effects using the built-in editor, export your configuration and load into your scene. Try it out👇🏻 See README for information on how to use

22,991 просмотров • 12 дней назад

Astra one-shotted this interactive river scene in 30 mins 🤯 I struggled with Sol for 2 weeks on this and Astra was able to get a working prototype first try. Honestly, this gets me really excited because it raises the bar for what is now possible in the browser.

Astra one-shotted this interactive river scene in 30 mins 🤯 I struggled with Sol for 2 weeks on this and Astra was able to get a working prototype first try. Honestly, this gets me really excited because it raises the bar for what is now possible in the browser.

69,936 просмотров • 1 месяц назад

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

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

187,184 просмотров • 4 месяцев назад

$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🤯$

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🤯

176,091 просмотров • 5 месяцев назад

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!

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!

207,070 просмотров • 7 месяцев назад

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

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

117,224 просмотров • 5 месяцев назад

Three.js Water Pro v3.3.0 is now available! 🌊 Waves are now calibrated to real-world units. Set the peak wavelength & wind speed and the physics takes care of the rest! I've also added a new "Max" quality level for even more wetness 💦 Try it here 👉🏻

Three.js Water Pro v3.3.0 is now available! 🌊 Waves are now calibrated to real-world units. Set the peak wavelength & wind speed and the physics takes care of the rest! I've also added a new "Max" quality level for even more wetness 💦 Try it here 👉🏻

62,653 просмотров • 2 месяцев назад

Accidentally disabled the friction and things escalated quickly. Honestly, this would be a pretty badass game.

Accidentally disabled the friction and things escalated quickly. Honestly, this would be a pretty badass game.

31,787 просмотров • 1 месяц назад

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! 🤿🌊🐟

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! 🤿🌊🐟

103,255 просмотров • 6 месяцев назад