infoThis documentation is a work-in-progress. Use.GPU is in alpha. warning_amberWebGPU is only available in certain browsers.

Intro

Use.GPU makes WebGPU composable like lego. Build live graphs, shaders and visualizations like any other web app.

If you're familiar with React, you'll feel right at home. It has its own React-like run-time, called Live, and leverages Rust/WASM for specific optimizations.

With its built-in shader linker and binding generator, a lot of the tedium of GPU programming is eliminated, without compromising on flexibility.

Check out the demos below!

Questions? Join Use.GPU Discord

Example - Shaded Lines
Example - Render To Texture + Cube Target
Example - Point Cloud
Example - Black Hole Visualization
Example - Environment Map + PBR
Example - 3D Implicit Surface
Example - GLTF Space Helmet
Example - 3D Line Grid
Example - Scene with Shadows
Example - Voxel Raytrace
Example - Fluid Dynamics Simulation
Example - WebMercator Globe

Principle

Use.GPU lets you build incremental apps, which respond to arbitrary changes with minimal recomputation.

Similar to React, you use it by composing a tree of components, starting with an <App>:

<App>
  <Router>
    <Routes>
      <MyPage>
        
        <WebGPU>
          <AutoCanvas>

            <Pass>
            </Pass>

          </AutoCanvas>
        </WebGPU>
        
      </MyPage>
    </Routes>
  </Router>
</App>

You can nest the Use.GPU components to create complex GPU graphics, with bespoke rendering pipelines. No heavy lifting required.

Shader Composition in Use.GPU

Guides

Packages

Use.GPU is divided into packages, at different levels of abstraction. This enables free-form tinkering for any graphics skill level.

Components

  • @use-gpu/gltf - GLTF loader and bindings
  • @use-gpu/inspect - Live inspector
  • @use-gpu/layout - HTML-like layout
  • @use-gpu/map - Maps and projections
  • @use-gpu/plot - 2D/3D plotting (axes, grids, curves, labels, transforms, …)
  • @use-gpu/present - Presentation slides and effects
  • @use-gpu/react - Live ↔︎ React portals
  • @use-gpu/scene - Classic scene tree with instancing
  • @use-gpu/voxel - Voxel loader and raytracer
  • @use-gpu/webgpu - WebGPU canvas
  • @use-gpu/workbench
    • /animate - Keyframe animation
    • /camera - Views and controls
    • /compute - Compute kernels and staging
    • /data - CPU → GPU data packing
    • /interact - GPU UI picking
    • /layers - Data-driven geometry
    • /light - Light and environment
    • /material - Physical materials
    • /pass - Composable render passes
    • /primitives - Programmable geometry
    • /queue - WebGPU sequencing
    • /render - Forward + Deferred renderer and RTT
    • /router - URL ↔︎ Page routing
    • /shader - Custom WGSL injection
    • /text - SDF text rendering

Libraries

Live

Loaders

menu
format_list_numbered