正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Made some major improvements to my WebGPU water shader (thanks Ghislain Girardot for the feedback!) Fixed a bug where waves weren't propagating and implemented JONSWAP spectrum for more realistic wave grouping. Hitting ~70FPS @ 2K res on my Macbook M1 Pro #threejs #webgpu #shaders

Dan Greenheck

3,627 subscribers

18,852 次观看 • 8 个月前 •via X (Twitter)

#threejs #webgpu #shaders

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

Progress on the water shader is continuing nicely. Reduced compute time by ~40% by batching calls. Hitting ~90 FPS on my M1 Pro at 2K resolution. Replaced skybox and spent time tweaking params, looks much more realistic now. Next update I'll have some proper foam! #shaders #threejs #webgpu

Progress on the water shader is continuing nicely. Reduced compute time by ~40% by batching calls. Hitting ~90 FPS on my M1 Pro at 2K resolution. Replaced skybox and spent time tweaking params, looks much more realistic now. Next update I'll have some proper foam! #shaders #threejs #webgpu

Dan Greenheck

28,234 次观看 • 9 个月前

Made some excellent progress on my Sea of Thieves water shader! 🌊 - Clip maps for infinite water - Fixed subsurface scattering - Switched from single FFT to cascading FFTs to reduce tiling patterns at large distances - Specular highlights for that sparkle ✨ - Persistent foam (not shown since it looks terrible) My next goal is to really nail the foam and possibly even add in some sea spray. Then comes the boats! 🏴‍☠️ #webgpu #shaders #webgl #threejs #seaofthieves

Made some excellent progress on my Sea of Thieves water shader! 🌊 - Clip maps for infinite water - Fixed subsurface scattering - Switched from single FFT to cascading FFTs to reduce tiling patterns at large distances - Specular highlights for that sparkle ✨ - Persistent foam (not shown since it looks terrible) My next goal is to really nail the foam and possibly even add in some sea spray. Then comes the boats! 🏴‍☠️ #webgpu #shaders #webgl #threejs #seaofthieves

Dan Greenheck

17,046 次观看 • 9 个月前

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!

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

63,070 次观看 • 5 个月前

$Like smashing stuff? Me too.🔨 I just dropped a major update for my open-source destruction library— three-piñata 🪅 Added Voronoi fracturing and made it way easier to use. Check out the demo and relieve some stress! #threejs #webgl #webgpu #3dgraphics$

Like smashing stuff? Me too.🔨 I just dropped a major update for my open-source destruction library— three-piñata 🪅 Added Voronoi fracturing and made it way easier to use. Check out the demo and relieve some stress! #threejs #webgl #webgpu #3dgraphics

Dan Greenheck

17,395 次观看 • 9 个月前

🚀 I'm launching r3f-webgpu-perf today! "npm i r3f-webgpu-perf" One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it doesn’t support the WebGPU renderer yet. So I decided to build one. ✅ Supports both WebGL and WebGPU ✅ Modern and customizable UI ✅ Lightweight and easy to integrate ✅ Built specifically for React Three Fiber My goal is to turn r3f-webgpu-perf into more than just a metrics dashboard. I want it to become a learning tool that provides real-time optimization suggestions based on the techniques I’ve developed while building hundreds of interactive 3D projects over the last two decades. A vanilla Three.js version is also planned. If you’re building with Three.js, React Three Fiber, or WebGPU, I’d love for you to try it and share your feedback. ⭐ GitHub: 📦 NPM: Every GitHub star helps make the tool better for the entire community. #threejs #creativecoding #webgpu #r3f

🚀 I'm launching r3f-webgpu-perf today! "npm i r3f-webgpu-perf" One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it doesn’t support the WebGPU renderer yet. So I decided to build one. ✅ Supports both WebGL and WebGPU ✅ Modern and customizable UI ✅ Lightweight and easy to integrate ✅ Built specifically for React Three Fiber My goal is to turn r3f-webgpu-perf into more than just a metrics dashboard. I want it to become a learning tool that provides real-time optimization suggestions based on the techniques I’ve developed while building hundreds of interactive 3D projects over the last two decades. A vanilla Three.js version is also planned. If you’re building with Three.js, React Three Fiber, or WebGPU, I’d love for you to try it and share your feedback. ⭐ GitHub: 📦 NPM: Every GitHub star helps make the tool better for the entire community. #threejs #creativecoding #webgpu #r3f

Anderson Mancini

23,984 次观看 • 2 个月前

