Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

🧮 Physics that never leaves the graphics card. Kevin Levron's (Kevin Levron) Three.js WebGPU demo runs the whole simulation in a compute pass, written in TSL, then draws thousands of bodies as one instanced mesh. 🔗 #WebGPU #ThreeJS #TSL #ComputeShaders #CreativeCoding

webgl_webgpu's profile picture

WebGL / WebGPU

3,272 subscribers

13,618 görüntüleme • 2 ay önce •via X (Twitter)

#WebGPU#ThreeJS#TSL#ComputeShaders
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

🎉 Play Showcase: Thousands of particles. Real physics. Your browser. Juan Cazala (cazala) built Party, a WebGPU playground where you tweak gravity and collisions live while compute shaders handle the chaos. Open it, touch the sliders, lose forty minutes. 🔗 #WebGPU #ParticleSystem #CreativeCoding #ComputeShaders #GraphicsProgramming
1:48

🎉 Play Showcase: Thousands of particles. Real physics. Your browser. Juan Cazala (cazala) built Party, a WebGPU playground where you tweak gravity and collisions live while compute shaders handle the chaos. Open it, touch the sliders, lose forty minutes. 🔗 #WebGPU #ParticleSystem #CreativeCoding #ComputeShaders #GraphicsProgramming

WebGL / WebGPU

12,837 görüntüleme • 6 ay önce

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 görüntüleme • 7 ay önce

Working on an ultra-fast SDF Texts. Instance culling via compute shader & indirect-draw is just a drop-in piece. Everything reuses and connects. Made with TSL, Threejs Plus will bring a whole new level of performance into the Web that wasn't possible before WebGPU! Stay tuned!
0:22

Working on an ultra-fast SDF Texts. Instance culling via compute shader & indirect-draw is just a drop-in piece. Everything reuses and connects. Made with TSL, Threejs Plus will bring a whole new level of performance into the Web that wasn't possible before WebGPU! Stay tuned!

Renaud

22,151 görüntüleme • 10 ay önce

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 görüntüleme • 1 yıl önce

I modified the official example "compute birds" to have 36864 paper planes and twelve monkeys flying among through columns and a hoop like circus acts. TSL runs so fast! created with #threejs live demo (all source code is in html of the page) ->
0:35

I modified the official example "compute birds" to have 36864 paper planes and twelve monkeys flying among through columns and a hoop like circus acts. TSL runs so fast! created with #threejs live demo (all source code is in html of the page) ->

Maeda Mameo

16,114 görüntüleme • 1 yıl önce

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
2:07

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 görüntüleme • 8 ay önce

🚀 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
0:43

🚀 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,606 görüntüleme • 2 ay önce

Two new #threejs projects on the way 😍 Working on my own gem renderer with a custom refraction material in TSL for #WebGPU, combining Screen Space Reflections + SSGTAO for superior results, as this allows diamonds to generate reflections on the metal mesh. The performance is incredible, even on gems with over 200 diamonds. This time, without any additional libraries. Just React Three Fiber and a lot of magic with custom shaders in TSL. GemGPU™ will also come with a very minimalist gem and metal customization panel that hides and lets the jewelry be the star. I also created a beautiful new stats panel that completely hides in the scene when not needed. It provides relevant optimization information, a performance gauge, summary and expanded modes, and day/night toggle. In the video, you can also see SSGI in action, with a pearl that reflects, in real time, all the objects in the scene, just as the objects in the scene reflect the pearl. It's magical. There are still a few things to fix, but I'll share the live link soon. Stay tuned.
3:43

Two new #threejs projects on the way 😍 Working on my own gem renderer with a custom refraction material in TSL for #WebGPU, combining Screen Space Reflections + SSGTAO for superior results, as this allows diamonds to generate reflections on the metal mesh. The performance is incredible, even on gems with over 200 diamonds. This time, without any additional libraries. Just React Three Fiber and a lot of magic with custom shaders in TSL. GemGPU™ will also come with a very minimalist gem and metal customization panel that hides and lets the jewelry be the star. I also created a beautiful new stats panel that completely hides in the scene when not needed. It provides relevant optimization information, a performance gauge, summary and expanded modes, and day/night toggle. In the video, you can also see SSGI in action, with a pearl that reflects, in real time, all the objects in the scene, just as the objects in the scene reflect the pearl. It's magical. There are still a few things to fix, but I'll share the live link soon. Stay tuned.

Anderson Mancini

12,113 görüntüleme • 6 ay önce

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
2:07

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,340 görüntüleme • 11 gün önce

