Skip to main content

Getting started

Installation​

All our APIs are available on NPM and can be installed with your preferred JS package manager.
To get started with Novorender and load a demo scene you will only need our webgl-api package.

npm install @novorender/webgl-api@next @novorender/data-js-api @novorender/measure-api

Bundlers​

The webgl and measure APIs depend on workers which are not bundled and should be hosted as static files on your server.
The recommended approach is to copy them over to a static folder (often called public) after installation, which can be done with the dependencies or postinstall lifecycle scripts depending on your package manager.

scripts/copy-novorender-workers.js
const fs = require("fs");

const options = {
    force: true, // overwrite files
    recursive: true,
};

fs.cpSync("node_modules/@novorender/webgl-api", "public/novorender/webgl-api", options);
fs.cpSync("node_modules/@novorender/measure-api", "public/novorender/measure-api", options);
package.json
{
    // ...,
    "scripts": {
        //  ...,
        "dependencies": "node ./scripts/copy-novorender-workers.js"
    }
}
💡

Looking for more examples?

Check out these sample projects that utilise some of the common module bundlers.

Basic usage​

index.html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Novorender demo</title>
        <style>
            body {
                margin: 0;
                overflow: hidden;
            }

            canvas {
                outline: 0;
                touch-action: none;
                height: 100vh;
                width: 100vw;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script type="module" src="/main.js"></script>
    </body>
</html>
src/main.ts
import { API, createAPI, WellKnownSceneUrls } from "@novorender/webgl-api";

const api = createAPI({
    // Path to where the files previously copied from node_modules are hosted
    scriptBaseUrl: `${window.location.origin}/novorender/webgl-api/`,
});
const canvas = document.querySelector<HTMLCanvasElement>("#canvas")!;
main(api, canvas);

async function main(api: API, canvas: HTMLCanvasElement) {
    // create a view
    const view = await api.createView(
        { background: { color: [0, 0, 0, 0] } }, // transparent
        canvas,
    );

    // provide a camera controller
    view.camera.controller = api.createCameraController({ kind: "turntable" });

    // load the Condos demo scene
    view.scene = await api.loadScene(WellKnownSceneUrls.condos);

    // create a bitmap context to display render output
    const ctx = canvas.getContext("bitmaprenderer");

    // main render loop
    while (true) {
        // handle canvas resizes
        const { clientWidth, clientHeight } = canvas;
        view.applySettings({
            display: { width: clientWidth, height: clientHeight },
        });

        // render frame
        const output = await view.render();
        {
            // finalize output image
            const image = await output.getImage();
            if (image) {
                // display in canvas
                ctx?.transferFromImageBitmap(image);
                image.close();
            }
        }
    }
}

Demo​

Only the function main() is included in the live editors.
Try changing the background color on line 18 or the camera controller on line 23 in the example below.

Loading...
💡

Need more demonstrations?

The Playground page contains 20+ demos covering various aspects of different Novorender packages.

Go to Playground