101 WebGPU and WGSL Projects

Available Amazon

101 WebGPU and WGSL Projects is both a learning resource and a reference text that provides lots of hands-on examples to teach and inspire you! If you're looking to get started - or want to try out something new - this text is definetly for you!

• Make WebGPU and WGSL Fun and Interesting
• Working with the API and shader language directly
• Large range of hands-on examples (with code) from very basic through to more complex/advanced concepts
• 101 project examples (yes, 101!!)
• Great resource for building up your portfolio
• Quick reference text (how-to) for times when you've forgotten or need to know how to do something (e.g., load audio or create a compute shader)
• ...

List 101 Projects

Basic Projects

1 Draw a single-colored triangle
2 Draw a gradient-colored triangle
3 Render a textured triangle
4 Draw a square using two triangles
5 Create a circle using a fragment shader
6 Draw a grid of squares
7 Display a gradient background
8 Render a simple line (using geometry)
9 Render a pulsating triangle
10 Animate a triangle moving across the screen

11 Draw a wireframe triangle
12 Render a triangle with transparency
13 Create a triangle with a checkerboard texture
14 Render overlapping shapes with depth testing
15 Implement point rendering
16 Visualize a grid with numbered cells
17 Render a star shape using vertex manipulation
18 Create an ellipse with uniform scaling
19 Draw a pulsating circle
20 Render a triangle with rounded corners

Intermedia Projects

21 Animate a spinning cube
22 Render a textured cube
23 Implement a 2D lighting effect
24 Draw a procedural gradient with smooth transitions
25 Create a dynamic wave effect on a plane
26 Generate a terrain using a height map pattern (noise)
27 Render a sphere using a fragment shader
28 Generate a procedural noise texture
29 Apply a grayscale post-processing filter
30 Create a bloom effect
31 Render a shadow on a 2D plane
32 Animate a bouncing ball with gravity
33 Create a procedural starfield
34 Generate a Voronoi diagram texture
35 Render an outline around objects
36 Simulate raindrops falling on a surface
37 Implement zooming on a 2D scene
38 Create a particle explosion effect
39 Render a dynamic flame animation
40 Apply a fisheye lens distortion effect

Advanced Projects

41 Implement a 3D camera system
42 Create a simple skybox
43 Render a reflective surface
44 Simulate water ripples on a plane
45 Implement a soft shadow effect
46 Render a point light source in 3D
47 Create a bump-mapped surface
48 Render a rotating textured sphere
49 Simulate a foggy scene
50 Implement a refraction shader for glass effects
51 Render a Mandelbrot fractal
52 Simulate a dynamic cloth system
53 Create a fluid simulation using particles
54 Implement realistic metallic materials
55 Procedural terrain using fractal brownian noise (fbn)
56 Render a volumetric light effect
57 Create a dynamic smoke simulation
58 Render multiple objects with instancing
59 Simulate lens flare effects
60 Implement subsurface scattering for translucent materials

Compute Projects

61 Perform vector addition on the GPU using WebGPU Compute
62 Implement a matrix multiplication algorithm
63 Compute image blurring using Gaussian kernels
64 Generate a Mandelbulb Fractal with Compute Shaders
65 Simulate Conway's Game of Life
66 Implement a particle system with compute shaders
67 Create a GPU-based physics simulation
68 Perform edge detection on an image
69 Simulate water flow using cellular automata
70 Generating smooth noise textures with Worley noise
71 Implement parallel sorting algorithms
72 Simulate heat diffusion on a grid
73 Perform ray tracing using a compute shader
74 Compute lighting using a physically based rendering model
75 Render a GPU-driven particle fountain
76 Generate procedural clouds
77 Simulate soft body physics
78 Perform wave simulation using the GPU
79 Create a terrain heightmap generator (Texture)
80 Simulate fire using GPU computation

Interactive Projects

81 Implement mouse interaction to move objects
82 Create a paint application using the GPU
83 Build a simple game: Pong
84 Animate objects based on user input
85 Implement drag-and-drop mechanics for 2D objects
86 Add zoom and pan functionality to a 2D scene
87 Create a dynamic heatmap visualization
88 Build a 3D object viewer with mouse controls
89 Simulate drawing with a virtual brush
90 Implement interactive particle attraction
91 Create a waveform visualizer for audio input
92 Build an interactive fractal explorer
93 Simulate a touch-sensitive ripple effect
94 Create a dynamic starfield with mouse parallax
95 Implement a simple 2D platformer
96 Make a procedurally generated maze
97 Simulate a sandbox environment with user interactions
98 Build a basic 3D scene editor
99 Create a color picker with GPU rendering
100 Implement a physics-based slingshot game
101 Develop an interactive, GPU-driven graph plotter

Appendix

• External libraries (gl-matrix)
• Load texture (png/jpg/gif)
• Load json model
• Loading video textures
• Audio loader/filter
• SDF - ray tracer
• SDF - mod (repeat) - marching shapes, sdf 'combining' shapes (add/subtract)
• Save WebGPU canvas to 'file' (png) with Transparency
• Swirl effect image/fragement shader
• Generate skybox textures (in compute shader) - e.g., sky/clouds procedurally
• Ambient occlusion

Resources & Links

Lots of other projects and examples are available on the WebGPU Lab editor
• WebGPU and WGSL Lab (Online Editor/Code) [LINK]

Advert (Support Website)

Visitor: