wgpu3d

Version 0.1.0GPL-2.0-or-laterOne file, about 49 KB (17 KB gzipped)WebGPU

wgpu3d is a small WebGPU library for 3D scenes you can play in: drive a car down a street, walk a character over crates, or build a village out of boxes and triangles. It is the rendering and driving code from City Drive, pulled out of the game and given a simple API.

Download wgpu3d 0.1.0 or import it straight from https://gpuengine.github.io/wgpu3d-0.1.0.min.js

The version is in the file name and in the header comment of the file, and VERSION is exported. Every release gets its own file name, so a page that links to it only changes when you change the link. wgpu3d is free software under the GNU General Public License, version 2 or later (SPDX-License-Identifier: GPL-2.0-or-later): you can use, change and share it, including commercially, as long as projects that ship it are shared under compatible terms and keep the header comment in the file. The source is on GitHub.

Quick start

wgpu3d is a single ES module with no dependencies. Add a canvas, map the name wgpu3d to the file, and write a module script:

<canvas id="scene" style="width: 100%; height: 480px"></canvas>
<script type="importmap">
  { "imports": { "wgpu3d": "/wgpu3d-0.1.0.min.js" } }
</script>
<script type="module" src="game.js"></script>
import { createApp, createCar, createGround, VehicleController } from "wgpu3d";

const app = await createApp({ canvas: document.querySelector("#scene"), environment: "sunset" });
app.add(createGround());

const car = createCar({ paint: "#1d6fd8" });
car.addBehavior(new VehicleController());
app.add(car);

app.follow(car);
app.start();

That is a complete program: a car on a field with sun shadows, a sky and a chase camera. Click the canvas and drive with WASD or the arrow keys, or drag on a phone.

Tutorials

Each tutorial has a live demo running the code shown on the page.

Every function and option is listed in the API reference.

What is in the box

How it relates to City Drive

City Drive is a big, specialised program: an endless procedural city streamed by Web Workers, with traffic, weather and dozens of building generators. wgpu3d keeps the parts any small 3D game needs and drops the rest. The vertex format (position, normal, colour and a surface value per vertex), the yaw, pitch and roll convention, the box occlusion trick, the texel-snapped sun shadow camera and its 2×2 filtered lookup, the sky and ambient light, the car body and the driving model all come from the game. Everything is rewritten around a scene of objects instead of one large streamed vertex buffer.

What it does not do

Official documentation

Go deeper with the specifications and reference documentation: