Vulfram Examples - Getting Started

Transport

You are viewing: Browser (WASM) · Switch

1. Install packages

bash

npm i @vulfram/engine @vulfram/transport-wasm

2. Prepare the canvas

In the browser, Vulfram needs a canvas. Use the id vulfram-canvas.

html

<canvas id="vulfram-canvas" class="w-full h-full"></canvas>

3. Boot and first frame

The snippet below creates the world, window, camera, light, and a cube. Then it starts the main loop.

ts

import {
  initEngine,
  createWorld,
  createWindow,
  createEntity,
  createCamera,
  createLight,
  createGeometry,
  createMaterial,
  createModel,
  updateTransform,
  tick,
} from '@vulfram/engine';
import { initWasmTransport, transportWasm } from '@vulfram/transport-wasm';

const WINDOW_ID = 1;

async function boot() {
  await initWasmTransport();
  initEngine({ transport: transportWasm });

  createWorld(WINDOW_ID);
  createWindow(WINDOW_ID, {
    title: 'Hello Vulfram',
    size: [1024, 640],
    position: [0, 0],
    canvasId: 'vulfram-canvas',
  });

  const camera = createEntity(WINDOW_ID);
  updateTransform(WINDOW_ID, camera, {
    position: [0, 0, 10],
    rotation: [0, 0, 0, 1],
    scale: [1, 1, 1],
  });
  createCamera(WINDOW_ID, camera, { kind: 'perspective', near: 0.1, far: 100.0 });

  const light = createEntity(WINDOW_ID);
  updateTransform(WINDOW_ID, light, {
    position: [2, 4, 6],
    rotation: [0, 0, 0, 1],
    scale: [1, 1, 1],
  });
  createLight(WINDOW_ID, light, { kind: 'point', intensity: 14, range: 25 });

  const geometryId = createGeometry(WINDOW_ID, { type: 'primitive', shape: 'cube' });
  const materialId = createMaterial(WINDOW_ID, {
    kind: 'standard',
    options: {
      type: 'standard',
      content: {
        baseColor: [1, 1, 1, 1],
        surfaceType: 'opaque',
        flags: 0,
      },
    },
  });

  const cube = createEntity(WINDOW_ID);
  createModel(WINDOW_ID, cube, { geometryId, materialId, castShadow: true, receiveShadow: true });

  let last = performance.now();
  function frame(now: number) {
    const delta = now - last;
    last = now;
    tick(now, delta);
    requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}

boot().catch(console.error);