Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

dangreenheck's profile picture

Dan Greenheck

4,271 subscribers

28,057 Aufrufe • vor 6 Monaten •via X (Twitter)

#shaders
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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
0:44

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

18,852 Aufrufe • vor 6 Monaten

After spending some time in the Virgin Islands, I was inspired to create a WebGPU-based water shader with TSL and compute shaders 🌊 Lots left to do, but it's finally starting to look decent! #threejs #webgl #webgpu #shaders
0:51

After spending some time in the Virgin Islands, I was inspired to create a WebGPU-based water shader with TSL and compute shaders 🌊 Lots left to do, but it's finally starting to look decent! #threejs #webgl #webgpu #shaders

Dan Greenheck

28,002 Aufrufe • vor 7 Monaten

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
1:55

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 Aufrufe • vor 7 Monaten

WebGPU + Compute Shaders = 🤯 >500K stars runs at 60fps on my M1 Pro ⚡️ In my latest blog post, I walk through how to build this interactive galaxy simulation 🌌 Source code and live demo link in comments 👇🏻 #threejs #webgl #webgpu #shaders
0:46

WebGPU + Compute Shaders = 🤯 >500K stars runs at 60fps on my M1 Pro ⚡️ In my latest blog post, I walk through how to build this interactive galaxy simulation 🌌 Source code and live demo link in comments 👇🏻 #threejs #webgl #webgpu #shaders

Dan Greenheck

18,509 Aufrufe • vor 7 Monaten

I'm honestly kind of amazed that WebGL can render this at 30FPS @ 2K resolution on my M1 Pro. WebGPU is amazing, but WebGL is still quite capable.
0:21

I'm honestly kind of amazed that WebGL can render this at 30FPS @ 2K resolution on my M1 Pro. WebGPU is amazing, but WebGL is still quite capable.

Dan Greenheck

17,259 Aufrufe • vor 29 Tagen

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

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,884 Aufrufe • vor 3 Monaten

First test with #webgpu #threejs #tsl : InstancedMesh, node material, compute shaders and psrdnoise. Demo : Source :
0:36

First test with #webgpu #threejs #tsl : InstancedMesh, node material, compute shaders and psrdnoise. Demo : Source :

Kevin Levron

19,378 Aufrufe • vor 1 Jahr

Excited to announce that Three.js Water Pro 🌊 is now available for purchase! Can't wait to see what people build with this. Welcome to the era of WebGPU! 🚀 #threejs #webgpu #webgl #shaders
0:51

Excited to announce that Three.js Water Pro 🌊 is now available for purchase! Can't wait to see what people build with this. Welcome to the era of WebGPU! 🚀 #threejs #webgpu #webgl #shaders

Dan Greenheck

37,109 Aufrufe • vor 4 Monaten

Yeah, bloom node in #threejs r167! Let's make some particles! Linked this time, inspired by Keijiro Takahashi , but in your browser, on your GPU :) Link to play below ⬇️ #tsl #webgpu #compute
0:36

Yeah, bloom node in #threejs r167! Let's make some particles! Linked this time, inspired by Keijiro Takahashi , but in your browser, on your GPU :) Link to play below ⬇️ #tsl #webgpu #compute

Christophe Choffel

45,749 Aufrufe • vor 1 Jahr

finally got around to combining my threejs / webgpu fluid shader, ascii shader, and crt shader
0:32

finally got around to combining my threejs / webgpu fluid shader, ascii shader, and crt shader

Codetaur

26,118 Aufrufe • vor 11 Tagen

Left: Normal ASCII shader Right: Shape-aware ASCII shader ASCII characters are chosen based on their shape, so you get clearer edges Vectors are calculated and compared with WebGPU compute shaders It's based on an altered version of Alex Harri's approach. I'll link below
0:38

Left: Normal ASCII shader Right: Shape-aware ASCII shader ASCII characters are chosen based on their shape, so you get clearer edges Vectors are calculated and compared with WebGPU compute shaders It's based on an altered version of Alex Harri's approach. I'll link below

abdullah

305,013 Aufrufe • vor 4 Monaten

working on adding decent bitmap font support to my crt shader in threejs / webgpu
0:23

working on adding decent bitmap font support to my crt shader in threejs / webgpu

