@ripl/3d

3D rendering for Ripl: a unified API for 2D graphics rendering in the browser.

Installation

npm install @ripl/3d

Overview

Extends Ripl's rendering pipeline with 3D capabilities. Projects 3D geometry onto Ripl's 2D canvas context using a virtual camera, depth sorting, and flat shading.

Features

• 3D math: Vectors, matrices, and transformations
• Camera: Configurable virtual camera with projection
• Shading: Flat shading with directional lighting
• Depth sorting: Automatic painter's algorithm for correct draw order
• 3D shapes: Built-in 3D shape primitives
• Interpolation: 3D-aware interpolators for smooth animation

Usage

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

const context = createContext('.mount-element');

const camera = createCamera(context, {
    position: [0, 2, 5],
    target: [0, 0, 0],
});

const cube = createCube({
    size: 1,
    fill: '#3a86ff',
});

cube.render(context);

Documentation

Full documentation is available at ripl.run.

License

MIT