About this Book

WebGPU is the next-generation graphics API and future web standard for graphics and compute, aiming to provide modern 3D graphics and computation capabilities with the GPU acceleration. This book provides all the tools you need to help you create advanced 3D graphics and GPU computing on the web with this new WebGPU API.

The book starts by taking you through the WebPack-TypeScript template for building the WebGPU apps and then shows you the WebGPU basics, shader program, GPU buffer, and rendering pipeline. Next, you will learn how to create primitives and simple objects in WebGPU. As you progress through the chapters, you will get to grips with advanced WebGPU topics, including 3D transformation, lighting calculation, colormaps, and textures. At the same time, you will learn how to create advanced 3D WebGPU objects, including various 3D wireframes, 3D shapes, simple and parametric 3D surfaces with colormaps and textures, as well as 3D surface plots and fractal graphics described by complex functions. In addition, you will explore new WebGPU features, such as compute shader and storage buffer, and how to use them to simulate large particle systems.

By the end of this book, you will have the skill you need to build your own GPU-accelerated graphics and computing on the web with the WebGPU API.

The things you will learn from this book:

• Template based on WebPack and TypeScript for developing WebGPU apps.
• WebGPU basics, GLSL and WGSL shaders, and rendering pipeline.
• Create primitives and simple shapes in WebGPU.
• 3D transformations, model, viewing, projection, and various coordinate systems.
• GPU buffers, uniform buffer objects, animation, and camera controls.
• Normal vectors, lighting model, ambient, diffuse, and specular light calculations.
• UV coordinates, texture mapping.
• Color model, colormaps, and color interpolation.
• Create 3D shapes, wireframes, surfaces, and 3D charts.
• Create 3D plots and fractal graphics using complex functions.
• Compute shaders, storage buffers, and large particle system simulation.

Table of Contents

