Shapes

Every shape is a signed distance function evaluated per pixel in the fragment shader — not geometry. A shape component registers a record; the engine writes every record into one buffer and raymarches them in a handful of draws.

import { Box, Sphere, Torus } from '../lib/fabric/shapes'

<Box position={[0, 0, 0]} size={1} roundness={0.05} />
<Sphere position={[2, 0, 0]} radius={0.5} />
<Torus position={[-2, 0, 0]} radius={0.8} thickness={0.2} />

Each shape takes its own size props — a sphere has a radius, a cylinder a radius and height, a box a size — plus the props every shape shares: position, rotation, color, opacity, material, and the three pointer handlers. Every numeric prop accepts a plain number or an animated value. The full table is in the Shape reference.

Shapes live on direct import paths, not the main entry, so an unused shape never reaches the bundle.

The 22 solids

Boxes and spheres

• <Box size roundness> — size is half-extents per axis; roundness rounds the edges.
• <BoxFrame size edge> — the wireframe of a box, edges of thickness edge.
• <Sphere radius>
• <Ellipsoid size> — three independent radii.
• <Octahedron size> — vertices at ±size on each axis.

Prisms

• <Cylinder radius height>
• <RoundedCylinder radius height roundness>
• <HexPrism radius height>
• <TriPrism radius height>
• <Plane size roundness> — a thin rounded rectangle; the flat surface.
• <Rhombus lengthA lengthB height roundness> — a diamond prism.
• <Pyramid base height> — square base.

Cones

• <Cone radius height>
• <CappedCone radiusBottom radiusTop height> — a cone with both ends cut flat, different radii at each.
• <RoundCone radiusBottom radiusTop height> — a tapered capsule; the ends are spheres, not caps.

Capsules and rings

• <Capsule radius height> — height is the distance between the two sphere centres, not the overall length.
• <Torus radius thickness> — radius is the ring, thickness the tube. open with capAngle (degrees) draws a partial ring.
• <Link radius thickness length> — a chain link: a torus stretched by length.

Cut spheres

• <CutSphere radius cutHeight> — a sphere with a flat cut at cutHeight.
• <CutHollowSphere radius cutHeight thickness> — the same, as a shell.
• <DeathStar radius biteRadius biteOffset> — a sphere with a spherical bite taken out.
• <SolidAngle angle radius> — a cone-shaped slice of a sphere.

The 3 flat shapes

<Circle2D radius>, <Rect2D size> and <RoundedRect2D size roundness> have no depth of their own. Wrap them in <Extrude> for thickness or <Revolve> to sweep them around an axis — a revolved circle is a torus, an extruded circle a cylinder. Unwrapped, they render as a thin wafer.

Type IDs

Each component carries a numeric type that selects its distance function in the shader. 3D shapes are 0–21, contiguous; the flat shapes are 30–32, a deliberately separate range. The gap is intentional.

The build scans surviving shape components for their literal type: N to decide which distance functions to keep, which is why the field must appear as a literal and why components that are not shapes must never carry one.

The distance functions

Fabric’s primitives come from Inigo Quilez’s distance-function library. Most are exact. Ellipsoid and triangular prism are bounds rather than true distances, so they need more raymarch steps near grazing angles.

Non-metric modifiers — twist, bend, displace — break the distance guarantee for any shape. See Modifiers.

To add a primitive, see Adding a shape.