You are viewing an old version of Mach (v0.2) see the latest version here.

Mach core examples

All examples require this Zig nightly version | known issues

deferred-rendering

Dynamic lighting using deferred rendering techniques.

git clone https://github.com/hexops/mach-core
cd mach-core/
zig build run-deferred-rendering
~1300 lines of code

pbr-basic

Physically based rendering (PBR) materials

git clone https://github.com/hexops/mach-core
cd mach-core/
zig build run-pbr-basic
~1000 lines of code

gen-texture-light

Generates a brick texture at comptime, uses Blinn-Phong lighting, and several pipelines. Move camera with arrow keys / WASD.

git clone https://github.com/hexops/mach-core
cd mach-core/
zig build run-gen-texture-light
~800 lines of code

procedural-primitives

Procedurally generated geometry, implements a few different shapes (use arrow keys to switch between them.)

git clone https://github.com/hexops/mach-core
cd mach-core/
zig build run-procedural-primitives
~600 lines of code

pixel-post-process

A post-processing effect which pixelates the entire screen.

git clone https://github.com/hexops/mach-core
cd mach-core/
zig build run-pixel-post-process
~500 lines of code

sprite2d

Loads a JSON file which describes a spritesheet, and renders sprites to the screen.

git clone https://github.com/hexops/mach-core
cd mach-core/
zig build run-sprite2d
~400 lines of code

fractal-cube

Cube-inception! Renders the scene to a texture, which is then rendered on the rotating cube itself as a texture!

git clone https://github.com/hexops/mach-core
cd mach-core/
zig build run-fractal-cube
~400 lines of code

cubemap

Renders a cubemap / skybox. Nothing fancy, but these are instrumental as backgrounds in games.

git clone https://github.com/hexops/mach-core
cd mach-core/
zig build run-cubemap
~400 lines of code

textured-cube

Loads a PNG image and uploads the texture to the GPU. Renders it on a 3D cube.

git clone https://github.com/hexops/mach-core
cd mach-core/
zig build run-textured-cube
~300 lines of code

image-blur

Leverages a compute shader to blur an image, then renders it. Don't worry if the details are a bit fuzzy!

git clone https://github.com/hexops/mach-core
cd mach-core/
zig build run-image-blur
~300 lines of code

boids

Uses a GPU compute shader to run calculations / simulate flocking behaviour of birds.

git clone https://github.com/hexops/mach-core
cd mach-core/
zig build run-boids
~300 lines of code

two-cubes

Once you've learned how to render one cube, two is just 30 lines of code more!

git clone https://github.com/hexops/mach-core
cd mach-core/
zig build run-two-cubes
~200 lines of code

instanced-cube

EVEN MORE CUBES! Instancing lets you duplicate an object & render it in multiple places with different parameters.

git clone https://github.com/hexops/mach-core
cd mach-core/
zig build run-instanced-cube
~200 lines of code

rotating-cube

Uploads a basic 3D cube to the GPU and renders it. Demonstrates how to use vertex buffers to transfer a model from the CPU to GPU, how to use vertex attributes & more.

git clone https://github.com/hexops/mach-core
cd mach-core/
zig build run-rotating-cube
~200 lines of code

triangle-msaa

Remember that triangle from before? If we turn on MSAA (Multi-Sample Anti Aliasing) the edges will become smooooth.

git clone https://github.com/hexops/mach-core
cd mach-core/
zig build run-triangle-msaa
~100 lines of code

triangle

This is where you should start learning. It tells the GPU to render 3 vertices (but doesn't transfer them using a vertex buffer or anything! The vertex positions are hard-coded in the shader.)

git clone https://github.com/hexops/mach-core
cd mach-core/
zig build run-triangle
~100 lines of code

map-async

Some of the best examples have no graphics. This one shows how to transfer data to the GPU, perform computations on that data using the GPU's parallel processing capbilities, and get results back on the CPU. If you're interested in GPU compute, this is the place to start!

git clone https://github.com/hexops/mach-core
cd mach-core/
zig build run-map-async
~100 lines of code

clear-color

As simple as it gets: a blue screen of doom

git clone https://github.com/hexops/mach-core
cd mach-core/
zig build run-clear-color
~100 lines of code

Learning

You can start with the simplest examples first. There’s also plenty of great learning material online for WebGPU (including video tutorials.)

Lines of codeExample
79clear-color
80triangle
86map-async
123triangle-msaa
221rotating-cube
230instanced-cube
243two-cubes
294boids
322image-blur
337textured-cube
378cubemap
381fractal-cube
421sprite2d
547pixel-post-process
588procedural-primitives
780gen-texture-light
1040pbr-basic
1342deferred-rendering

Contribute

We're looking for more contributors to help us build and port a few more WebGPU examples to Zig. There's plenty of great learning material online for both rendering and compute.

Join our Discord server - we'd love to have you there and are happy to help!

Special thanks to these people who've contributed to these examples: