WebGPU

About Page

I decided that I wanted to know more about WebGPU, so I am creating this page to house some WebGPU projects as I go through a WebGPU tutorial. The tutorial that I am going through can be seen here.

Notes on WebGPU

WebGPU Notes (Detailed)

  • WebGPU Fundamentals

    • WebGPU uses JavaScript to control the GPU for calculations and drawing on the web.
    • It's a new API standard defined by the W3C organization.
    • The standard aims for support across all major browsers and device manufacturers.
    • WebGPU is considered a new generation of graphics API.
    • It applies modern graphics APIs (like 3D, Direct3D, Vulkan, and Metal).
    • Key benefits compared to WebGL:
      • Faster
      • More powerful
      • More flexible
      • More aligned with modern web development standards

  • Render Pipeline and Data Handling

    • In the example provided, the render pipeline accesses data directly from the MVP (Model-View-Projection) buffer.
    • This approach focuses on efficient data sharing within the GPU.
    • JavaScript's role is primarily code flow control.
    • Data transfers between CPU and GPU are minimized (e.g., camera position changes are possible, but particle motion logic stays on the GPU).
    • Particle motion logic is written in the shader.
    • For example, particle positions are updated within the shader based on initial velocity and rebound logic.
    • Instead of passing updated positions back to JavaScript, the MVP matrix is modified directly, as it's bound to the render pipeline.
    • The vertex shader calculates vertex coordinates using this updated MVP buffer.

  • Compute Pipeline

    • Real-world WebGPU projects often involve multiple compute pipelines.
    • Complex physical simulations may require dozens or even hundreds of compute pipelines in series.
    • Storage buffers are essential for sharing data between these different pipelines.
    • The CPU's role is primarily control:
      • Overall process management
      • Handling user input (mouse, keyboard)

  • General Notes

    • The provided code examples are available on a GitHub repository.
    • The transcript mentions an "Evolution Web GPU Engine" that is going to be published.

Tutorial 1