https://usegpu.live

 
Use.GPU
- 0.7.0
 
Docs Source
 
Git Repo
search
/
[                    ]
 
*
Intro
expand_more
Guides
 
*
Getting started
 
*
WebGPU Canvas
 
*
Drawing and animation
 
*
2D and 3D plot
 
*
Data-driven geometry
 
*
Live vs React
 
*
Memoization
 
*
WGSL Shaders
 
*
Background
 
*
Roadmap
 
*
Contributing
Reference
chevron_right
Components
chevron_right
Libraries
chevron_right
Live
chevron_right
Loaders
chevron_right
Development
infoThis documentation is a work-in-progress. Use.GPU is in alpha. 
warning_amberWebGPU is only available for developers, locked behind a
browser flag. A dev build of Chrome or Firefox is recommended..

Intro

Use.GPU is a set of declarative, reactive WebGPU legos. Compose live
graphs, layouts, meshes and shaders, on the fly.

It's a stand-alone Typescript+Rust/WASM library with its own
React-like run-time. If you're familiar with React, you will feel
right at home.

It has a built-in shader linker and binding generator, which means a
lot of the tedium of common GPU programming is eliminated, without
compromising on flexibility.

Questions? Join Use.GPU Discord

View Demos
Example - 3D Surface Plot
Example - GLTF Space Helmet
Example - Stereographic Plot
Example - 3D Line Grid
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>

            <Draw>
              <Pass>
              </Pass>
            </Draw>

          </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.

Guides (pending)

  * Getting started
  * WebGPU canvas
  * Drawing and animation
  * 2D and 3D plot
  * Data-driven geometry
  * Live vs React
  * Memoization
  * WGSL Shaders
  * Layout and UI

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 scene graph
  * @use-gpu/layout - HTML-like layout
  * @use-gpu/inspect - Live inspector
  * @use-gpu/map - Maps and projections
  * @use-gpu/plot - 2D/3D plotting (axes, grids, curves, labels,
    transforms, ...)
  * @use-gpu/react - Live -[?] React portals
  * @use-gpu/webgpu - WebGPU canvas
  * @use-gpu/workbench
      + /animate - Keyframe animation
      + /camera - Views and controls
      + /data - CPU - GPU data packing
      + /interact - GPU UI picking
      + /layers - Data-driven geometry
      + /light - Light and environment
      + /material - Physical materials
      + /primitives - Programmable geometry
      + /render - Passes, render targets, buffers, etc.
      + /router - URL -[?] Page routing
      + /shader - Custom WGSL injection

Libraries

  * @use-gpu/core - Pure WebGPU + data helpers
  * @use-gpu/shader - WGSL shader linker and tree shaker
  * @use-gpu/glyph - Rust/WASM ABGlyph wrapper
  * @use-gpu/wgsl - Standard .wgsl library

Live

  * @use-gpu/live - Effect run-time (React replacement)
  * @use-gpu/state - Minimal state management
  * @use-gpu/traits - Composable prop archetypes

Loaders

  * @use-gpu/glsl-loader - GLSL loader (webpack / node / rollup)
  * @use-gpu/wgsl-loader - WGSL loader (webpack / node / rollup)

Sections
Principle  
Guides (pending)  
Packages  
menu
format_list_numbered