Best of WebGPU — 2025

  1. 1
    Article
    Avatar of codropsCodrops·1y

    WebGPU Fluid Simulations: High Performance & Real-Time Rendering

    Matsuoka's WebGPU-powered fluid simulations have demonstrated outstanding performance and visual appeal, showcasing the capabilities of WebGPU. He has developed two simulations, WebGPU-Ocean and WaterBall, focusing on high performance and realistic visualization. He used the MLS-MPM (Moving Least Squares Material Point Method) for simulation and Screen-Space Fluid Rendering for visualization, achieving real-time performance even on integrated GPUs. These techniques promise significant improvements in browser-based physics simulations, potentially matching the quality of simulations done with advanced engines in the future.

  2. 2
    Article
    Avatar of 80lv80 LEVEL·22w

    Delicious Jelly Switch Made with TypeGPU

    Developers Iwo Plaza and Konrad Reczko created interactive jelly-like UI components (a switch and slider) using TypeGPU, a TypeScript library that wraps the WebGPU API. The components leverage signed distance fields (SDFs) to achieve dynamic, jiggly animations, demonstrating creative possibilities for GPU-accelerated web interfaces.

  3. 3
    Article
    Avatar of omgubomg! ubuntu!·39w

    Rio is a Fast, WebGPU-Powered Terminal for Ubuntu

    Rio is a cross-platform terminal emulator built in Rust that uses WebGPU for hardware acceleration, promising fast and efficient performance. It features font ligatures, terminal splits, theme support, and image protocol compatibility. The app relies heavily on keyboard shortcuts for navigation and requires manual configuration file editing. Rio reuses code from Alacritty and supports both Wayland and X11 on Linux, with installation available through Flathub or DEB packages.

  4. 4
    Article
    Avatar of codropsCodrops·1y

    WebGPU Scanning Effect with Depth Maps

    An exploration of a scanning effect using depth maps, custom shaders, and WebGPU rendering with Three.js and react-three-fiber. The demo showcases three variations of the effect by combining depth information with post-processing to create dynamic visual depth. Techniques include image distortion through UV coordinate displacement, procedural dot grid masking, and continuous scan animation using GSAP.

  5. 5
    Article
    Avatar of chromeChrome Developers·30w

    What's New in WebGPU (Chrome 140)

    Chrome 140 introduces several WebGPU improvements including adapter consumption after device requests, texture shorthand usage for better ergonomics, 1D texture sampling support in vertex shaders, deprecation of bgra8unorm read-only storage textures, removal of GPUAdapter isFallbackAdapter attribute, and various Dawn backend optimizations for better performance on mobile GPUs.

  6. 6
    Article
    Avatar of chromeChrome Developers·28w

    What's New in WebGPU (Chrome 141)

    Chrome 141 introduces major WebGPU improvements including completion of the Tint IR project that delivers up to 7x performance gains in shader compilation, integer range analysis for more efficient bounds checking, SPIR-V 1.4 support for Vulkan backend, and stabilization of the webgpu.h header with prebuilt Dawn binaries now available on GitHub Actions.

  7. 7
    Article
    Avatar of 80lv80 LEVEL·46w

    Hokusai's Great Wave Recreated As Real-Time Simulation

    Creative Developer Renaud Rohlinger demonstrated a real-time streaming application, blending digital art with technology by recreating 'The Great Wave off Kanagawa' using WebGPU and TouchDesigner, eliminating CPU usage for texture transfer. The project was showcased in a seamless process enabling visual content flow from web to desktop applications.

  8. 8
    Video
    Avatar of wawasenseiWawa Sensei·1y

    Easily add VFX to React Three Fiber - Mini Game Tutorial

    Learn how to build a mini axe throwing game using React Three Fiber, incorporating particles, trails, VFX, and physics with the React 3 Rapier library. The tutorial provides detailed steps to set up the game, including adding visual effects with the Wawa VFX npm package. Users can also explore interactive elements like targets, balloons, and scoring mechanisms.

  9. 9
    Article
    Avatar of chromeChrome Developers·1y

    What's New in WebGPU (Chrome 135)

    Chrome 135 introduces several updates for WebGPU, including allowing pipeline layout creation with null bind group layouts, supporting viewports that extend beyond the render target's boundaries, and easier access to experimental compatibility mode on Android. The maxInterStageShaderComponents limit is removed, and multiple updates to the Dawn library are made to simplify development.

  10. 10
    Article
    Avatar of codropsCodrops·38w

    Interactive Text Destruction with Three.js, WebGPU, and TSL

    A comprehensive tutorial demonstrating how to create an interactive 3D text destruction effect using Three.js with WebGPU renderer and Three Shader Language (TSL). The tutorial covers setting up TextGeometry, implementing GPU compute shaders for vertex deformation, adding spring physics for realistic animation, and enhancing the visual effect with noise, rotation, emissive colors, and post-processing effects including ambient occlusion, bloom, and fog.

  11. 11
    Article
    Avatar of chromeChrome Developers·46w

    What's New in WebGPU (Chrome 137)

    Chrome 137 introduces several updates and features to WebGPU, including the use of GPUTextureView for externalTexture binding, allowing buffer copies without offsets and sizes, and enhancements to WGSL workgroupUniformLoad. It also highlights changes in GPUAdapterInfo attributes and the removal of some experimental options. Dawn updates improve WebGPU development with new bindings and compatibility improvements.

  12. 12
    Article
    Avatar of communityCommunity Picks·52w

    Local LLMs, 0 cloud cost : is WebGPU key for next-gen browser AI app?

    WebGPU enables high-performance graphics and general-purpose compute workloads directly in web browsers. This reduces reliance on cloud computing, showcasing its potential with projects like QuackToSQL, which processes speech-to-text completely locally. The post explores WebGPU’s origins, its current capabilities, and its potential to revolutionize browser-based AI applications by leveraging local GPUs and libraries like transformers.js.

  13. 13
    Article
    Avatar of chromeChrome Developers·42w

    What's New in WebGPU (Chrome 138)

    Chrome 138 introduces several WebGPU improvements including simplified buffer binding syntax, stricter size validation for mapped buffers, updated GPU architecture reporting for Nvidia Blackwell and AMD RDNA4, deprecation of GPUAdapter's isFallbackAdapter attribute, and enhanced Dawn framework support with Emscripten integration for cross-platform development.

See all WebGPU archives