WebGPU Based glTF 2.0 Viewer

University of Pennsylvania, CIS 565: GPU Programming and Architecture, Final Project

by Jiyu Huang

This is a physically-based rendering engine for loading and displaying glTF 2.0 files, using the emerging WebGPU API.

Live Demo

Live Demo Link. Requires browsers with WebGPU support (for example, Google Chrome Canary or Chrome Dev with enable-unsafe-webgpu flag on).

Screenshots

Features

Formats

• glTF
• glTF-Embedded
• glTF-Binary

glTF 2.0 Core Features

• Accessors
  • Sparse Accessors
• Buffers and Buffer Views
• Cameras
  • Perspective
  • Orthographic
• Images
• Materials
  • Metallic-Roughness Material
  • Additional Textures
  • Alpha Coverage
• Meshes (topology type: triangles only)
• Nodes
• Samplers
• Scenes
• Textures
• Animations
  • Weights
• Skins

Extensions

• EXT_mesh_gpu_instancing

Usage

Controls

• camera rotation: drag and move
• zoom in/out: scroll in/out

Local Installation

For local usage, follow these instructions:

1. Download the repository and make sure npm package manager is installed
2. Run npm install
3. Run npm start
4. Go to http://localhost:8080/ using a browser that has WebGPU enabled

Next Steps

1. Skinning and morph target animation
2. Complete core glTF 2.0
3. Image-based lighting
4. Material extensions

References

• WebGPU Samples
• Alain's Raw WebGPU tutorial
• Khronos glTF 2.0 Sample Viewer and minimal-gltf-loader for metallic-roughness shading implementation details