Working on sparse volumetric light maps for WebGPU. Got generation part sorted. The resolution is adaptive, refining near geometry and skipping through most of the empty space. The video is question uses a map that's only 10MB in size, including everything. That's less the amount of GPU memory that a single leaf takes up on one of threes in the scene, or texture on one of the sign-posts. We get about 1 sample every 30 centimeters in the world space. As a side note: gave my renderer quite the workout, rendering each probe as a separate non-instanced mesh for debugging.
1:11

Working on sparse volumetric light maps for WebGPU. Got generation part sorted. The resolution is adaptive, refining near geometry and skipping through most of the empty space. The video is question uses a map that's only 10MB in size, including everything. That's less the amount of GPU memory that a single leaf takes up on one of threes in the scene, or texture on one of the sign-posts. We get about 1 sample every 30 centimeters in the world space. As a side note: gave my renderer quite the workout, rendering each probe as a separate non-instanced mesh for debugging.

Alex Goldring

18,651 görüntüleme • 6 ay önce

Someone on Reddit just built a AAA-quality snow simulation in their browser. Using Claude Opus 5. Millions of snow particles. A character in a robe with cloth physics. Five water-based spells that carve the terrain. A snow surfing system with a wake that throws spray into sunlight. Every footstep displaces snow. Trails form berms at the edges. Trenches slowly refill over time. Spells leave permanent craters. The entire thing runs in one browser tab. WebGPU. No game engine. No 3D modeling software. Just code. He wrote one detailed prompt. Opus 5 planned the architecture, wrote the shaders, built the physics, iterated from screenshots, and documented every decision. 9 hours. ~4 million tokens. You can open it right now and walk around in it. This isn't a demo. This is the kind of thing a small studio would spend months building.
0:47

Someone on Reddit just built a AAA-quality snow simulation in their browser. Using Claude Opus 5. Millions of snow particles. A character in a robe with cloth physics. Five water-based spells that carve the terrain. A snow surfing system with a wake that throws spray into sunlight. Every footstep displaces snow. Trails form berms at the edges. Trenches slowly refill over time. Spells leave permanent craters. The entire thing runs in one browser tab. WebGPU. No game engine. No 3D modeling software. Just code. He wrote one detailed prompt. Opus 5 planned the architecture, wrote the shaders, built the physics, iterated from screenshots, and documented every decision. 9 hours. ~4 million tokens. You can open it right now and walk around in it. This isn't a demo. This is the kind of thing a small studio would spend months building.

Vaibhav Sisinty

1,217,453 görüntüleme • 12 gün önce

Kobe slapped the floor at LeBron’s face saying let’s go one on one and then Lebron threw a TO. Kevin Garnett- Lebron didn’t want non of that. Kobe wanted all the smoke man, LeBron didn’t. LeBron lost to Orlando and Boston just thinking of Kobe in the finals. He said, nahhhh I’ll pass.
0:44

Kobe slapped the floor at LeBron’s face saying let’s go one on one and then Lebron threw a TO. Kevin Garnett- Lebron didn’t want non of that. Kobe wanted all the smoke man, LeBron didn’t. LeBron lost to Orlando and Boston just thinking of Kobe in the finals. He said, nahhhh I’ll pass.

MambaRomeo

140,200 görüntüleme • 1 ay önce

Excited to announce that I've shipped my first game! Written from the ground up in Three.js in 3 months and published on VIVERSE Official Some tech stuff that I'm really proud of: - fully custom spherical harmonics prt lighting. Giving a baked diffuse look while still allowing for dynamic objects - Runs completely inside a WebWorker (rendering & simulation) using OffscreenCanvas - Supports all input types: desktop, mobile, gamepad (non-trivial if your app runs in a worker!) - No Postprocessing! No bloom - everything you see is faked via mesh based shaders for performance reasons Huge thanks to VIVERSE Official who have made this possible by letting me into their Creator Program. It's not easy to make a living off gamedev on the web yet, so this is great for the ecosystem. All links below: #VIVERSE #threejs #IndieGameDev
0:38

Excited to announce that I've shipped my first game! Written from the ground up in Three.js in 3 months and published on VIVERSE Official Some tech stuff that I'm really proud of: - fully custom spherical harmonics prt lighting. Giving a baked diffuse look while still allowing for dynamic objects - Runs completely inside a WebWorker (rendering & simulation) using OffscreenCanvas - Supports all input types: desktop, mobile, gamepad (non-trivial if your app runs in a worker!) - No Postprocessing! No bloom - everything you see is faked via mesh based shaders for performance reasons Huge thanks to VIVERSE Official who have made this possible by letting me into their Creator Program. It's not easy to make a living off gamedev on the web yet, so this is great for the ecosystem. All links below: #VIVERSE #threejs #IndieGameDev