Codetaur

53,568 Aufrufe • vor 3 Monaten

Building Three.js shaders is about to get a whole lot easier! 👍 Introducing Three.js Shader Graph — visual node-based editing for TSL. 🖱️Drag & drop nodes 📺Real-time 3D preview 🔄Auto-generate TSL code in realtime Join the waitlist 👉🏻 #threejs #webgl #webgpu #shaders
1:46

Building Three.js shaders is about to get a whole lot easier! 👍 Introducing Three.js Shader Graph — visual node-based editing for TSL. 🖱️Drag & drop nodes 📺Real-time 3D preview 🔄Auto-generate TSL code in realtime Join the waitlist 👉🏻 #threejs #webgl #webgpu #shaders

Dan Greenheck

35,464 Aufrufe • vor 6 Monaten

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

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,301 Aufrufe • vor 7 Tagen

Have a look at this highly-realistic real-time 3D rain shader set up by VFX Artist Sakura Rabbit 樱花兔 in Unity 6. See Sakura's previous Unity 6 experiment: #unity #unity3d #madewithunity #3d #3dart #3dcg #shader #shaders #realtime #realtimevfx Unity
0:20

Have a look at this highly-realistic real-time 3D rain shader set up by VFX Artist Sakura Rabbit 樱花兔 in Unity 6. See Sakura's previous Unity 6 experiment: #unity #unity3d #madewithunity #3d #3dart #3dcg #shader #shaders #realtime #realtimevfx Unity

80 LEVEL

51,396 Aufrufe • vor 1 Jahr

Live link: My new #archiviz project using #threejs is live. A realistic scene with 25,000 trees, various post-processing effects, running at 60 FPS, less than 10 MB download 😊. Screen space global illumination makes everything more realistic. Want to know more? Follow the thread👇🏻 #webgpu #threejsJourney
1:38

Live link: My new #archiviz project using #threejs is live. A realistic scene with 25,000 trees, various post-processing effects, running at 60 FPS, less than 10 MB download 😊. Screen space global illumination makes everything more realistic. Want to know more? Follow the thread👇🏻 #webgpu #threejsJourney

Anderson Mancini

17,753 Aufrufe • vor 6 Monaten

Almost done with the interaction of my WebGPU fluid simulation! After testing BVH geometry and marching cubes with compute shaders, I chose raymarching for hands interaction & rendering. It adapts well with MLS-MPM and enables precise interaction in real-time for <2ms. #threejs
0:31

Almost done with the interaction of my WebGPU fluid simulation! After testing BVH geometry and marching cubes with compute shaders, I chose raymarching for hands interaction & rendering. It adapts well with MLS-MPM and enables precise interaction in real-time for <2ms. #threejs

Renaud

10,095 Aufrufe • vor 11 Monaten

Product update! The foam feet are now printed fully hollow, outline only. It makes them more flexible, easier to customize and have been drastically reduced in price as it reduces material and time cost. Still optimizing some print settings
0:30

Product update! The foam feet are now printed fully hollow, outline only. It makes them more flexible, easier to customize and have been drastically reduced in price as it reduces material and time cost. Still optimizing some print settings

Willow Creative

17,997 Aufrufe • vor 1 Jahr

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!
0:47

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 Aufrufe • vor 2 Monaten

🧊 Technical Showcase: A full WebGPU 3D engine that maps shader geometry to your DOM elements. Martin's gpu-curtains gives you lights, shadows, compute shaders, glTF, and instancing, but the real trick is how it turns your divs into scrollable, resizable shader planes without any coordinate math. The successor to curtains.js, rebuilt from scratch. 🔗 #WebGPU #CreativeCoding #Shaders #WebDev #3D
1:50

🧊 Technical Showcase: A full WebGPU 3D engine that maps shader geometry to your DOM elements. Martin's gpu-curtains gives you lights, shadows, compute shaders, glTF, and instancing, but the real trick is how it turns your divs into scrollable, resizable shader planes without any coordinate math. The successor to curtains.js, rebuilt from scratch. 🔗 #WebGPU #CreativeCoding #Shaders #WebDev #3D

WebGL / WebGPU

10,971 Aufrufe • vor 4 Monaten