Contents	                                                v
Introduction	                                                1
Overview	                                                1
What this Book Includes	                                        2
Is this Book for You?	                                        3
What Do You Need to Use this Book?	                        3
How this Book Is Organized	                                4
Use Code Examples	                                        6
Customer Support	                                        6
1	WebGPU Development Tools	                        7
1.1	Install Node.js	                                        7
1.2	Install VS Code	                                        8
1.3	WebPack Template	                                8
1.3.1	Package File	                                        9
1.3.2	Configuration Options	                                10
1.3.3	TypeScript Configuration File	                        13
1.4	Test WebPack Template	                                14
1.4.1	Install and build	                                14
1.4.2	Menu Bar File	                                        16
1.4.3	HTML Files	                                        16
1.4.4	Run App on Local Web Server	                        17
1.4.5	Live Server	                                        18
1.5	WebGPU Support	                                        20
1.5.1	Install Chrome Canary	                                21
1.5.2	Configure VS Code	                                22
1.5.3	Test WebGPU	                                        23
2	WebGPU Basics	                                        25
2.1	First WebGPU Example	                                25
2.1.1	WGSL Shaders	                                        25
2.1.2	TypeScript Code	                                        26
2.1.3	HTML Code	                                        28
2.1.4	Run Application	                                        28
2.2	Create Triangle with GLSL	                        29
2.2.1	GLSL Shaders	                                        29
2.2.2	TypeScript File	                                        30
2.2.3	HTML Code	                                        31
2.2.4	Run Application	                                        32
2.3	WebGPU API	                                        33
2.3.1	WebGPU Context	                                        33
2.3.2	Swap Chain	                                        34
2.3.3	Rendering Pipeline	                                34
2.3.4	Rendering Output	                                35
2.4	Shader Program	                                        36
2.4.1	GLSL Shaders	                                        36
2.4.2	WGSL Shaders	                                        38
3	WebGPU Primitives	                                41
3.1	Create Points	                                        42
3.1.1	TypeScript Code	                                        42
3.1.2	HTML Code	                                        44
3.1.3	Run Application	                                        45
3.2	Create Lines	                                        46
3.2.1	TypeScript Code	                                        46
3.2.2	HTML Code	                                        48
3.2.3	Run Application	                                        49
3.3	Create Triangles	                                50
3.3.1	TypeScript Code	                                        50
3.3.2	HTML Code	                                        53
3.3.3	Run Application	                                        53
4	GPU Buffers	                                        55
4.1	GPU Buffer	                                        55
4.2	Create Colored Triangle	                                56
4.2.1	TypeScript Code	                                        56
4.2.2	HTML Code	                                        60
4.2.3	Run Application	                                        61
4.3	Create Triangle Using Single Buffer	                61
4.3.1	TypeScript Code	                                        62
4.3.2	HTML Code	                                        65
4.3.3	Run Application	                                        65
4.4	Create Square	                                        66
4.4.1	TypeScript Code	                                        66
4.4.2	HTML Code	                                        68
4.4.3	Run Application	                                        69
4.5	Create Square with Index Buffer	                        69
4.5.1	TypeScript Code	                                        70
4.5.2	HTML Code	                                        72
4.5.3	Run Application	                                        72
5	3D Transformations	                                75
5.1	Basics of 3D Matrices and Transformations	        75
5.1.1	Introducing gl-matrix	                                75
5.1.2	3D Vector and Matrix Operations	                        76
5.1.3	Scaling	                                                77
5.1.4	Translation	                                        80
5.1.5	Rotation	                                        81
5.1.6	Combining Transformations	                        83
5.2	Projections and Viewing	                                84
5.2.1	Transforming Coordinates	                        84
5.2.2	Viewing Transform	                                86
5.2.3	Perspective Projection	                                89
5.2.4	Orthographic Projection	                                93
5.3	Transformations in WebGPU	                        96
6	Create 3D Shapes	                                97
6.1	Uniform Buffer and Bind Group	                        97
6.2	Create 3D Line	                                        99
6.2.1	Common Code	                                        99
6.2.2	TypeScript Code	                                        100
6.2.3	Shader Program	                                        103
6.2.4	Animation and Camera Control	                        104
6.2.5	HTML Code	                                        106
6.2.6	Run Application	                                        106
6.3	Create Cube with Distinct Face Colors	                107
6.3.1	Create Vertex Data	                                108
6.3.2	TypeScript Code	                                        110
6.3.3	Shader Program	                                        114
6.3.4	HTML Code	                                        115
6.3.5	Run Application	                                        116
6.4	Create Cube with Distinct Vertex Colors	                117
6.4.1	Create Vertex Data	                                117
6.4.2	TypeScript Code	                                        118
6.4.3	HTML Code	                                        121
6.4.4	Run Application	                                        122
7	3D Wireframe Shapes	                                123
7.1	Common Code	                                        123
7.2	Cube Wireframe	                                        125
7.2.1	TypeScript File	                                        125
7.2.2	HTML Code	                                        127
7.2.3	Run Application	                                        128
7.3	Sphere Wireframe	                                129
7.3.1	TypeScript Code	                                        130
7.3.2	HTML Code	                                        132
7.3.3	Run Application	                                        133
7.4	Cylinder Wireframe	                                133
7.4.1	TypeScript Code	                                        135
7.4.2	HTML File	                                        138
7.4.3	Run Application	                                        139
7.5	Cone Wireframe	                                        140
7.5.1	TypeScript Code	                                        141
7.5.2	HTML File	                                        142
7.5.3	Run Application	                                        144
7.6	Torus Wireframe	                                        145
7.6.1	TypeScript Code	                                        146
7.6.2	HTML File	                                        147
7.6.3	Run Application	                                        149
8	Lighting in WebGPU	                                151
8.1	Light Components	                                151
8.2	Normal Vectors	                                        152
8.2.1	Surface Normal of a Cube	                        152
8.2.2	Surface Normal of a Sphere	                        153
8.2.3	Surface Normal of a Cylinder	                        153
8.2.4	Surface Normal of a Polyhedral Surface	                153
8.3	Lighting Calculation	                                154
8.3.1	Diffuse Light	                                        154
8.3.2	Specular Light	                                        154
8.4	Lighting in Shaders	                                155
8.4.1	Transform Normals	                                156
8.4.2	GLSL Shader with Lighting	                        157
8.4.3	WGSL Shader with Lighting	                        159
8.5	Common Code	                                        160
8.6	Cube with Lighting	                                164
8.6.1	TypeScript Code	                                        164
8.6.2	HTML Code	                                        165
8.6.3	Run Application	                                        166
8.7	Sphere with Lighting	                                167
8.7.1	Vertex and Normal Data	                                168
8.7.2	TypeScript Code	                                        169
8.7.3	HTML Code	                                        170
8.7.4	Run Application	                                        171
8.8	Cylinder with Lighting	                                172
8.8.1	Vertex and Normal Data	                                173
8.8.2	TypeScript Code	                                        174
8.8.3	HTML Code	                                        175
8.8.4	Run Application	                                        177
8.9	Cone with Lighting	                                177
8.9.1	Vertex and Normal Data	                                178
8.9.2	TypeScript Code	                                        179
8.9.3	HTML Code	                                        180
8.9.4	Run Application	                                        182
8.10	Torus with Lighting	                                182
8.10.1	Vertex and Normal Data	                                183
8.10.2	TypeScript Code	                                        184
8.10.3	HTML Code	                                        185
8.10.4	Run Application	                                        186
9	Colormap and 3D Surfaces	                        189
9.1	Color Models	                                        189
9.2	Colormap	                                        190
9.2.1	Colormap Data	                                        190
9.2.2	Color Interpolation	                                191
9.2.3	Color Data from Vertex Data	                        193
9.3	Shaders with Lighting and Vertex Color	                194
9.3.1	GLSL Shaders	                                        194
9.3.2	WGSL Shaders	                                        196
9.4	Common Code	                                        198
9.5	Simple 3D Surfaces	                                201
9.5.1	Vertex and Normal Data	                                202
9.5.2	Sinc Surface	                                        204
9.5.3	Exponential Surface	                                208
9.5.4	Peaks Surface	                                        211
9.6	Parametric 3D Surfaces	                                215
9.6.1	Vertex and Normal Data	                                215
9.6.2	Helicoid Surface	                                216
9.6.3	Klein Bottle	                                        219
9.6.4	Wellenkugel Surface	                                223
9.6.5	Radial Wave	                                        226
10	Textures	                                        231
10.1	Texture Coordinates	                                231
10.2	Texture Mapping in WebGPU	                        232
10.3	Shaders with Texture	                                234
10.3.1	GLSL Shaders	                                        234
10.3.2	WGSL Shader	                                        236
10.4	Common Code	                                        237
10.5	Simple 3D Shapes	                                242
10.5.1	Cube with Texture	                                242
10.5.2	Sphere with Texture	                                247
10.5.3	Cylinder with Texture	                                252
10.6	Simple 3D Surfaces	                                257
10.6.1	Sinc Surface with Texture	                        259
10.6.2	Peaks Surface with Texture	                        262
10.7	Parametric 3D Surfaces	                                266
10.7.1	Klein Bottle with Texture	                        267
10.7.2	Wellenkugel Surface with Texture	                271
10.8	Multiple Textures	                                274
10.8.1	Texture Coordinates	                                275
10.8.2	TypeScript Code	                                        277
10.8.3	HTML Code	                                        278
10.8.4	Run Application	                                        279
11	3D Surface Charts	                                281
11.1	Wireframe as Texture	                                282
11.1.1	Square Textures	                                        282
11.1.2	Texture Coordinates	                                283
11.2	Shaders for 3D Charts	                                283
11.2.1	GLSL Shaders	                                        283
11.2.2	WGSL Shader	                                        285
11.3	Common Code	                                        287
11.4	Simple 3D Surface Charts	                        291
11.4.1	Sinc Chart	                                        292
11.4.2	Exponential Surface Chart	                        296
11.4.3	Peaks Chart	                                        299
11.5	Parametric 3D Surface Charts	                        302
11.5.1	Sphere Surface	                                        303
11.5.2	Torus Surface	                                        306
11.5.3	Klein Bottle Surface	                                309
11.5.4	Wellenkugel Surface Chart	                        312
12	Complex Function Plots	                                317
12.1	Complex Functions in JavaScript	                        317
12.1.1	Complex Number	                                        317
12.1.2	Math Parser	                                        318
12.2	Surface Plots for Complex Functions	                319
12.2.1	Create Complex Functions	                        319
12.2.2	Generate Surface Data	                                320
12.2.3	TypeScript Code	                                        323
12.2.4	HTML Code	                                        324
12.2.5	Run Application	                                        326
12.3	Animate Vertex Data	                                327
12.3.1	Code Optimization	                                328
12.3.2	TypeScript Code	                                        330
12.3.3	HTML Code	                                        334
12.3.4	Run Application	                                        336
12.4	Fractal: Mandelbrot Set	                                337
12.4.1	Mandelbrot Set Formula	                                337
12.4.2	Shaders with Image Texture	                        337
12.4.3	Mandelbrot Set Implementation	                        339
12.4.4	HTML Code	                                        344
12.5	Create Mandelbrot Set in Shader	                        346
12.5.1	WGSL Shaders	                                        346
12.5.2	GLSL Shaders	                                        348
12.5.3	TypeScript Code	                                        349
12.5.4	HTML Code	                                        352
13	Create Multiple Objects	                                357
13.1	Create Two Cubes	                                357
13.1.1	TypeScript Code	                                        357
13.1.2	HTML Code	                                        361
13.1.3	Run Application	                                        362
13.2	Create Different Objects	                        363
13.2.1	TypeScript Code	                                        363
13.2.2	HTML Code	                                        365
13.2.3	Run Application	                                        365
13.3	Create Objects with Multiple Pipelines	                366
13.3.1	TypeScript Code	                                        366
13.3.2	HTML Code	                                        372
13.3.3	Run Application	                                        373
13.4	Create 3D Charts with Multiple Pipelines	        374
13.4.1	Create Wireframe Data	                                374
13.4.2	Modify Shader Program	                                375
13.4.3	TypeScript Code	                                        376
13.4.4	HTML Code	                                        382
13.4.5	Run Application	                                        383
13.5	Charts with Coordinate Axes	                        384
13.5.1	Implement Coordinate Axes	                        384
13.5.2	Shaders for Coordinate Axes	                        386
13.5.3	TypeScript Code	                                        387
13.5.4	HTML Code	                                        389
13.5.5	Run Application	                                        391
14	Compute Shaders and Particles	                        393
14.1	Compute Shader	                                        393
14.1.1	Compute Space and Workgroups	                        394
14.1.2	Write and Read Buffer	                                395
14.2	2D Rotation in GPU	                                396
14.2.1	TypeScript Code	                                        396
14.2.2	Shader Code	                                        399
14.2.3	HTML Code	                                        400
14.2.4	Run Application	                                        402
14.3	Compute Boids	                                        402
14.3.1	TypeScript Code	                                        402
14.3.2	Shader Code	                                        406
14.3.3	HTML Code	                                        410
14.3.4	Run Application	                                        411
14.4	Particles under Gravity	                                412
14.4.1	TypeScript Code	                                        413
14.4.2	Shader Code	                                        419
14.4.3	HTML Code	                                        422
14.4.4	Run Application	                                        423
Index	                                                        425

    

