Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Realtime Particle test using Transformers.js by Xenova and its upcoming WebGPU backend with the Xenova/modnet model for body segmentation. Rendered with WebGPU in Three.js. It’s so clean it makes me want to do a shadertoy visualizer in the background now 😄 #threejs

Renaud

12,327 subscribers

13,713 views • 2 years ago •via X (Twitter)

Education Arts Science & Technology #threejs

Anya Rossi• Live Now

Private livecam show

8 Comments

Xenova2 years ago

Woah! 🤯 So cool!

Renaud2 years ago

You're so cool! ❤️

Arthur Casier2 years ago

@xenovacom HELLO PIXEL RENO

Brian Jordan2 years ago

@xenovacom let's goooo that is so epic

Petra2 years ago

@xenovacom 🔥🔥🔥

Jape Ntaca2 years ago

@xenovacom Cool ! ! Don't forget you can win some extra FPS if you close the developer console.

Daniel2 years ago

@xenovacom 🔥🔥🔥

Metaverse | Eric2 years ago

@xenovacom Love the effect.

Related Videos

WebGPU is the future! 😍🔥 Transformers.js can now perform real-time background removal, powered by MODNet! ⚡️ Development for Transformers.js v3 (which adds full WebGPU support) is well underway, and we're excited to continue sharing updates and demos! Try it out yourself! 👇

WebGPU is the future! 😍🔥 Transformers.js can now perform real-time background removal, powered by MODNet! ⚡️ Development for Transformers.js v3 (which adds full WebGPU support) is well underway, and we're excited to continue sharing updates and demos! Try it out yourself! 👇

Xenova

46,513 views • 2 years ago

"Free background-image remover in the browser!" ⚡️ Happy to share a free little app that removes backgrounds from images directly in your browser! Privacy-friendly. Uses Transformers.js and for models RMBG-1.4 & MODNet. Inspired by Xenova

"Free background-image remover in the browser!" ⚡️ Happy to share a free little app that removes backgrounds from images directly in your browser! Privacy-friendly. Uses Transformers.js and for models RMBG-1.4 & MODNet. Inspired by Xenova

Addy Osmani

48,900 views • 1 year ago

Three.js WebGPU TSL grass now available in ✨ TSLFX. #threejs #r3f #webgpu

Three.js WebGPU TSL grass now available in ✨ TSLFX. #threejs #r3f #webgpu

Verekia 🔮 ManaBlade.com

12,061 views • 1 year ago

Aurelia by holtsetio Completely procedural jellyfish, with verlet physics and fake volumetric lighting. Rendered in WebGPU and TSL.

Aurelia by holtsetio Completely procedural jellyfish, with verlet physics and fake volumetric lighting. Rendered in WebGPU and TSL.

Three.js

48,528 views • 1 year ago

I don't think people realize how versatile WebGPU is! 🤯 In this demo, *both* the semantic search model and Earth shaders are running on WebGPU (via Transformers.js and Three.js, respectively). Pretty insane.

I don't think people realize how versatile WebGPU is! 🤯 In this demo, both the semantic search model and Earth shaders are running on WebGPU (via Transformers.js and Three.js, respectively). Pretty insane.

Xenova

18,317 views • 2 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.

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

Mana Blade is my MMORPG built with Three.js, React Three Fiber, and WebGPU. It loads in 2 seconds and is playable on desktop and mobile. Already 2 years in the works! Music by the very talented 磯村ショウノ Shauno Isomura. #threejs #r3f #webgpu

Mana Blade is my MMORPG built with Three.js, React Three Fiber, and WebGPU. It loads in 2 seconds and is playable on desktop and mobile. Already 2 years in the works! Music by the very talented 磯村ショウノ Shauno Isomura. #threejs #r3f #webgpu

Verekia | ManaBlade.com

14,671 views • 4 months ago

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

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

36,957 views • 4 months ago

🎨 Creative Showcase: Vermeer's Milkmaid, painted around 1658, finally gets to move. Revelium™ Studio dissolved the painting into a WebGPU particle system built with Three.js and TSL. Every particle samples color from the original canvas. The composition holds. The stillness doesn't. 🔗 CC: Dominik Fojcik & Niccolò Miranda #WebGPU #ThreeJS #CreativeCoding #TSL #Vermeer

