Fabric

Fabric is a WebGPU scene library: raymarched SDF shapes, glTF meshes, GPU particles and SDF text, sharing one frame and one depth buffer.

It is built around a hard bundle ceiling, so every feature states what it costs and what removes it.

import { useGraviton } from '@/lib/fabric/hooks/useGraviton'
import { Camera, Scene, View } from '@/lib/fabric'
import { Sphere } from '@/lib/fabric/shapes'

const fabric = useGraviton(DEFAULT_CAMERA, DEFAULT_SCENE)

<Camera {...DEFAULT_CAMERA} />
<Scene {...DEFAULT_SCENE} />
<Sphere position={[0, 0, 0]} radius={1} material={{ shader: 'phong', ambient: 0.2 }} />
<View track={fabric} />
<canvas ref={fabric.canvas} style={{ position: 'absolute', width: '100%', height: '100%' }} />

Start here

• What is Fabric — what it does, and what it deliberately does not.

The rest

• Guide — shapes, modifiers, materials, glass, mesh, particles, text, composers, rig.
• Engine — two engines, the frame they share, and the seams between them.
• Extending — adding a shape, a modifier, or a particle layer.