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.. 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 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 : 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) » Read More
Like to keep reading?
This article first appeared on usegpu.live. If you'd like to continue this story, follow the white rabbit.