xeokit WebGPU Renderer

Experimental WebGPU renderer backend for xeokit Viewers.

WebGPURenderer is the WebGPU rendering backend for Viewer. It owns WebGPU device acquisition, viewer attachment, render lifecycle events, picking, snapping, memory diagnostics, and render diagnostics. Per-view canvas state and GPU resources are managed internally.

The renderer uses browser WebGPU APIs. Use WebGPURenderer.isSupported before offering WebGPU as a required backend, and prefer WebGPURenderer.create when the renderer should request its own adapter and device.

Basic Usage

import {Scene} from "@xeokit/sdk/model/scene";
import {Viewer} from "@xeokit/sdk/viewing/viewer";
import {WebGPURenderer} from "@xeokit/sdk/viewing/webGPURenderer";

const scene = new Scene();
const viewer = new Viewer({scene});

const result = await WebGPURenderer.create({viewer});

if (result.ok) {
  const renderer = result.value;

  renderer.events.onError.subscribe((_renderer, error) => {
    console.error(error.error);
  });
} else {
  console.error(result.error);
}
Copy

Injecting A Device

Pass a pre-created device when another part of the application owns WebGPU device creation.

import {WebGPURenderer} from "@xeokit/sdk/viewing/webGPURenderer";

const adapter = await navigator.gpu?.requestAdapter();
const device = await adapter?.requestDevice();

if (device) {
  const renderer = new WebGPURenderer({
    device,
    destroyDeviceOnDestroy: false
  });

  renderer.attachViewer(viewer);
}
Copy

Render And Memory Configuration

import {WebGPURenderer} from "@xeokit/sdk/viewing/webGPURenderer";

const result = await WebGPURenderer.create({
  viewer,
  memoryConfigs: {
    maxBatchVertices: 200000,
    maxBatchIndices: 600000,
    compactSealedStreamPages: true
  },
  renderConfigs: {
    depthPrepass: true,
    edges: true,
    triangleColorMode: "pbr",
    transparentSortStrategy: "segment"
  }
});
Copy

Diagnostics

const memory = renderer.getMemoryStats();

if (memory) {
  console.log(memory.totalBytes);
  console.log(memory.packedTrianglePages);
}

const viewStats = renderer.getViewRenderStats(0);

if (viewStats) {
  console.log(viewStats.numDrawCalls);
  console.log(viewStats.cpuTime.commandEncodingMs);
}
Copy