Practical WebGPU Graphics
ISBN: 9798725062625, Publish Date: 2021, Paperback: $69.99
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. It provides about 60 ready-to-run sample programs that allow you to explore WebGPU graphics techniques. Click here for more information.
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
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
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
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
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
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
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.