Loading video...

Video Failed to Load

Go Home

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

dangreenheck's profile picture

Dan Greenheck

8,917 subscribers

65,975 views • 8 months ago •via X (Twitter)

ArtsScience & Technology#threejs#webgpu#shaders
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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 views • 8 months ago

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 views • 8 months ago

I’ve opened up many of the TSL exercises to everyone! Try out some WebGPU shaders and fiddle with them, all in the browser. Pick an exercise and see if you can match the output. Link: #threejs #webgpu
0:30

I’ve opened up many of the TSL exercises to everyone! Try out some WebGPU shaders and fiddle with them, all in the browser. Pick an exercise and see if you can match the output. Link: #threejs #webgpu

Simon

11,063 views • 9 months ago

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,609 views • 8 months ago

Porting over some HLSL point cloud shaders over to spark, a gaussian splatting renderer for Three.js. Some of the effects look a bit messy with 3DGS, but fun to play around with! Also using their new depth of field here which looks really nice. Demo coming soon!
1:21

Porting over some HLSL point cloud shaders over to spark, a gaussian splatting renderer for Three.js. Some of the effects look a bit messy with 3DGS, but fun to play around with! Also using their new depth of field here which looks really nice. Demo coming soon!

grade eterna

10,946 views • 1 year ago

Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday 😍. Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines! Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.
1:41

Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday 😍. Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines! Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.

Anderson Mancini

26,822 views • 1 year ago

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 views • 8 months ago

My new #threejs project is live😍. Lumen Decor features WebGPU SSGI+SSR, showcasing how sunlight can influence decoration. Everything you see renders in real-time and weighs 4MB. #creativecoding #webgpu #tsl
2:47

My new #threejs project is live😍. Lumen Decor features WebGPU SSGI+SSR, showcasing how sunlight can influence decoration. Everything you see renders in real-time and weighs 4MB. #creativecoding #webgpu #tsl

Anderson Mancini

68,341 views • 9 months ago

Softbodies by holtsetio Realtime Tetrahedral FEM Models in the Browser, using WebGPU and written in TSL. Based on the WebGL implementation in TetSim by Johnathon Selstad, upgraded to enable collisions.
0:35

Softbodies by holtsetio Realtime Tetrahedral FEM Models in the Browser, using WebGPU and written in TSL. Based on the WebGL implementation in TetSim by Johnathon Selstad, upgraded to enable collisions.

Three.js

25,516 views • 1 year ago

quick After Effects trick for creating a Cel-shaded look for your 3D renders it's pretty limited but a nice way to add some extra shadows if needed! #AfterEffects #compositing
1:25

quick After Effects trick for creating a Cel-shaded look for your 3D renders it's pretty limited but a nice way to add some extra shadows if needed! #AfterEffects #compositing

mikuru

10,737 views • 10 days ago

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 views • 1 year ago

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 views • 8 months ago

And here’s a peek behind the scenes. 👀 A minimal Electron app connects to Azure Kinect via Node.js, reconstructs a 3D skeleton with Three.js, and reacts to motion intensity based on the velocity of some key bones. #WebGPU #Threejs
0:34

And here’s a peek behind the scenes. 👀 A minimal Electron app connects to Azure Kinect via Node.js, reconstructs a 3D skeleton with Three.js, and reacts to motion intensity based on the velocity of some key bones. #WebGPU #Threejs

Renaud

15,657 views • 1 year ago

Built a browser shader to teach relativistic effects. Beaming, lensing, Doppler & redshift—live sliders. Based on Koiava's blackhole shader on Shadertoy. I wrapped it in Three.js, added GUI toggles (beaming, redshift, photon ring), Kerr spin cheat. Link in thread. Turn sound on to play with it with the interstellar soundtrack 😀 #PhysicsTwitter #ThreeJS #WebGL #GLSL #Shaders #CreativeCoding
2:34

Built a browser shader to teach relativistic effects. Beaming, lensing, Doppler & redshift—live sliders. Based on Koiava's blackhole shader on Shadertoy. I wrapped it in Three.js, added GUI toggles (beaming, redshift, photon ring), Kerr spin cheat. Link in thread. Turn sound on to play with it with the interstellar soundtrack 😀 #PhysicsTwitter #ThreeJS #WebGL #GLSL #Shaders #CreativeCoding

Lisha

16,793 views • 9 months ago

First thing I'm going to do with visionOS is make my own 3D app icons 🤩 Apple have made this really easy - provide 3 transparent square images, don't add your own 3D effects etc.. Apple will generate specular highlights, shadows and depth in real-time based on focus.
1:01

First thing I'm going to do with visionOS is make my own 3D app icons 🤩 Apple have made this really easy - provide 3 transparent square images, don't add your own 3D effects etc.. Apple will generate specular highlights, shadows and depth in real-time based on focus.

Andrew Hart

68,864 views • 3 years ago

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 views • 4 months ago

⚡️Live: You don't always need to use 3D elements in #threejs. In this example, a simple plane with a normal/displacement texture and lights that follows the mouse gives nice effects😍 The source code is here: #threejsJourney #r3f
1:40

⚡️Live: You don't always need to use 3D elements in #threejs. In this example, a simple plane with a normal/displacement texture and lights that follows the mouse gives nice effects😍 The source code is here: #threejsJourney #r3f

Anderson Mancini

47,570 views • 3 years ago

I wanted to make a portfolio site but I didn't want to make a lame one so I spent the last ~4 months learning web dev and Three.js from scratch to make this really pretty one try it out and let me know what you think (link in replies) #threejs #webgpu #shaders
0:22

I wanted to make a portfolio site but I didn't want to make a lame one so I spent the last ~4 months learning web dev and Three.js from scratch to make this really pretty one try it out and let me know what you think (link in replies) #threejs #webgpu #shaders

Swifter

13,244 views • 4 months ago

making my threejs / webgpu star renderer (planetarium?) more of a real thing. renders 44 million stars from the gaia star catalog at 120 fps. there's no LOD/culling. every star in frame is drawn. next is adding a nice API for agents to write "tours" that play automatically
0:48

making my threejs / webgpu star renderer (planetarium?) more of a real thing. renders 44 million stars from the gaia star catalog at 120 fps. there's no LOD/culling. every star in frame is drawn. next is adding a nice API for agents to write "tours" that play automatically

Codetaur

40,672 views • 3 months ago

Master the art of Shaders in those 13 new lessons 🔥 Through these 19 hours of videos, you’ll learn some of the most mesmerising effects you wouldn’t be able to create without shaders. Use the “shaders” code for a 30% discount (next 72 hours only)
3:58

Master the art of Shaders in those 13 new lessons 🔥 Through these 19 hours of videos, you’ll learn some of the most mesmerising effects you wouldn’t be able to create without shaders. Use the “shaders” code for a 30% discount (next 72 hours only)

Bruno Simon

65,925 views • 2 years ago