WGPU Examples

https://github.com/workkkfor2012/wgpu_examples
Admin
A collection of standalone and framework-based examples demonstrating various graphics programming...
Tokens:8,007
Snippets:38
Trust Score:6.4
Update:1 year ago
Show doc for...
Tokens:
Raw
### Load Example by Backend (JavaScript)

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/features/web-static/index.html

This snippet dynamically imports and executes JavaScript code based on 'backend' and 'example' URL parameters. If parameters are missing, it redirects to a default example.

```JavaScript
const params = new URLSearchParams(window.location.search);
const backend = params.get("backend");
const example = params.get("example");

if (backend !== null && example !== null) {
  import(`./${backend}.js`).then((module) => module.default());
} else {
  window.location.assign(
    `${window.location.href}?backend=webgl2&example=hello_triangle`
  );
}
```

--------------------------------

### Run WGPU Water Example

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/features/src/water/README.md

Command to compile and run the WGPU water example using Cargo.

```bash
cargo run --bin wgpu-examples water
```

--------------------------------

### Run Multiple Render Targets Example

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/features/src/multiple_render_targets/README.md

Command to compile and run the multiple_render_targets example using Cargo. This command executes the specified binary with the given example name.

```bash
cargo run --bin wgpu-examples multiple_render_targets
```

--------------------------------

### Run hello_synchronization Example

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/features/src/hello_synchronization/README.md

Command to execute the 'hello_synchronization' example using Cargo. This command compiles and runs the specified binary within the wgpu_examples project.

```bash
cargo run --bin wgpu-examples hello_synchronization
```

--------------------------------

### Run hello_workgroups Example

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/features/src/hello_workgroups/README.md

Command to compile and run the hello_workgroups example using cargo.

```rust
cargo run --bin wgpu-examples hello_workgroups
```

--------------------------------

### Run Conservative Rasterization Example

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/features/src/conservative_raster/README.md

Command to compile and run the conservative rasterization example using Cargo.

```bash
cargo run --bin wgpu-examples conservative_raster
```

--------------------------------

### Run wgpu big-compute-buffers Example (Windows)

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/features/src/big_compute_buffers/README.md

Command to run the big-compute-buffers example on Windows using PowerShell. It configures the WGPU_BACKEND to Vulkan and sets the RUST_LOG environment variable for logging.

```powershell
# windows (Powershell)
$env:WGPU_BACKEND="Vulkan"; $env:RUST_LOG="wgpu_examples::big_compute_buffers=info"; cargo run -r --bin wgpu-examples -- big_compute_buffers
```

--------------------------------

### Render Triangle with WGPU and Winit

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Demonstrates a basic WGPU workflow using the Winit crate to render a red triangle on a green background. This serves as a foundational example for WGPU applications.

```rust
// hello_triangle - Provides an example of a bare-bones WGPU workflow using the Winit crate that simply renders a red triangle on a green background.
```

--------------------------------

### Run wgpu big-compute-buffers Example (Linux/Mac)

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/features/src/big_compute_buffers/README.md

Command to run the big-compute-buffers example on Linux or macOS. It sets the RUST_LOG environment variable for detailed logging and uses cargo to execute the specified binary.

```sh
# linux/mac
RUST_LOG=wgpu_examples::big_compute_buffers=info cargo run -r --bin wgpu-examples -- big_compute_buffers
```

--------------------------------

### WGPU Shadow Rendering with Lighting

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

The most complex WGPU example, demonstrating basic scene rendering with a focus on lighting and shadows. Requires familiarity with WGPU rendering and fundamental computer graphics mathematics.

```rust
// shadow - Likely by far the most complex example (certainly the largest in lines of code) of the official WGPU examples. shadow demonstrates basic scene rendering with the main attraction being lighting and shadows (as the name implies). It is recommended that any user looking into lighting be very familiar with the basic concepts of not only rendering with WGPU but also the primary mathematical ideas of computer graphics.
```

--------------------------------

### WGPU Water Main Program (Rust)

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/features/src/water/README.md