Introduction

        Overview
        What This Book Includes
        Is This Book for You
        What Do You Need to Use This Book
        How This Book is Organized
        Using Code Examples

Overview

Welcome to Practical WebGPU Graphics. WebGPU is the next-generation graphics API that is being developed by the W3C GPU for the Web Community Group with engineers from Apple, Google, Microsoft, Mozilla and others. It is a future web standard for graphics and compute, aiming to provide modern 3D graphics and computation capabilities with the GPU acceleration. This book will provide all the tools you need to help you create advanced 3D graphics and GPU computing on the Web using this new WebGPU graphics API. I hope that this book will be useful for web developers, web graphics creators, computer graphics programmers, web game developers, and students of all skill levels who are interested in graphics developments on the Web.

Unlike WebGL that is based on OpenGL, WebGPU is not a direct port of any existing native API. It is based on concepts in Vulkan, Metal, and Direct3D 12 APIs and is intended to provide high performance on those modern graphics APIs across mobile and desktop platforms.

In order to understand WebGPU technology, we need to review a brief history of native graphics technologies. The first comes with OpenGL. It is a low-level high performance graphics technology, which WebGL is based on. It was originally developed in the early of 1990s. Since then, many graphics applications based on OpenGL have been developed. In fact, modern GPU works very differently to how the original OpenGL did – but many core concepts of OpenGL had not changed.

