TypeScript and WebAssembly

The npm package contains the WebAssembly engine, generated TypeScript statement client, and viewport element. Your page runs the engine locally.

Install the package from the FSL registry.

Start the engine

Import the package in your app’s entry module. Await initialization before calling statements.

import init, { statements } from "@fslabs/spatialengine";

await init();
const client = await statements();
console.log(await client.std.print({ message: "Connected to SpatialEngine" }));

Serve the WebAssembly asset with your application. Set module_or_path in init to supply its URL or bytes explicitly.

Add a viewport

Importing the package registers <spatialengine-viewport>. Initialize the engine before mounting the element.

<spatialengine-viewport label="main" aria-label="Scene viewport"></spatialengine-viewport>
<style>
  spatialengine-viewport {
    display: block;
    width: 100%;
    height: 480px;
  }
</style>

The element creates its canvas and attaches a viewport to the engine.

Call a statement

Methods and request fields use camelCase. Calls return typed values and reject on failure.

const cube = await client.std.scene.shape.spawnCube({
  translation: { x: 0, y: 0, z: 0 },
  rotation: { x: 0, y: 0, z: 0, w: 1 },
  halfExtents: 1,
});
console.log(cube);
await client.std.viewport.camera.zoomExtents({ viewport: "main" });

Call camera statements after the viewport has connected. Shape IDs are bigint. Preserve that type when passing IDs back to statements.

The package exports SDK types under types and error classes such as EngineError. Your editor shows method signatures and statement documentation.

Browser environment

Rendering requires a GPU backend. Serve your app over HTTPS in production or localhost during development. Browser filesystem and network permissions apply to data loading.

Viewports covers camera selection and rendering settings. Automation covers Node.js, web workers, and background updates.

Python SDK Viewports