Canvas (Context3D)

Context3D extends CanvasContext with 3D projection capabilities. It manages view, projection, and combined view-projection matrices, and provides methods to project 3D world-space points onto 2D canvas coordinates. It also exposes a lightDirection vector used by the flat-shading system. Because it inherits from the canvas context, all core drawing state, events, and gradient support are available.

NOTE

For the full API, see the 3D API Reference.

Demo

Creation

import {
    createContext,
} from '@ripl/3d';

const context = createContext('#app');

Or with options:

const context = createContext('#app', {
    fov: 60,
    near: 0.1,
    far: 1000,
});

Properties

• viewMatrix — Matrix4 — The current view (camera) matrix
• projectionMatrix — Matrix4 — The current projection matrix
• viewProjectionMatrix — Matrix4 — Combined view × projection matrix
• lightDirection — Vector3 — Direction of the light source for shading

Methods

setCamera

Sets the view matrix from eye position, target, and up vector.

context.setCamera([0, 0, 5], [0, 0, 0], [0, 1, 0]);

setPerspective

Updates the perspective projection.

context.setPerspective(fov, near, far);

setOrthographic

Switches to orthographic projection.

context.setOrthographic(left, right, bottom, top, near, far);

project

Projects a 3D point to 2D canvas coordinates.

const [x, y] = context.project([1, 2, 3]);

projectDepth

Returns the projected depth of a 3D point (used for sorting).

const depth = context.projectDepth([1, 2, 3]);

When to Use Canvas

Canvas is the best choice when:

• Broad browser support — Works in all modern browsers without feature detection
• Simple scenes — Sufficient for scenes that don't require hardware depth testing
• Fallback — Use as a fallback for browsers without WebGPU support