As GPUs became more complex and powerful, the graphics driver ended up having to do a lot of extremely complex work. This made graphics drivers notoriously buggy, and in many cases slower too, since they have to do all the work on the fly. To improve OpenGL’s performance, Khronos, the group behind OpenGL, proposed a new, completely redesigned modern graphics API called Vulkan that was released in 2016. Vulkan is even more low-level, faster, simpler, and a much better match for modern hardware.

However, using Vulkan also meant that applications had to rewrite all their graphics code completely in order to support it. This kind of tectonic shift in technology takes years to play out, and as a result, there is still a lot of OpenGL out there.

While Vulkan is designed to be a standard API that is able to work on all systems, as has long been the case with standards, Apple also came up with Metal for iOS and macOS, while Microsoft came up with DirectX 12 for Windows and Xbox. Both are more or less the same idea as Vulkan: new, lower-level APIs that throws out all the historical baggage and starts with a clean slate design that much more closely matches how modern GPU hardware works.

With the graphics community moving on to this new generation of APIs, the question was then what to do on the web. WebGL is essentially OpenGL with many of the same pitfalls, while high-performance web game engines still stand to benefit a lot from the new generation of graphics APIs.

Unfortunately, unlike OpenGL, Vulkan has run into trouble getting true cross-platform reach due to Apple. MacOS and iOS only support Metal and have no official support for Vulkan, although there are third-party libraries for it. Furthermore, even Vulkan is not very suitable for the web – it is just too low level, even dealing with minutiae like GPU memory allocators so that AAA game engines could extract the maximum conceivable performance. Not all of this is appropriate for the web platform, and security is a much more significant concern in browsers.