The main Rust program for the WGPU water example. It likely handles initialization, rendering loop, and interaction with shaders.

```rust
/* main.rs */
// Main program for the water example
```

--------------------------------

### WGPU Uniform Variables for Shader Access

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Explains how to enable shaders and the GPU to access application state through uniform variables. This example also demonstrates rudimentary app building by storing state and handling window events, rendering the Mandelbrot Set with navigation controls.

```rust
// uniform_values - Demonstrates the basics of enabling shaders and the GPU, in general, to access app state through uniform variables. uniform_values also serves as an example of rudimentary app building as the app stores state and takes window-captured keyboard events. The app displays the Mandelbrot Set in grayscale (similar to storage_texture) but allows the user to navigate and explore it using their arrow keys and scroll wheel.
```

--------------------------------

### Ray Traced Triangle with Compute Shader

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

A simplified example that showcases the use of ray queries within a compute shader, focusing on tracing a single triangle.

```rust
fn ray_traced_triangle() {
    // Implementation details for a simple ray traced triangle using compute shaders
}
```

--------------------------------

### Ray Queries with Compute Shader

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Demonstrates the application of ray queries in conjunction with a compute shader for advanced rendering techniques.

```rust
fn ray_cube_compute() {
    // Implementation details for ray queries with compute shaders
}
```

--------------------------------

### Combine Compute and Render for Boids Simulation

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Illustrates the integration of compute and rendering pipelines. This example performs a Boids simulation on the GPU and renders the simulated boids as small triangles on the screen.

```rust
fn boids() {
    // Implementation details for Boids simulation combining compute and rendering
}
```

--------------------------------

### WGPU Ray Queries for High-Quality Shadows

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Illustrates a simple use of ray queries to achieve high-quality shadows. It utilizes a light set with push constants to raytrace an untransformed scene and determine light obstruction.

```rust
// ray_shadows - Demonstrates a simple use of ray queries - high quality shadows - uses a light set with push constants to raytrace through an untransformed scene and detect whether there is something obstructing the light.
```

--------------------------------

### Run wgpu_examples uniform_values

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/features/src/uniform_values/README.md

Command to execute the uniform_values example from the wgpu_examples project using Cargo. This command builds and runs the specified binary.

```bash
cargo run --bin wgpu-examples uniform_values
```

--------------------------------

### WGPU Ray Queries with Model Loading

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Showcases the application of ray queries in conjunction with loading 3D models. This enables more complex scene interactions and rendering.

```rust
// ray_scene - Demonstrates using ray queries and model loading
```

--------------------------------

### WGPU Bunnymark: Multiple Draw Calls and Textures

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Demonstrates performing numerous draw calls with different bind groups within a single render pass. This example utilizes textures for icons and uniform buffers for global and per-particle states.

```rust
// bunnmark - Demonstrates many things, but chief among them is performing numerous draw calls with different bind groups in one render pass. The example also uses textures for the icon and uniform buffers to transfer both global and per-particle states.
```

--------------------------------

### WGPU Terrain Shader (WGSL)

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/features/src/water/README.md

WGSL shader code for rendering the terrain in the water example. It defines vertex and fragment shader logic.

```wgsl
/* terrain.wgsl */
// WGSL Shader for terrain
```

--------------------------------

### Generate wgpu Project from Template

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

This command uses cargo-generate to create a new wgpu project based on a template from the gfx-rs/wgpu repository, specifically using the v26 branch.

```sh
cargo generate gfx-rs/wgpu --branch v26
```

--------------------------------

### Compute Workgroup Basics

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Introduces the fundamental concepts of compute workgroups in WGSL, explaining their nature and capabilities within GPU parallel processing.

```wgsl
// WGSL code demonstrating basic workgroup concepts
```

--------------------------------

### Compute Collatz Values

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Demonstrates the basic workflow for GPU computation, including sending data to the GPU, executing a shader, and retrieving results. This example calculates the Collatz conjecture values for a set of numbers.

```rust
fn hello_compute() {
    // Implementation details for computing Collatz values on GPU
}
```

--------------------------------

### WGPU Ray Queries with Fragment Shader

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Demonstrates the use of ray queries within a fragment shader. This technique can be used for advanced rendering effects and calculations.

```rust
// ray_cube_fragment - Demonstrates using ray queries with a fragment shader.
```

--------------------------------

### Compute Shader with Storage Texture Output

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Showcases the utilization of storage textures as output targets for compute shaders. This example calculates the Mandelbrot Set, dispatching a compute workgroup for each pixel to write its value into an output storage texture, ultimately generating an image file or embedding it in a web page.

```rust
fn storage_texture(output_path: Option<String>) {
    // Implementation details for Mandelbrot set generation using storage textures
    // Example usage: cargo run --bin wgpu-examples -- storage_texture "test.png"
}
```

--------------------------------

### Compute Synchronization

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Explains and demonstrates synchronization mechanisms within WGSL compute shaders. It covers the use of barriers to ensure all invocations within a workgroup synchronize before proceeding.

```wgsl
// WGSL code demonstrating workgroup synchronization using barriers
```

--------------------------------

### WGPU Skybox with Model Loading and Mouse Interaction

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Showcases advanced WGPU concepts, including loading a car model from a file and allowing user interaction via mouse rotation. It also utilizes depth textures and patterns similar to `uniform_values` for immersive backdrops.

```rust
// skybox - Shows off too many concepts to list here. The name comes from game development where a "skybox" acts as a background for rendering, usually to add a sky texture for immersion, although they can also be used for backdrops to give the idea of a world beyond the game scene. This example does so much more than this, though, as it uses a car model loaded from a file and uses the user's mouse to rotate the car model in 3d. skybox also makes use of depth textures and similar app patterns to uniform_values.
```

--------------------------------

### WGPU Render to Texture (Off-screen Rendering)

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Demonstrates off-screen rendering to an image texture, enabling features like resolution-agnostic screenshots. The output can be saved to a file or embedded in a WASM page.

```rust
// render_to_texture - Renders to an image texture offscreen, demonstrating both off-screen rendering as well as how to add a sort of resolution-agnostic screenshot feature to an engine. This example either outputs an image file of your naming (pass command line arguments after specifying a -- like cargo run --bin wgpu-examples -- render_to_texture "test.png") or adds an img element containing the image to the page in WASM.
```

--------------------------------

### WGPU Multiple Render Targets

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Illustrates how to render to two texture targets simultaneously from a fragment shader. This is useful for techniques requiring multiple outputs from a single shader pass.

```rust
// multiple-render-targets - Demonstrates how to render to two texture targets simultaneously from fragment shader.
```

--------------------------------

### WGPU Water Shader (WGSL)

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/features/src/water/README.md

WGSL shader code for rendering the animated water. It utilizes read-only depth/stencil attachments for reflections and depth.

```wgsl
/* water.wgsl */
// WGSL Shader for water
```

--------------------------------

### WGPU Mesh Shaders for Triangle Rendering

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Renders a triangle to a window using mesh shaders, highlighting features like task shaders, payloads, and per-primitive data. This demonstrates modern GPU programmable pipeline capabilities.

```rust
// mesh_shader - Renders a triangle to a window with mesh shaders, while showcasing most mesh shader related features(task shaders, payloads, per primitive data).
```

--------------------------------

### WGPU Hexagon Point Generation (Rust)

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/features/src/water/README.md

Rust code responsible for generating hexagon points, likely used for terrain or water surface geometry.

```rust
/* point_gen.rs */
// Hexagon point generation
```

--------------------------------

### WGPU Cube Rendering with Vertex and Index Buffers

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Introduces advanced model rendering by creating a cube on the CPU and sending it to the GPU using vertex and index buffers. It utilizes a CPU-generated texture for shading and a uniform variable for transformations.

```rust
// cube - Introduces the user to slightly more advanced models. The example creates a set of triangles to form a cube on the CPU and then uses a vertex and index buffer to send the generated model to the GPU for usage in rendering. It also uses a texture generated on the CPU to shade the sides of the cube and a uniform variable to apply a transformation matrix to the cube in the shader.
```

--------------------------------

### Compute with Large Buffers using Binding Array

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Demonstrates a technique for handling very large datasets by splitting them across multiple buffers, leveraging the `binding_array` feature in WGSL. Note: This functionality is only supported natively and not in WASM.

```wgsl
// WGSL code demonstrating the use of binding_array for large buffers
```

--------------------------------

### Repeated Compute Collatz Values

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/README.md

Expands on the basic compute workflow by automatically loading large arrays of random numbers, processing them through the Collatz conjecture calculation on the GPU, and printing results over multiple cycles. This is intended for detailed exploration of compute subjects.

```rust
fn repeated_compute() {
    // Implementation details for repeated Collatz computation on GPU
}
```

--------------------------------

### Basic CSS Styling for Layout and Responsiveness

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/features/web-static/index.html

This CSS code provides foundational styling for the page layout, including flexbox configurations for content distribution and responsive adjustments for different screen sizes.

```CSS
:focus { outline: none; }
body { margin: 0px; background: #fff; font-family: "Calibri", "Arial", sans-serif; width: 100%; height: 100%; }
.root { width: 100%; height: 100%; display: flex; flex-direction: column; }
#banner { background: #dee; padding: 0.5em 0; border-bottom: 1px solid #abb; }
@media only screen and (max-width: 1000px) {
  #banner {
    max-height: 0;
    transition: max-height 0.15s ease;
    overflow: hidden;
    padding: 0;
  }
}
#banner.visible { max-height: 100%; }
.banner-prefix { text-align: center; }
p { font-size: 0.8em; padding: 0; margin: 0.5em 0; }
h1 { margin-left: 0.75em; margin-right: 0.75em; }
.backend-list-container { display: flex; flex-direction: row; justify-content: space-evenly; }
@media only screen and (max-width: 1000px) {
  .backend-list-container {
    flex-direction: column;
  }
}
.backend-list { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; }
.item-list { display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; height: 100px; }
@media only screen and (max-width: 1000px) {
  .item-list {
    flex-direction: row;
    height: initial;
  }
}
.example-item {
}
@media only screen and (max-width: 1000px) {
  .example-item {
    width: 33vw;
  }
}
@media only screen and (max-width: 500px) {
  .example-item {
    width: 50vw;
  }
}
.example-link { margin-left: 7px; margin-right: 7px; }
.backend-name { text-align: center; }
#content { 
  flex: 1 1 100%;
  contain: size;
}
.main-canvas { margin: 0; width: 100%; height: 100%; }
#menu-button { display: none; }
@media only screen and (max-width: 1000px) {
  #menu-button {
    display: block;
    width: 30px;
    height: 33px;
    margin: 0 auto;
  }
}
#menu-button span { display: block; width: 100%; height: 3px; margin: 6px auto; background-color: #333; transition: all 0.3s ease-in-out; }
```

--------------------------------

### Run Repeated Collatz Calculation with Cargo

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/features/src/repeated_compute/README.md

This command executes the 'repeated_compute' binary within the wgpu_examples project using Cargo. It's the primary way to run the demonstration of repeated Collatz calculations.

```bash
cargo run --bin wgpu-examples repeated_compute
```

--------------------------------

### Toggle Banner Visibility (JavaScript)

Source: https://github.com/workkkfor2012/wgpu_examples/blob/master/features/web-static/index.html

This code handles the interaction for a menu button to toggle the visibility of a banner element. It adds/removes CSS classes to control the display state.

```JavaScript
const menuButton = document.getElementById("menu-button");
const banner = document.getElementById("banner");

menuButton.onclick = () => {
  if (menuButton.classList.contains("active")) {
    menuButton.classList.remove("active");
    banner.classList.remove("visible");
  } else {
    menuButton.classList.add("active");
    banner.classList.add("visible");
  }
};
```
Tokens:
Raw