🎨 Creative Showcase: Vermeer's Milkmaid, painted around 1658, finally gets to move. Revelium™ Studio dissolved the painting into a WebGPU particle system built with Three.js and TSL. Every particle samples color from the original canvas. The composition holds. The stillness doesn't. 🔗 CC: Dominik Fojcik & Niccolò Miranda #WebGPU #ThreeJS #CreativeCoding #TSL #Vermeer

WebGL / WebGPU

10,296 views • 3 months ago

ThreeJS WebGPU RollerCoaster 2 - #threejs #gamedev and Smart Looper Video Recorder Desktop. This demos a game written in threeJS along with a screen recorder (video and audiomix recorder). Both work together for 100% open source win with advanced #GPU #WebGPU and #musicvideo .

ThreeJS WebGPU RollerCoaster 2 - #threejs #gamedev and Smart Looper Video Recorder Desktop. This demos a game written in threeJS along with a screen recorder (video and audiomix recorder). Both work together for 100% open source win with advanced #GPU #WebGPU and #musicvideo .

Aaron Wacker

47,219 views • 3 months ago

Tried to do some gridbased PBD particles with WebGPU, similar to how Unreal's Neighborgrid3D works. Still a bit rough but fun to play around with. #WebGPU #ThreeJS

Tried to do some gridbased PBD particles with WebGPU, similar to how Unreal's Neighborgrid3D works. Still a bit rough but fun to play around with. #WebGPU #ThreeJS

OutsideOfSociety

11,993 views • 2 months ago

Introducing TTS WebGPU: The first ever text-to-speech web app built with WebGPU acceleration! 🔥 High-quality and natural speech generation that runs 100% locally in your browser, powered by OuteTTS and Transformers.js.🤗 Try it out yourself! Demo + source code below 👇

Introducing TTS WebGPU: The first ever text-to-speech web app built with WebGPU acceleration! 🔥 High-quality and natural speech generation that runs 100% locally in your browser, powered by OuteTTS and Transformers.js.🤗 Try it out yourself! Demo + source code below 👇

Xenova

19,666 views • 1 year ago

"Free, accurate voice transcription in the browser using Whisper" ⚡️ I'm happy to share a modern voice-to-text app (Say) that uses in-browser AI (Whisper and T5) to offer voice transcription, text summaries and note management. Everything is done locally in a privacy-friendly way. Built with React and Transformers.js by Xenova

"Free, accurate voice transcription in the browser using Whisper" ⚡️ I'm happy to share a modern voice-to-text app (Say) that uses in-browser AI (Whisper and T5) to offer voice transcription, text summaries and note management. Everything is done locally in a privacy-friendly way. Built with React and Transformers.js by Xenova

Addy Osmani

33,616 views • 1 year ago

Introducing SmolVLM 256M (& 500M): The world’s smallest multimodal model. Designed for efficiency and perfect for on-device applications! 🔥 It’s so small, it can even run 100% locally in your browser on WebGPU! 🤏 Powered by Transformers.js! ⚡️ Try it out yourself! 👇

Introducing SmolVLM 256M (& 500M): The world’s smallest multimodal model. Designed for efficiency and perfect for on-device applications! 🔥 It’s so small, it can even run 100% locally in your browser on WebGPU! 🤏 Powered by Transformers.js! ⚡️ Try it out yourself! 👇

Xenova

24,966 views • 1 year ago

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

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

Kevin Levron

19,378 views • 1 year 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

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

34,219 views • 6 months ago

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

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 • 6 months ago

We've been partnering with Unity for Games to bring WebGPU to their engine, so their developers have everything they need to build immersive games in the browser. Learn more about WebGPU in Unity → Get started with WebGPU →

We've been partnering with Unity for Games to bring WebGPU to their engine, so their developers have everything they need to build immersive games in the browser. Learn more about WebGPU in Unity → Get started with WebGPU →

Chrome for Developers

18,190 views • 2 years ago

🧮 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

🧮 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

13,046 views • 7 days ago

Wanted to remake and old experience dating from 2020, so here's another test with #webgpu #threejs #tsl : simple (and naive 😅) physics engine. Demo : Source :

Wanted to remake and old experience dating from 2020, so here's another test with #webgpu #threejs #tsl : simple (and naive 😅) physics engine. Demo : Source :

Kevin Levron

24,329 views • 1 year ago