So the solution was an all-new API designed specifically for the web, high level enough to be usable and secure in a browser, and able to be implemented on top of any of Vulkan, Metal and DirectX 12. This is WebGPU, which seems to be the only truly cross-platform, modern, and low-level graphics API for web applications.

Note that WebGPU has not been finalized and is still in early development stage, so its API interface may change frequently in the future. In addition, WebGPU is actually in a de facto split state, and the main difference lies in the shader language. In order to avoid difficulties and bugs originated from text-based shader language, some people suggested using a binary-based shader language, that is, the shading language needs to be compiled into a binary before submitting it to the browser. For example, we can take the latest version 4.5 of GLSL as the shader language, and then use WebAssembly (WASM) technology to compile it into binary according to the SPIR-V shader specifications of the Vulkan standard.

On the other hand, the W3C WebGPU group recently agreed on a new shader language called WGSL (WebGPU Shading Language). It is still a text-based language and is trivially convertible to SPIR-V. The features and semantics in WGSL are exactly the ones of SPIR-V. For more information about WGSL, please visit its official website at https://gpuweb.github.io/gpuweb/wgsl.html.

In this book, I will mainly use the “official” WGSL shader to implement WebGPU sample applications, but I will also show you how to use GLSL with compiler to create some examples. In addition, I will include the GLSL shader code for all example projects presented in the book for your reference, which will make you to be familiar with both shader languages.

Practical WebGPU Graphics provides everything you need to create advanced 3D graphics objects in your web application with GPU acceleration. In this book, you will learn how to create a variety of 3D graphics and charts that range from simple 3D shapes such as cube, sphere, cylinder, to complex 3D surface graphics such as 3D wireframes, 3D surface charts, and complex particle systems created using compute shaders. I will try my best to introduce readers to WebGPU, the next-generation graphics API for web, in a simple way – simple enough to be easily followed by web front-end programmers who have little experience in developing advanced graphics applications. You can learn from this book how to create full ranges of 3D graphics applications using the WebGPU API and shader program.

