https://github.com/omarshehata/webgpu-compute-rasterizer

A simple software rasterizer running on a WebGPU compute shader. Built for educational purposes.
https://github.com/omarshehata/webgpu-compute-rasterizer

javascript rasterizer shaders webgpu

Last synced: 12 months ago
JSON representation

A simple software rasterizer running on a WebGPU compute shader. Built for educational purposes.

• Host: GitHub
• URL: https://github.com/omarshehata/webgpu-compute-rasterizer
• Owner: OmarShehata
• License: mit
• Created: 2021-11-28T02:40:49.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-03-23T14:13:07.000Z (almost 3 years ago)
• Last Synced: 2025-03-24T08:43:22.313Z (12 months ago)
• Topics: javascript, rasterizer, shaders, webgpu
• Language: JavaScript
• Homepage:
• Size: 2.98 MB
• Stars: 252
• Watchers: 7
• Forks: 10
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# WebGPU Compute Rasterizer

![](media/rotating-model.gif)

This is a basic implementation of a rasterizer running on WebGPU compute shaders. It currently supports loading a list of triangles from a (very basic) glTF model and rendering it, with shading based on each triangle's distance to the camera.

I built this to create a simple template for exploring compute-based rendering techniques. Initially inspired by [Rendering Point Clouds with Compute Shaders and Vertex Order Optimization](https://github.com/m-schuetz/compute_rasterizer).

See:

* [How to Build a Compute Rasterizer with WebGPU](how-to-build-a-compute-rasterizer.md) for a step by step guide on building your own version of this. 

* Or [Code Overview](code-overview.md) for a brief walkthrough of the code & implementation. 

![](media/model-still.png)

## Building locally

Run `npm install` and `npm run dev`. Then open `localhost:3000`.

You must use a browser that supports WebGPU. See the [setup instructions in this article](https://alain.xyz/blog/raw-webgpu#setup).

## Rust port

There is a Rust port of this article here: https://github.com/pudnax/compaster. Created by [@pudnax](https://github.com/pudnax).