WebGPU Tutorial for OSU CSE 5542

This repository contains a series of WebGPU tutorials for CSE 5542 Each file demonstrates a specific graphics or interaction concept. Use this as a quick reference to the tutorials in this directory.

---

Tutorials

• 00-context.js Your first WebGPU code by creating a WebGPU canvas.

• 01-clear-value.js
  How to set screen clear value with a custom color.

• 02-hardcoded-triangle.js
  Your first triangle, with hard-coded WGSL shader.

• 03-vertex-buffer-triangle.js
  Draw the trialge with a vertex buffer.

• 04-colored-triangle.js
  Adding a separate color buffer for the triangle.

• 05-offset-colored-triangle.js
  Combine positions and colors in the same vertex buffer

• 06-indexed-triangles.js
  Use index buffers to draw a set of triangles

• 07-uniforms-move-the-square.js
  Learning uniform variables and use them to move an object.

• 08-translation-matrix.js
  Learning 2D translation.

• 09-scaling.js
  Learning 2D scaling.

• 10-rotation-2d.js
  Learning 2D rotations.

• 11-hierarchical-transformation.js
  Hierarchical transformations.

• 12-matrix-stack.js
  Using matrix stacks to manage your scene

• 14-3d-viewing.js
  3D viewing and projection matrices

• 15-lighting.js
  Let there be light!

• 15-lighting-interactive.js
  An interactive version of 3D lighting

• 16-texture.js
  Applying a 2D texture to a 3D box with UV mapping.

• 17-cube-map.js
  Using a cube map (skybox/reflection) with a 3D object.

• 18-trackball.js
  Interactive trackball rotation for 3D objects.

Credits

Contact: Hanqi Guo (guo.2154@osu.edu)

The tutorial materials are ported from the previous WebGL tutorial by Prof. Han-Wei Shen (shen.94@osu.edu)