I'm back to working on my water simulator for interactive experiences using #threejs + #r3f. This time, I'm experimenting with #WebGPU and #TSL for better performance. I'm loving it more and more by the minute. The link and potentially a tutorial will be available soon. But if you want to play with the current version, it's available here: #creativecoding #r3f

I'm back to working on my water simulator for interactive experiences using #threejs + #r3f. This time, I'm experimenting with #WebGPU and #TSL for better performance. I'm loving it more and more by the minute. The link and potentially a tutorial will be available soon. But if you want to play with the current version, it's available here: #creativecoding #r3f

Anderson Mancini

12,525 次观看 • 1 年前

$I am having a lot of fun with this ThreeJS game. Will probably be spending more time on this cosy flyer game for #vibejam And btw, shaders are awesome! I highly recommend anyone building a 3D game to add some shaders to make your game look good. Here's a quick primer on the different types of shaders you can tell your AI to level up your game's graphics: - Noise-based shader for water refractions or shimmer - Fresnel shader for a nice rim lighting effect on your 3D game objects - Post-processing shader to change your game's color scheme dynamically - Post-processing shaders like the VHS effect that @levelsio use for the Drone flyer game - Shader effect to make the trees sway or objects wobble - and many more uses Shaders are incredibly versatile and useful. I would recommend you to go YT to check out some shader basics videos and come up with more creative uses for them!$

I am having a lot of fun with this ThreeJS game. Will probably be spending more time on this cosy flyer game for #vibejam And btw, shaders are awesome! I highly recommend anyone building a 3D game to add some shaders to make your game look good. Here's a quick primer on the different types of shaders you can tell your AI to level up your game's graphics: - Noise-based shader for water refractions or shimmer - Fresnel shader for a nice rim lighting effect on your 3D game objects - Post-processing shader to change your game's color scheme dynamically - Post-processing shaders like the VHS effect that @levelsio use for the Drone flyer game - Shader effect to make the trees sway or objects wobble - and many more uses Shaders are incredibly versatile and useful. I would recommend you to go YT to check out some shader basics videos and come up with more creative uses for them!

Danny Limanseta

202,718 次观看 • 4 个月前

Link: I updated my #threejs portfolio to add some of my latest projects. Realistic water is now available in XR mode. The Mesh Transition material is available for purchase on Patreon. More projects are coming soon. Subscribe to the newsletter to stay up to date. #threejsJourney #creativecoding #webgl #glsl

Link: I updated my #threejs portfolio to add some of my latest projects. Realistic water is now available in XR mode. The Mesh Transition material is available for purchase on Patreon. More projects are coming soon. Subscribe to the newsletter to stay up to date. #threejsJourney #creativecoding #webgl #glsl

Anderson Mancini

11,934 次观看 • 1 年前

Took Grok 4.6 out for a spin this weekend and built this horde shooter prototype on ThreeJS. It is a big step up from Grok 4.5! I've always wanted to try building a horde shooter game with thousands of enemies onscreen and used Grok 4.6 for pretty much everything (including UI, vfx, and even the sfx!), except the 3D models for the characters, which were made and rigged with Meshy. I'm also amazed that ThreeJS with WebGPU can really handle thousands of enemies onscreen at the same time, though I think I pushed the limit here with Depth of Field and some other fancy shaders. Very fun!

Took Grok 4.6 out for a spin this weekend and built this horde shooter prototype on ThreeJS. It is a big step up from Grok 4.5! I've always wanted to try building a horde shooter game with thousands of enemies onscreen and used Grok 4.6 for pretty much everything (including UI, vfx, and even the sfx!), except the 3D models for the characters, which were made and rigged with Meshy. I'm also amazed that ThreeJS with WebGPU can really handle thousands of enemies onscreen at the same time, though I think I pushed the limit here with Depth of Field and some other fancy shaders. Very fun!

Danny Limanseta

63,198 次观看 • 13 天前

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!

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

62,015 次观看 • 3 个月前

My #threejs Lumen Decor Studio is getting an update. It will now support more settings and more complex scenes, thanks to the latest library updates. I'm combining #WebGPU SSGI with light probes, giving us the best of both worlds. Real-time light bounces via SSGI, and when the camera stops moving, I bake probes to measure the average light in the room, generating fill lights that paint an envmap. I also created a denoiser for SSGI, avoiding the previous blur that discarded the AO. Now, everything is lighter, a little noisier, but it complements indirect light well. Live link coming soon. BTW: The video is on my YouTube Channel in case you want to watch it in a higher resolution: #creativecoding #archiviz #WebGPU

My #threejs Lumen Decor Studio is getting an update. It will now support more settings and more complex scenes, thanks to the latest library updates. I'm combining #WebGPU SSGI with light probes, giving us the best of both worlds. Real-time light bounces via SSGI, and when the camera stops moving, I bake probes to measure the average light in the room, generating fill lights that paint an envmap. I also created a denoiser for SSGI, avoiding the previous blur that discarded the AO. Now, everything is lighter, a little noisier, but it complements indirect light well. Live link coming soon. BTW: The video is on my YouTube Channel in case you want to watch it in a higher resolution: #creativecoding #archiviz #WebGPU

Anderson Mancini

29,926 次观看 • 3 个月前

I'm building a first-class shader graph editor for Three.js. Powered by TSL and WebGPU. Real-time previews. Human readable code. Type inference. The list goes on. The free plan will include a fully featured editor (except for custom code nodes) with export to TSL so you can drop your shader right into your project in seconds. I'll also be offering a paid plan for a small monthly fee to cover hosting costs. Some benefits include unlimited projects, private projects, versioning, export to GLSL/WGSL, and more. Join the waitlist now👇🏻

I'm building a first-class shader graph editor for Three.js. Powered by TSL and WebGPU. Real-time previews. Human readable code. Type inference. The list goes on. The free plan will include a fully featured editor (except for custom code nodes) with export to TSL so you can drop your shader right into your project in seconds. I'll also be offering a paid plan for a small monthly fee to cover hosting costs. Some benefits include unlimited projects, private projects, versioning, export to GLSL/WGSL, and more. Join the waitlist now👇🏻

Dan Greenheck

25,719 次观看 • 6 个月前

A little work in progress on my new #threejs project showing how Screen Space Global Illumination also works wonders in open scenes. Here, I'm using SSGI with CSM, SSS (screen space shadows), and a custom atmospheric fog for more realism. Adjusting the time of day in a scene like this is like a dream come true 😍. More details soon. #webgpu #tsl #creativecoding #threejsJourney

A little work in progress on my new #threejs project showing how Screen Space Global Illumination also works wonders in open scenes. Here, I'm using SSGI with CSM, SSS (screen space shadows), and a custom atmospheric fog for more realism. Adjusting the time of day in a scene like this is like a dream come true 😍. More details soon. #webgpu #tsl #creativecoding #threejsJourney

Anderson Mancini

11,017 次观看 • 9 个月前

I think I might need a more powerful computer...my M1 Macbook Air with its external SSD just ain't cutting it. Been generating frames for this new animation nonstop for the past 3 days and I've only made it through the first 5 years of #Bitcoin data...about 11 more to go. 😅😮‍💨

I think I might need a more powerful computer...my M1 Macbook Air with its external SSD just ain't cutting it. Been generating frames for this new animation nonstop for the past 3 days and I've only made it through the first 5 years of #Bitcoin data...about 11 more to go. 😅😮‍💨

Wicked

25,459 次观看 • 1 年前

Apparently, my hair has officially entered the podcast scene... as a surfing destination! 💁🏻‍♀️🏄🏻‍♀️🌊 Big love to Macoy Dubs and Baus Rufo for turning my on-air (and livestream) hair into a surf spot—these waves don’t need water! Catch you on the next wave… 🤣 #CathyYang

Apparently, my hair has officially entered the podcast scene... as a surfing destination! 💁🏻‍♀️🏄🏻‍♀️🌊 Big love to Macoy Dubs and Baus Rufo for turning my on-air (and livestream) hair into a surf spot—these waves don’t need water! Catch you on the next wave… 🤣 #CathyYang

Cathy Yang

471,467 次观看 • 10 个月前

Panjura will definitely be getting a TLC update at some point in the future! We have already started some improvements to all the foliage in the game, including some on Panjura. Grasses will ripple in the wind and trees will sway in the breeze. This isn't the final TLC for the map, but is a result of other overall game improvements. All of the foliage is now on its own shader, allowing further tweaks across every plant to be made easily and quickly. We would also like to ensure when we tackle this TLC in the future that flyers are able to work on Panjura, and to introduce more water and waterways for swimming creatures. #pathoftitans #dinosaurs

Panjura will definitely be getting a TLC update at some point in the future! We have already started some improvements to all the foliage in the game, including some on Panjura. Grasses will ripple in the wind and trees will sway in the breeze. This isn't the final TLC for the map, but is a result of other overall game improvements. All of the foliage is now on its own shader, allowing further tweaks across every plant to be made easily and quickly. We would also like to ensure when we tackle this TLC in the future that flyers are able to work on Panjura, and to introduce more water and waterways for swimming creatures. #pathoftitans #dinosaurs