What This Book Includes

This book and its sample code listings, which are available for download at my website at https://book.gincker.com or https://drxudotnet.com, provide you with

• A complete, in-depth instruction to practical 3D graphics programming with WebGPU. After reading this book and running the example programs, you will be able to create various sophisticated 3D graphics and charts with GPU acceleration in your web applications.
• About 60 ready-to-run example projects that allow you to explore the 3D graphics techniques described in this book. You can use these examples to get better understanding of how the 3D graphics and charts are created using the WebGPU API and shader program. You can also modify the code or add new features to them to form the basis of your own program. Some of the example code listings provided with this book are already sophisticated chart and graphics projects, and can be directly used in your own real-world web applications.
• Many classes and components in the sample code listings that you will find useful in your 3D graphics development. These classes and components include 3D transformation, projection, colormaps, lighting models created in fragment shaders, WebGPU pipeline settings, WGSL and GLSL shader code, as well as the other useful utility classes. You can extract these classes and components and plug them into your own web applications.

Is This Book for You

You do not have to be an experienced web front-end developer to use this book. I designed this book to be useful to people of all levels of web programming experience. In fact, I believe that if you have some prior experience with web and programming languages such as C++, Java, R, Python, VBA, C#, or JavaScript, you will be able to sit down in front of your computer, start up Visual Studio Code, follow the examples provided in this book, and quickly become proficient with modern 3D graphics development using the WebGPU API. For those of you who are already experienced web developer or graphics/game programmers, I believe this book has much to offer as well. A great deal of the information in this book about WebGPU programming is not available in other tutorial and reference books. In addition, you can use most of the example programs in this book directly in your own real-world application development. This book will provide you with a level of detail, explanation, instruction, and sample program code that will enable you to do just about anything related to modern 3D graphics development for the web using the next-generation WebGPU graphics API.

Web front-end programmers can use the majority of the example programs in this book routinely. Throughout the book, I emphasize the usefulness of WebGPU graphics programming to real-world web applications. If you follow the instructions presented in this book closely, you will easily be able to develop various graphics and chart applications with GPU acceleration from simple 3D shapes to 3D surfaces with powerful colormap, wireframe, and texture mapping. You can also create complex particle systems and fractal images using compute shaders. At the same time, I will not spend too much time discussing program style, code tree shaking, and code optimization because there is a plethora of books out there already dealing with those topics. Most of the example programs you will find in this book omit error handlings, which makes the code easier to understand by focusing only on the key concepts and practical applications.

What Do You Need to Use This Book

You will need no special equipment to make the best use of this book and understand the algorithms. This book will take full advantage of open source frameworks and libraries. The sample programs companied with this book can run on various operating systems, including Windows, Linux, iOS, or MacOS. This book uses Visual Studio Code (VS Code), TypeScript, and WebPack as the development environment and tools. VS Code is a lightweight IDE and powerful source code editor that runs on various operating systems like Windows, Linux, or MacOS. It has built-in support for JavaScript, TypeScript, and Node.js.

Since the WebGPU standard has not been finalized and is still in early development stage, its API may change frequently. This book uses @webgpu/types version 0.0.38 for implementing WebGPU applications, and @webgpu/glslang version 0.0.15 for compiling the GLSL shader code into SPIR-V binary. All the examples are tested on Chrome Canary web browser.

If you install the other versions of WebGPU API, you may be able to run most of the sample code with few modifications. Please remember, however, that this book is intended for that specific version of the WebGPU API on which all of the example programs were created and tested, so it is best to run the sample code on the same development environment and same version of the WebGPU API.

In addition, your operating system needs to have a modern GPU as well as the DirectX 12, Metal, or Vulkan API support on your graphics card.

How This Book Is Organized

This book is organized into fourteen chapters, each of which covers a different topic about modern WebGPU graphics programming. The following summaries of each chapter should give you an overview of the book’s content:

