alpcihan / wtrace

Realtime WebGPU path tracer (WIP)

WTrace

Realtime WebGPU path tracer (WIP)

Features

• GPU path-tracing with compute shaders
• Acceleration structures
• Instanced geometry
• BRDF importance sampling
• Texture maps
• Scene system
• Material system
• GLTF support
• OBJ support

More features and documentation are in progress.

How to use?

1. Use npm run build to build the project.
2. Add wtrace to the package.json of your project as a dependency and run npm install.

Example

Simple GLTF Sponza Scene

import * as wt from "wtrace";
import * as THREE from "three";

// camera controller
let cameraController: wt.CameraController;

async function init() {
    // get the target canvas
    const canvas: HTMLCanvasElement = document.getElementById("wt_canvas-webgpu") as HTMLCanvasElement;

    // init the wtrace application
    await wt.Application.init(canvas);

    // create a scene
    let scene: wt.Scene = new wt.Scene();

    // load models
    const meshModels: wt.MeshModel[] = await wt.WTGLTFLoader.load("sponza.glb");
    meshModels.forEach(meshModel => scene.add(meshModel));

    // create camera and camera controller
    scene.camera = new THREE.PerspectiveCamera(45, canvas.width / canvas.height, 0.01, 1000);
    cameraController = new wt.CameraController({ camera: scene.camera });

    // load the scene
    wt.SceneManager.loadScene(scene);

    // application loop
    animate();
} 

function animate() {
    // get the next frame
    requestAnimationFrame(animate);

    // call the camera controller's update function and set the refresh flag if a change occurs
    if (cameraController.update(wt.Application.deltaTime)) {
        wt.Application.refresh();
    }

    // render the scene
    wt.Application.onNextFrame();
}

init();