Vulfram Examples - Lights and Shadows

Transport

You are viewing: Browser (WASM) · Switch

Key steps

1. Create the camera with a 3/4 angle to see the shadow volume.

2. Add the light with castShadow: true.

3. Configure World3D.configure3DShadows and optional environment settings.

4. Mark the floor with receiveShadow: true.

Full example

Copy the full example below. In browser mode, use the vulfram-canvas canvas.

ts

import {
  initEngine,
  Mount,
  World3D,
  createWindow,
  tick,
} from '@vulfram/engine';
import { initWasmTransport, transportWasm } from '@vulfram/transport-browser';


async function boot() {
  await initWasmTransport();
  initEngine({ transport: transportWasm });
  const worldId = World3D.create3DWorld();
  const { windowId } = createWindow({
    title: 'Lights & Shadows',
    size: [1100, 700],
    position: [0, 0],
    canvasId: 'vulfram-canvas',
  });
Mount.mountWorldToWindow(worldId, windowId);

  const camera = World3D.create3DEntity(worldId);
  World3D.update3DTransform(worldId, camera, {
    position: [0, 3, 12],
    rotation: [0, 0, 0, 1],
    scale: [1, 1, 1],
  });
  World3D.create3DCamera(worldId, camera, { kind: 'perspective', near: 0.1, far: 100.0 });

  const light = World3D.create3DEntity(worldId);
  World3D.update3DTransform(worldId, light, {
    position: [4, 6, 6],
    rotation: [0, 0, 0, 1],
    scale: [1, 1, 1],
  });
  World3D.create3DLight(worldId, light, {
    kind: 'point',
    intensity: 18,
    range: 40,
    castShadow: true,
  });
  World3D.configure3DShadows(worldId, {
    tileResolution: 1024,
    atlasTilesW: 8,
    atlasTilesH: 8,
    atlasLayers: 2,
    virtualGridSize: 1,
    smoothing: 2,
    normalBias: 0.03,
  });

  const floorTex = World3D.create3DTexture(worldId, {
    source: { type: 'color', color: [0.2, 0.2, 0.2, 1] },
    srgb: true,
  });
  const floorMat = World3D.create3DMaterial(worldId, {
    kind: 'standard',
    options: {
      type: 'standard',
      content: {
        baseColor: [1, 1, 1, 1],
        surfaceType: 'opaque',
        baseTexId: floorTex,
        baseSampler: 'linear-repeat',
        flags: 0,
      },
    },
  });

  const cubeTex = World3D.create3DTexture(worldId, {
    source: { type: 'color', color: [0.8, 0.85, 0.9, 1] },
    srgb: true,
  });
  const cubeMat = World3D.create3DMaterial(worldId, {
    kind: 'standard',
    options: {
      type: 'standard',
      content: {
        baseColor: [1, 1, 1, 1],
        surfaceType: 'opaque',
        baseTexId: cubeTex,
        baseSampler: 'linear-clamp',
        flags: 0,
      },
    },
  });

  const floorGeom = World3D.create3DGeometry(worldId, {
    type: 'primitive',
    shape: 'plane',
    options: { size: [18, 18, 1], subdivisions: 1 },
  });
  const cubeGeom = World3D.create3DGeometry(worldId, { type: 'primitive', shape: 'cube' });

  const floor = World3D.create3DEntity(worldId);
  World3D.update3DTransform(worldId, floor, {
    position: [0, -2, 0],
    rotation: [0, 0, 0, 1],
    scale: [1, 1, 1],
  });
  World3D.create3DModel(worldId, floor, { geometryId: floorGeom, materialId: floorMat, receiveShadow: true });

  const cube = World3D.create3DEntity(worldId);
  World3D.update3DTransform(worldId, cube, {
    position: [0, 0, 0],
    rotation: [0, 0, 0, 1],
    scale: [1.2, 1.2, 1.2],
  });
  World3D.create3DModel(worldId, cube, { geometryId: cubeGeom, materialId: cubeMat, 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);