OBYOM

Documentation

Get OBYOM running in your project.

Install the package, mount a canvas, and load your first 3D model with a small async setup.

Requirements

Start with a WebGPU-ready browser.

OBYOM runs in the browser and needs WebGPU access. Use a current Chrome, Edge, Safari, or Firefox release with WebGPU enabled and a supported GPU driver.

  • Node.js 20.9+ and npm 10+ for the project setup
  • A browser with WebGPU support
  • An HTTP(S) origin — do not open the page directly as file://

Install

Add the package to your application.

From your project directory, install the public npm package:

npm install obyom-3d

OBYOM ships as an ESM package with generated TypeScript declarations and its shader code embedded in the production bundle.

Initialize

Mount a viewer on a canvas.

Add a canvas to your page. Give it dimensions through CSS or its HTML attributes:

<canvas id="viewer" width="700" height="700"></canvas>

Then create the viewer, start WebGPU, and load an STL asset:

import { OBYOM } from 'obyom-3d';

const obyom = new OBYOM({
  canvas: '#viewer',
  params: {},
});

await obyom.start();
await obyom.load('/assets/model.stl');
Keep the order. Call start() before load(). The model path is resolved by your application, so serve the asset from the same site or a permitted URL.

Deploy

Serve the built application over HTTP(S).

Build your application with your usual bundler, then deploy the generated assets to your hosting provider. For a local smoke test, run a static server from the project root:

npm run build
python3 -m http.server 8080

Open http://localhost:8080 in a WebGPU-capable browser. In production, use HTTPS and make sure the bundled JavaScript, model files, and any static assets are available at their referenced paths.

Try the viewer