Brian Breiholz

14,587 görüntüleme • 1 yıl önce

You passed physics in school. A former NASA fellow says that means nothing. You memorized the formulas and never understood a single one. His proof is the most famous equation on Earth. F equals ma. You have written it a hundred times. And he says you have been reading it backwards your whole life. It should be a equals F over m. Not force equals mass times acceleration, but acceleration is caused by a force. One is a string of symbols to memorize. The other tells you what actually happens in the universe: push something, it moves. Cause, then effect. Flip that one idea and equations you hated in school start to breathe. V equals IR becomes current is driven by voltage. Even E equals mc squared stops being trivia and becomes the sentence that told Einstein what mass really is. The comments are full of people admitting the same quiet thing. Aced physics in high school. Got to university. Realized they never understood any of it. One writes that in his country, the moment you try to actually understand physics, your grades drop, because school only rewards cramming. You were not taught physics. You were taught to pass a test and forget it. This is the video that shows the difference.
11:02

You passed physics in school. A former NASA fellow says that means nothing. You memorized the formulas and never understood a single one. His proof is the most famous equation on Earth. F equals ma. You have written it a hundred times. And he says you have been reading it backwards your whole life. It should be a equals F over m. Not force equals mass times acceleration, but acceleration is caused by a force. One is a string of symbols to memorize. The other tells you what actually happens in the universe: push something, it moves. Cause, then effect. Flip that one idea and equations you hated in school start to breathe. V equals IR becomes current is driven by voltage. Even E equals mc squared stops being trivia and becomes the sentence that told Einstein what mass really is. The comments are full of people admitting the same quiet thing. Aced physics in high school. Got to university. Realized they never understood any of it. One writes that in his country, the moment you try to actually understand physics, your grades drop, because school only rewards cramming. You were not taught physics. You were taught to pass a test and forget it. This is the video that shows the difference.

ooaes

40,124 görüntüleme • 12 gün önce

HRT, one of the largest quantitative trading firms in the world, just revealed the scale of their AI operation. "two of the biggest ingredients you need to build deep learning models are compute and data. HRT has both in incredible orders of magnitude." "we have vast quantities of data, on the order of petabytes, just in terms of raw tick data we've written down since the beginning of electronic trading." "we have a very high compute-per-researcher ratio." then the line that puts it in perspective: "there probably aren't too many places on Earth you can do cutting-edge deep learning research at the level we do it, just because of how few places have access to as much compute." "it's basically the hyperscalers of the world and then we're in the next tranche." a trading firm putting itself in the same compute tier as Google, Microsoft, and Meta. not for chatbots, for trading.
2:08

HRT, one of the largest quantitative trading firms in the world, just revealed the scale of their AI operation. "two of the biggest ingredients you need to build deep learning models are compute and data. HRT has both in incredible orders of magnitude." "we have vast quantities of data, on the order of petabytes, just in terms of raw tick data we've written down since the beginning of electronic trading." "we have a very high compute-per-researcher ratio." then the line that puts it in perspective: "there probably aren't too many places on Earth you can do cutting-edge deep learning research at the level we do it, just because of how few places have access to as much compute." "it's basically the hyperscalers of the world and then we're in the next tranche." a trading firm putting itself in the same compute tier as Google, Microsoft, and Meta. not for chatbots, for trading.

Goshawk Trades

14,548 görüntüleme • 2 ay önce

i spent the afternoon experimenting with Gemma 4's vision capabilities made an app that uses roboflow RF-DETR for a first pass of object detections and Gemma to summarize the scene in one sentence for fun i asked Gemma to "describe what you see as if you were a medieval bard" all made with free local AI models (running via webgpu in the browser thanks to transformers js) lots more possibilities to explore with this
0:28

i spent the afternoon experimenting with Gemma 4's vision capabilities made an app that uses roboflow RF-DETR for a first pass of object detections and Gemma to summarize the scene in one sentence for fun i asked Gemma to "describe what you see as if you were a medieval bard" all made with free local AI models (running via webgpu in the browser thanks to transformers js) lots more possibilities to explore with this

AA

700,941 görüntüleme • 4 ay önce

"A whole generation of young people disappeared in that city. One guy got rid of 5,000 bodies. He never murdered anybody, though. He just got the bodies brought to him—a scene out of Auschwitz. There was a room full of shoes and clothing. It was creepy as hell. All those shoes and clothing belonged to somebody, and they just made these bodies disappear." Ed's Manifesto
10:16