Chapter 1, WebGPU Development Tools
This chapter explains how to set up packages and tools required for WebGPU application development. VS Code, TypeScript, and WebPack will be used as our development environment and tools. VS Code is a lightweight IDE and powerful source code editor that runs on various operating systems like Windows, Linux, or MacOS. It has built-in support for JavaScript, TypeScript, and Node.js.

Chapter 2, WebGPU Basics
This chapter provides a brief overview on the current WebGPU technology, and then use a simple triangle example to explain the key aspects of WebGPU, including WebGPU context, rendering pipeline, shader program, and rendering graphics on HTML5 canvas.

Chapter 3, WebGPU Primitives
This chapter demonstrates how to draw WebGPU basic shapes, including points, lines, and triangles. These basic shapes are referred to primitives. There is no built-in support for curves or curved surfaces; they must be approximated by primitives. Currently, WebGPU includes five primitives.

Chapter 4, GPU Buffers
This chapter introduces GPU buffers that hold vertex data and color information, and explains how to use GPU buffers to create colorful triangle and square with each vertex having a distinct color.

Chapter 5, 3D Transformations
This chapter explains how to perform basic 3D transformations, including translation, scaling, and rotation. It also describes how to construct various matrix representations used in 3D graphics, including model matrix, viewing matrix, and projection matrix. These matrices will be used to display 3D graphics objects on a 2D screen.

Chapter 6, Create 3D Shapes
This chapter shows how to use transformation, viewing, and projection matrices to create some real-world 3D shapes – a 3D line and two cubes. One cube with distinct face colors and the other cube with distinct vertex colors, from which, you will learn some of important concepts in WebGPU: bind groups and uniform buffer object.

Chapter 7, 3D Wireframe Shapes
A wireframe model is a visual representation of 3D objects used in computer graphics. It is created by drawing just the outlines of the polygons that make up the object. This chapter explains how to create wireframe models in WebGPU for various 3D shapes, including cube, sphere, cylinder, cone, and torus. The key to create 3D wireframe shapes is to specify correct coordinates for their vertices.

Chapter 8, Lighting in WebGPU
This chapter demonstrates how to build a simple lighting model in WebGPU and how to use it to simulate light sources and the way that the light that they emit interacts with your objects on the scene. Here, I will discuss three light sources: ambient light, diffuse light, and specular light.

Chapter 9, Colormap and 3D surfaces
This chapter explains how to use the color model and colormap to render the 3D simple and parametric surfaces by specifying various mathematical functions. Surfaces play an important role in various applications, including computer graphics, virtual reality, computer games, and 3D data visualization.

Chapter 10, Textures
This chapter discusses 2D image textures that can be applied to a surface to make the color of the surface vary from point to point, something like painting a copy of the image onto the surface. It shows how to map 2D textures onto various surfaces in WebGPU.

Chapter 11, 3D Surface Charts
Surface charts are plots of 3D data. Rather than displaying the individual data points, surface charts show a functional relationship between a dependent variable y, and two independent variables x and z. This chapter explains how to create real-word 3D surface charts with colormaps, and how to add wireframe to the surface charts by mapping transparent square images onto the surface.

Chapter 12, Complex Function Plots
This chapter illustrates how to create 3D surface plots in WebGPU for various complex functions. It also explains how to create a fractal chart for the Mandelbrot set with two different approaches: one approach is to use JavaScript and CPU and the other approach is to use GPU and write the code directly inside the fragment shader program.

Chapter 13, Create Multiple Objects
This chapter explains three approaches used to create multiple objects on a scene. One approach is to use the uniform transformations to render the same object multiple times. The other approach is to combine the vertex data of different objects together and render them as a single object. The third approach is to use different pipelines to render different objects.

Chapter 14, Compute Shaders and Particles
This chapter introduces compute shader and describes how to use it in a simple 2D rotation example. It then applies the compute shader to the particle systems – one system mimics the flocking behavior of birds and the other one simulates gravity on particles.

Using Code Examples

You may use the code in this book in your own applications and documentation. You do not need to contact the author or the publisher for permission unless you are reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing the example code listings does require permission. Incorporating a significant amount of example code from this book into your applications and documentation also requires permission. Integrating the example code from this book into commercial products is not allowed without written permission of the author.