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.

Added a WebGPU morphing engine with post-processing effects to my custom Rust framework, plus lazy loading for GPU assets. Next step: shader-driven text animations, in and out.

Aristide Benoist

33,427 subscribers

28,671 views • 2 days ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Picking added to my WebGPU Engine. Next step, ktx textures. #webgpu

Picking added to my WebGPU Engine. Next step, ktx textures. #webgpu

Aristide Benoist

82,294 views • 1 year ago

My MTSDF generator is ready, built in Rust. The output is highly optimized and plugs directly into my WebGPU engine, using instanced glyphs. Text now aligns perfectly between canvas and HTML, whatever the font used, with accurate position, letter spacing and line height. 🦀 Next step is a particles module: simulation, point cloud, gaussian splatting. 🫧

My MTSDF generator is ready, built in Rust. The output is highly optimized and plugs directly into my WebGPU engine, using instanced glyphs. Text now aligns perfectly between canvas and HTML, whatever the font used, with accurate position, letter spacing and line height. 🦀 Next step is a particles module: simulation, point cloud, gaussian splatting. 🫧

Aristide Benoist

20,942 views • 8 months ago

New webGPU / threeJS rock shader loading!!

New webGPU / threeJS rock shader loading!!

👁️👁️👁️

27,504 views • 10 months ago

You know what’s even cooler than instanced skinning? Full Meshlet Skinning with #WebGPU in the browser. 🦴 10,000 characters. 300M triangles. Per-cluster culling. Zero CPU bottleneck. Carolina Aiazzi and I have spent the last few years building a custom GPU-driven engine for the web. More to come soon!🤫

You know what’s even cooler than instanced skinning? Full Meshlet Skinning with #WebGPU in the browser. 🦴 10,000 characters. 300M triangles. Per-cluster culling. Zero CPU bottleneck. Carolina Aiazzi and I have spent the last few years building a custom GPU-driven engine for the web. More to come soon!🤫

Etienne Pinchon

25,445 views • 7 months ago

A tour of the post-processing features in my WebGPU engine. Chaining global passes like blur, bloom, and pixelate, on top of a disturb pipeline with its own options: distortion, black and white, lighten, darken, noise, RGB split, and more. It also supports layer and plane UV isolation. Planes can have optional shadows and rounded borders. Behind-the-scenes split view shows the raw pass vs final composite. Built from scratch with the WebGPU JavaScript API. Lightweight, minimal code, 0 dependencies, modular custom components 🧩. Next, vertex work and finish the MTSDF generator I’m building in Rust. ✨

A tour of the post-processing features in my WebGPU engine. Chaining global passes like blur, bloom, and pixelate, on top of a disturb pipeline with its own options: distortion, black and white, lighten, darken, noise, RGB split, and more. It also supports layer and plane UV isolation. Planes can have optional shadows and rounded borders. Behind-the-scenes split view shows the raw pass vs final composite. Built from scratch with the WebGPU JavaScript API. Lightweight, minimal code, 0 dependencies, modular custom components 🧩. Next, vertex work and finish the MTSDF generator I’m building in Rust. ✨

Aristide Benoist

16,364 views • 8 months ago

Cursor position and color uniforms are now available to custom shaders in Ghostty, enabling cursor animations (and other effects). Video below is a rough demo of something simple. Can't wait to see what the custom shader community does with this. :) Docs:

Cursor position and color uniforms are now available to custom shaders in Ghostty, enabling cursor animations (and other effects). Video below is a rough demo of something simple. Can't wait to see what the custom shader community does with this. :) Docs:

Mitchell Hashimoto

70,354 views • 1 year ago

Working on simulating sunset, night and fake lights with only post processing and simple shaders. Still very rough, next step is to figure out good solutions for the sky!

Working on simulating sunset, night and fake lights with only post processing and simple shaders. Still very rough, next step is to figure out good solutions for the sky!

Doot 🪲🪷 Wishlist Milki Delivery 🐮🚲

16,998 views • 6 months ago

I built gpu-pii, inspired by Shu's gpu-lexer. A small model, trained from scratch, runs on WebGPU in your browser to detect personal information in any text

I built gpu-pii, inspired by Shu's gpu-lexer. A small model, trained from scratch, runs on WebGPU in your browser to detect personal information in any text

Duncan

10,488 views • 1 month ago

Added mipmaps to my WebGPU engine to keep images sharp when I play with layout transitions. Can’t wait to share what’s coming! 📽️

Added mipmaps to my WebGPU engine to keep images sharp when I play with layout transitions. Can’t wait to share what’s coming! 📽️

Aristide Benoist

41,589 views • 9 months ago

Morphing braille loader for async item creation ⊙ Dynamic label preview in header ⊙ Loader powered by 𝚖𝚘𝚝𝚒𝚘𝚗 ⊙ Smooth transition from loading → success state ⊙ Exit animation via <𝙰𝚗𝚒𝚖𝚊𝚝𝚎𝙿𝚛𝚎𝚜𝚎𝚗𝚌𝚎 /> ⊙ Text morphing with 𝚝𝚘𝚛𝚙𝚑 by ؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie

Morphing braille loader for async item creation ⊙ Dynamic label preview in header ⊙ Loader powered by 𝚖𝚘𝚝𝚒𝚘𝚗 ⊙ Smooth transition from loading → success state ⊙ Exit animation via <𝙰𝚗𝚒𝚖𝚊𝚝𝚎𝙿𝚛𝚎𝚜𝚎𝚗𝚌𝚎 /> ⊙ Text morphing with 𝚝𝚘𝚛𝚙𝚑 by ؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie

kian bazza

79,387 views • 8 months ago

Scroll-triggered animations are coming to Chrome early next year (and we've been really excited about this one for a bit!) 🥳 Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range, rather than relying on the scroller completion *as* the animation timeline. I got nerd-sniped and wanted to try it out so I built this shape morphing demo to show how you can apply multiple animations to the same element over with different triggers. PRETTY COOL IMO! Bramus has a post with more info ⬇️

Scroll-triggered animations are coming to Chrome early next year (and we've been really excited about this one for a bit!) 🥳 Unlike scroll-driven animations (already in Chrome & Safari), this API introduces "timeline-trigger" and "animation-trigger" to start an animation within a specific range, rather than relying on the scroller completion as the animation timeline. I got nerd-sniped and wanted to try it out so I built this shape morphing demo to show how you can apply multiple animations to the same element over with different triggers. PRETTY COOL IMO! Bramus has a post with more info ⬇️

Una 🇺🇦

38,782 views • 10 months ago

A real-time AI motion capture model with 1B parameters. Connects to a 1080P camera or processes uploaded video to generate 3D motion data in real time. Supports Unreal Engine, Unity, and Blender, requiring 8GB of GPU VRAM for real-time processing.

A real-time AI motion capture model with 1B parameters. Connects to a 1080P camera or processes uploaded video to generate 3D motion data in real time. Supports Unreal Engine, Unity, and Blender, requiring 8GB of GPU VRAM for real-time processing.

CYANPUPPETS

37,070 views • 7 months ago

two Ssstanley GIF animations with sound effects added

two Ssstanley GIF animations with sound effects added

~M(A)cho

22,686 views • 1 year ago

Post-Processing Outlines Shader/Math: 🔲 > Generate thick outlines for the entire scene. More code w/ Shader Graph setup in replies. 🧵 #unity3d #gamedev #realtimevfx

Post-Processing Outlines Shader/Math: 🔲 > Generate thick outlines for the entire scene. More code w/ Shader Graph setup in replies. 🧵 #unity3d #gamedev #realtimevfx

Mirza Beig

39,031 views • 2 years ago

Now on Godot WebGPU we have unreal-nanite-style (GPU Driven) rendering like the ThreeJS demo. 🚀 This isn't a shader. This is an actual deep modification to the Godot engine. And the Godot engine native is now ~2x faster for 3D as well (depends on your game). I can push this to almost 300x300 (from 100x100 in the video) and 55fps before it starts having more instances than 16bit integers and the buffer overflows. I can increase it to higher bits but who's gonna have >65k instances? Threejs demo crashed the webpage when I pushed it to above 175x175. This is literally Godot 5. I'm not sure if they'll ever accept these changes any time soon or if I'll keep it as a fork, but over the next few weeks/ months I'll get it production ready either way. Still need to round out the rest of the features, but honestly I could stop here as opaque draw batching on the GPU is the 80/20 of GPU driven rendering. The rest is smaller gains and only matters for ginormous worlds or super high fidelity. Unfortunately the WebGPU spec doesn't support multi-draw-indirect calls which is somewhat the bread and butter of GPU Driven Rendering but this demo only has 2 unique instances so MDI doesn't matter. With 1000s of actual unique instance MDI matters, and that's 100% supported on this Godot fork for native (I'll post a demo later) but not on WebGPU until the WebGPU people implement it. I might have to contribute to WebGPU then too.. I've spent way too much time on this. I want to get transparency and meshlets working too but I need to get back to Shiny Gen development so I can eat. Then I'll get back to Godot development in a couple weeks. (chart is the optimizations over time on a separate rotating cube scene, showing native increasing 2x and webgpu by 1.14x)

Now on Godot WebGPU we have unreal-nanite-style (GPU Driven) rendering like the ThreeJS demo. 🚀 This isn't a shader. This is an actual deep modification to the Godot engine. And the Godot engine native is now ~2x faster for 3D as well (depends on your game). I can push this to almost 300x300 (from 100x100 in the video) and 55fps before it starts having more instances than 16bit integers and the buffer overflows. I can increase it to higher bits but who's gonna have >65k instances? Threejs demo crashed the webpage when I pushed it to above 175x175. This is literally Godot 5. I'm not sure if they'll ever accept these changes any time soon or if I'll keep it as a fork, but over the next few weeks/ months I'll get it production ready either way. Still need to round out the rest of the features, but honestly I could stop here as opaque draw batching on the GPU is the 80/20 of GPU driven rendering. The rest is smaller gains and only matters for ginormous worlds or super high fidelity. Unfortunately the WebGPU spec doesn't support multi-draw-indirect calls which is somewhat the bread and butter of GPU Driven Rendering but this demo only has 2 unique instances so MDI doesn't matter. With 1000s of actual unique instance MDI matters, and that's 100% supported on this Godot fork for native (I'll post a demo later) but not on WebGPU until the WebGPU people implement it. I might have to contribute to WebGPU then too.. I've spent way too much time on this. I want to get transparency and meshlets working too but I need to get back to Shiny Gen development so I can eat. Then I'll get back to Godot development in a couple weeks. (chart is the optimizations over time on a separate rotating cube scene, showing native increasing 2x and webgpu by 1.14x)

David Walter (Shiny Gen)

27,981 views • 5 months ago

Getting a bunch of questions about this! It's a full gpu rendering pipeline with built in shader editor for Rive, which can interleave 2D + 3D. Think WebGPU (minus compute, for now) that runs anywhere, not just the browser. You can implement anything at all. Cell shading. Background blurs. Deformation effects. And yes, even Rive vector components as textures. Shaders are precompiled and ship with your .riv. Minimal runtime size impact. Still WIP.

Getting a bunch of questions about this! It's a full gpu rendering pipeline with built in shader editor for Rive, which can interleave 2D + 3D. Think WebGPU (minus compute, for now) that runs anywhere, not just the browser. You can implement anything at all. Cell shading. Background blurs. Deformation effects. And yes, even Rive vector components as textures. Shaders are precompiled and ship with your .riv. Minimal runtime size impact. Still WIP.

Guido Rosso

22,346 views • 7 months ago

The next version of three-gpu-pathtracer with WebGPU support is published! Drop path tracing into any project for product viz, architectural renders, or generative art. Check it out here & share what you're making ✨ #threejs #webgpu

The next version of three-gpu-pathtracer with WebGPU support is published! Drop path tracing into any project for product viz, architectural renders, or generative art. Check it out here & share what you're making ✨ #threejs #webgpu

Garrett Johnson

17,457 views • 27 days ago

Express yourself with a custom Revolut card. Design yours in-app and show unique flair with added icons and text. Try now ✨

Express yourself with a custom Revolut card. Design yours in-app and show unique flair with added icons and text. Try now ✨

Revolut

2,678,290 views • 5 months ago

honestly never thought about the fact my phone had a GPU until i made it solve the heat equation. video is what happens one thousandth over the stability threshold. implemented in rust wasm with webgpu. find my writeup/tutorial about what i did at

honestly never thought about the fact my phone had a GPU until i made it solve the heat equation. video is what happens one thousandth over the stability threshold. implemented in rust wasm with webgpu. find my writeup/tutorial about what i did at

clocksSugars

36,996 views • 9 months ago