Path of Titans

11,428 次观看 • 1 年前

I can finally announce the project I've been working on with Joce ! Fondant is building a new app that brings avatars and vtubing to Web. Multiplayer lobbies for vtuber streamer collabs or just hangouts with friends, as well as character customization tools building up to a full creator. We are using a WebGL and WebGPU techstack, so part of the point is to provide a cross-platform alternative to the current Unity based app ecosystem, and also to build tools that people can use to create or modify characters without going through a DCC (Blender, Maya, etc). For now we're starting with the basics: multiplayer lobbies, VRM support, and some tools like merging accessories into existing VRMs in the quoted post, and transferring Custom Vertex Normals from proxy meshes. My role is stylized shaders and procedural character creation. I've been working on NPR Shaders and tools to help build and customize 3D anime characters in Blender for years. With WebGPU, we can bring it into Web. My hope is to build a full character customization system for the Web with next gen toon shaders, and also a matching set of tools in Blender for serious content creators. But it is early days still, and there's a lot to be done! Here's the latest WIP of the rig for fitting proxy meshes to new faces.

I can finally announce the project I've been working on with Joce ! Fondant is building a new app that brings avatars and vtubing to Web. Multiplayer lobbies for vtuber streamer collabs or just hangouts with friends, as well as character customization tools building up to a full creator. We are using a WebGL and WebGPU techstack, so part of the point is to provide a cross-platform alternative to the current Unity based app ecosystem, and also to build tools that people can use to create or modify characters without going through a DCC (Blender, Maya, etc). For now we're starting with the basics: multiplayer lobbies, VRM support, and some tools like merging accessories into existing VRMs in the quoted post, and transferring Custom Vertex Normals from proxy meshes. My role is stylized shaders and procedural character creation. I've been working on NPR Shaders and tools to help build and customize 3D anime characters in Blender for years. With WebGPU, we can bring it into Web. My hope is to build a full character customization system for the Web with next gen toon shaders, and also a matching set of tools in Blender for serious content creators. But it is early days still, and there's a lot to be done! Here's the latest WIP of the rig for fitting proxy meshes to new faces.

aVersionOfReality

65,803 次观看 • 1 年前

Live Link: Source Code: While updating my website, I found an old project that was broken and decided to bring it back to life using WebGPU + TSL in #threejs. I’ve always loved Predator. The first time I saw the Predator cloak effect, I knew I wanted to learn visual effects and make them part of my professional life. Turn the sound on — it makes the experience much more fun 😅 This is also a great exercise if you’re learning TSL and want to experiment with glass, dispersion, IOR, and custom shaders. Both the classic shader version and the new TSL version are included in the repo so you can compare the approaches side by side. Hope it’s useful. Don’t forget to ⭐ the GitHub repo! #r3f #threejsJourney

Live Link: Source Code: While updating my website, I found an old project that was broken and decided to bring it back to life using WebGPU + TSL in #threejs. I’ve always loved Predator. The first time I saw the Predator cloak effect, I knew I wanted to learn visual effects and make them part of my professional life. Turn the sound on — it makes the experience much more fun 😅 This is also a great exercise if you’re learning TSL and want to experiment with glass, dispersion, IOR, and custom shaders. Both the classic shader version and the new TSL version are included in the repo so you can compare the approaches side by side. Hope it’s useful. Don’t forget to ⭐ the GitHub repo! #r3f #threejsJourney

Anderson Mancini

13,714 次观看 • 1 个月前

I’ve taken the #threejs water realism to the next level! Now with RGB distortion in the caustics, we get even more realistic, colorful light projections. The water movement has been improved to flow naturally, with optimizations for smoother performance. Plus, I’ve added a post-processing effect that simulates underwater distortion, complete with a dynamic waterline when the camera is partially submerged. After diving in, watch out for realistic water droplets on the screen! Stay tuned for the live link coming soon! 🌊💧. You can watch the video with better quality on my YouTube Channel. #threejsJourney #creativecoding #r3f

I’ve taken the #threejs water realism to the next level! Now with RGB distortion in the caustics, we get even more realistic, colorful light projections. The water movement has been improved to flow naturally, with optimizations for smoother performance. Plus, I’ve added a post-processing effect that simulates underwater distortion, complete with a dynamic waterline when the camera is partially submerged. After diving in, watch out for realistic water droplets on the screen! Stay tuned for the live link coming soon! 🌊💧. You can watch the video with better quality on my YouTube Channel. #threejsJourney #creativecoding #r3f

Anderson Mancini

212,780 次观看 • 1 年前