Practical WebGPU Graphics
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.