"A whole generation of young people disappeared in that city. One guy got rid of 5,000 bodies. He never murdered anybody, though. He just got the bodies brought to him—a scene out of Auschwitz. There was a room full of shoes and clothing. It was creepy as hell. All those shoes and clothing belonged to somebody, and they just made these bodies disappear." Ed's Manifesto

Shawn Ryan

760,700 görüntüleme • 1 yıl önce

Since using probes is a very technical subject and difficult to understand without visual examples, I decided to create a video with an exaggerated example to show the incredible results that mrdoob 's work with probes can provide. As you can see in the video, the hybrid solution of probes with SSGI blends the best of both worlds: projected lights when the objects emitting the color are in the scene, and indirect light provided by the probes when they are not. Of course, nobody is going to use red and green walls at home lol. This is just a visual example to exaggerate the use and demonstrate how the technology works from a creative point of view. I hope it helps someone 🤗. #threejs #threejsJourney #creativecoding #webgpu
2:42

Since using probes is a very technical subject and difficult to understand without visual examples, I decided to create a video with an exaggerated example to show the incredible results that mrdoob 's work with probes can provide. As you can see in the video, the hybrid solution of probes with SSGI blends the best of both worlds: projected lights when the objects emitting the color are in the scene, and indirect light provided by the probes when they are not. Of course, nobody is going to use red and green walls at home lol. This is just a visual example to exaggerate the use and demonstrate how the technology works from a creative point of view. I hope it helps someone 🤗. #threejs #threejsJourney #creativecoding #webgpu

Anderson Mancini

12,632 görüntüleme • 2 ay önce

Engineers, creatives, designers - lend me your ears, and eyes, to check my🥇1st tech demo of 2025: A #WebAI Agent running entirely client side in the browser, that's capable of controlling a flight search webpage, to get the job done! I'm using Google's Gemma 2 (2B) model in #JavaScript via #WebGPU thanks to the MediaPipe Web LLM library, combined with some extra function calling logic to enable advanced user experiences. If you like what you see, give this post a share, as I'm just one guy trying to show the world the power of Web AI to do great things. Try it for yourself using the link below after watching the video, but do so on a modernish machine (I have verified it runs on my 6 year old Dell XPS with only an Intel integrated GPU) but use a modern browser like Chrome as it needs WebGPU to run. Want me to make a demo for your industry? Tell me what you need / want to see next! Let me know what you think, and if you have any questions, then drop them in the comments below! YouTube Video Link:
5:52

Engineers, creatives, designers - lend me your ears, and eyes, to check my🥇1st tech demo of 2025: A #WebAI Agent running entirely client side in the browser, that's capable of controlling a flight search webpage, to get the job done! I'm using Google's Gemma 2 (2B) model in #JavaScript via #WebGPU thanks to the MediaPipe Web LLM library, combined with some extra function calling logic to enable advanced user experiences. If you like what you see, give this post a share, as I'm just one guy trying to show the world the power of Web AI to do great things. Try it for yourself using the link below after watching the video, but do so on a modernish machine (I have verified it runs on my 6 year old Dell XPS with only an Intel integrated GPU) but use a modern browser like Chrome as it needs WebGPU to run. Want me to make a demo for your industry? Tell me what you need / want to see next! Let me know what you think, and if you have any questions, then drop them in the comments below! YouTube Video Link:

Jason Mayes

42,895 görüntüleme • 1 yıl önce

"The sea was angry that day my friends." 🌊 Getting this foam to work was NOT easy. Tried a million different approaches but eventually landed on calculating foam from the Jacobian (aka steepness), adding in a persistence buffer with decay, then layering fractal Voronoi noise on top of that. Fairly standard approach as far as I can tell but getting Claude to do it correctly was 75% of the challenge. It's still not perfect (still have some tiling issues over large distances), but it feels good enough to move on. Next I will be adding some sea spray before adding in objects! #threejs #webgl #webgpu #shaders
0:52

"The sea was angry that day my friends." 🌊 Getting this foam to work was NOT easy. Tried a million different approaches but eventually landed on calculating foam from the Jacobian (aka steepness), adding in a persistence buffer with decay, then layering fractal Voronoi noise on top of that. Fairly standard approach as far as I can tell but getting Claude to do it correctly was 75% of the challenge. It's still not perfect (still have some tiling issues over large distances), but it feels good enough to move on. Next I will be adding some sea spray before adding in objects! #threejs #webgl #webgpu #shaders

Dan Greenheck

22,623 görüntüleme • 8 ay önce