Wgpu on TutorialEdge.net

Part 1 - Project Setup and Your First Window

Fri, 29 May 2026 10:01:00 +0000

Welcome to the first part of this series on graphics programming with wgpu in Rust! By the end of this article, you’ll have a Rust program that opens a window and responds to input events. It doesn’t draw anything yet, but it’s the skeleton that everything else will hang from.

What is wgpu?

wgpu is a Rust graphics library that talks to your GPU using whichever native API your platform provides — Vulkan on Linux, Metal on macOS, DirectX 12 on Windows, and WebGPU in the browser. You write one codebase and it runs everywhere.

Part 2 - The Render Pipeline

Fri, 29 May 2026 10:02:00 +0000

In Part 1 we opened a window. In this part, we connect that window to the GPU and draw our first frame — a solid colour fill. It’s a modest result, but it means the full rendering pipeline is working end-to-end.

How the GPU Pipeline Works

Before writing code, here’s the mental model you need.

CPU side: recording commands

The CPU never tells the GPU to draw a single pixel directly. Instead it records a list of operations into a command encoder — think of it as building a script to hand off. That script captures one or more render passes, each of which describes what to draw and where to write the results.

Part 3 - Drawing Your First Triangle

Fri, 29 May 2026 10:03:00 +0000

The triangle is the “hello world” of graphics programming. In this part we define vertex data, upload it to the GPU, write our first shaders in WGSL, and draw a colourful triangle to the screen.

Add bytemuck to Cargo.toml before you start:

Cargo.toml

[dependencies]
wgpu = "0.20"
winit = "0.29"
pollster = "0.3"
env_logger = "0.11"
log = "0.4"
bytemuck = { version = "1.14", features = ["derive"] }

What is a Vertex Buffer?

The GPU doesn’t know about Rust structs. To draw geometry, you copy raw bytes into a vertex buffer — a block of GPU memory that the vertex shader reads one vertex at a time. We define a Vertex struct, fill a slice of them, and upload it.

Part 4 - Colors and Uniforms

Fri, 29 May 2026 10:04:00 +0000

So far our triangle is static. In this part we add a CPU-to-GPU data channel called a uniform buffer, and use it to animate the triangle’s colour tint every frame.

What is a Uniform Buffer?

A uniform is a value that stays constant across all vertices and fragments in a single draw call, but can be updated between frames. It’s how you pass per-frame data — time, camera position, colour — from your Rust code into the shader.

Part 5 - Textures and Image Loading

Fri, 29 May 2026 10:05:00 +0000

A triangle is a great proof-of-concept, but most real graphics involve images. In this part we load a PNG, upload it to the GPU as a texture, and sample it onto a textured quad.

Add the image crate to Cargo.toml:

Cargo.toml

[dependencies]
wgpu = "0.20"
winit = "0.29"
pollster = "0.3"
env_logger = "0.11"
log = "0.4"
bytemuck = { version = "1.14", features = ["derive"] }
image = "0.25"

Place any PNG image at assets/happy-tree.png in your project root. Any image will work — we’ll use it as the texture.

Part 6 - 2D Transformations

Fri, 29 May 2026 10:06:00 +0000

Static images are a start, but real graphics need to move. In this part we apply a transformation matrix to the vertex shader so we can rotate and scale the textured quad every frame.

Add glam to Cargo.toml:

Cargo.toml

[dependencies]
wgpu = "0.20"
winit = "0.29"
pollster = "0.3"
env_logger = "0.11"
log = "0.4"
bytemuck = { version = "1.14", features = ["derive"] }
image = "0.25"
glam = { version = "0.27", features = ["bytemuck"] }

What is a Transformation Matrix?

A 4×4 transformation matrix encodes translation (position), rotation, and scale in a single structure. Multiplying a vertex position by the matrix produces the transformed position — all three operations in one GPU instruction.

Building Graphics with wgpu in Rust

Fri, 29 May 2026 10:00:00 +0000

Learning graphics programming feels intimidating at first. Shaders, pipelines, buffers, bind groups — it’s a lot of new vocabulary before you see anything on screen. This series cuts through that by building things you can actually run and see, one concept at a time.

We’re using wgpu — Rust’s modern GPU API that compiles to Vulkan, Metal, DirectX 12, and WebGPU. The concepts you learn here transfer directly to other graphics APIs and even to browser-based WebGPU.

Wgpu on TutorialEdge.net

Part 1 - Project Setup and Your First Window

##What is wgpu?

Part 2 - The Render Pipeline

##How the GPU Pipeline Works

###CPU side: recording commands

Part 3 - Drawing Your First Triangle

##What is a Vertex Buffer?

Part 4 - Colors and Uniforms

##What is a Uniform Buffer?

Part 5 - Textures and Image Loading

Part 6 - 2D Transformations

##What is a Transformation Matrix?

Building Graphics with wgpu in Rust

What is wgpu?

How the GPU Pipeline Works

CPU side: recording commands

What is a Vertex Buffer?

What is a Uniform Buffer?

What is a Transformation Matrix?