IntroductiontoComputerGraphics

[Pages:533]Introduction to Computer Graphics

Version 1.4, August 2023

David J. Eck

Hobart and William Smith Colleges

This is a PDF version of a free on-line book that is available at . The PDF does not include

sample programs, but it does have external links to those files, shown in blue.

The PDF also has internal links, shown in red. These links can be used in Acrobat Reader and some other PDF reader programs.

ii

?2015?2023, David J. Eck

David J. Eck (eck@hws.edu) Department of Mathematics and Computer Science Hobart and William Smith Colleges Geneva, NY 14456 This book can be distributed in unmodified form for non-commercial purposes. Modified versions can be made and distributed for non-commercial purposes provided they are distributed under the same license as the original. More specifically: This work is licensed under the Creative Commons AttributionNonCommercial-ShareAlike 4.0 License. To view a copy of this license, visit . Other uses require permission from the author. The web site for this book is:

Contents

Preface

viii

1 Introduction

1

1.1 Painting and Drawing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.2 Elements of 3D Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.3 Hardware and Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2 Two-Dimensional Graphics

11

2.1 Pixels, Coordinates, and Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.1.1 Pixel Coordinates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.1.2 Real-number Coordinate Systems . . . . . . . . . . . . . . . . . . . . . . . 14

2.1.3 Aspect Ratio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

2.1.4 Color Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

2.2 Shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.2.1 Basic Shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

2.2.2 Stroke and Fill . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

2.2.3 Polygons, Curves, and Paths . . . . . . . . . . . . . . . . . . . . . . . . . 24

2.3 Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

2.3.1 Viewing and Modeling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

2.3.2 Translation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

2.3.3 Rotation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

2.3.4 Combining Transformations . . . . . . . . . . . . . . . . . . . . . . . . . . 31

2.3.5 Scaling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

2.3.6 Shear . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

2.3.7 Window-to-Viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

2.3.8 Matrices and Vectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

2.4 Hierarchical Modeling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

2.4.1 Building Complex Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

2.4.2 Scene Graphs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

2.4.3 The Transform Stack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

2.5 Java Graphics2D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

2.5.1 Graphics2D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

2.5.2 Shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

2.5.3 Stroke and Fill . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

2.5.4 Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

2.5.5 BufferedImage and Pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

2.6 HTML Canvas Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

2.6.1 The 2D Graphics Context . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

i

CONTENTS

ii

2.6.2 Shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 2.6.3 Stroke and Fill . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 2.6.4 Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 2.6.5 Auxiliary Canvases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 2.6.6 Pixel Manipulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 2.6.7 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 2.7 SVG: A Scene Description Language . . . . . . . . . . . . . . . . . . . . . . . . . 66 2.7.1 SVG Document Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 2.7.2 Shapes, Styles, and Transforms . . . . . . . . . . . . . . . . . . . . . . . . 69 2.7.3 Polygons and Paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 2.7.4 Hierarchical Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 2.7.5 Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

3 OpenGL 1.1: Geometry

77

3.1 Shapes and Colors in OpenGL 1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . 77

3.1.1 OpenGL Primitives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

3.1.2 OpenGL Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

3.1.3 glColor and glVertex with Arrays . . . . . . . . . . . . . . . . . . . . . . . 83

3.1.4 The Depth Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

3.2 3D Coordinates and Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

3.2.1 3D Coordinates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

3.2.2 Basic 3D Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

3.2.3 Hierarchical Modeling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

3.3 Projection and Viewing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

3.3.1 Many Coordinate Systems . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

3.3.2 The Viewport Transformation . . . . . . . . . . . . . . . . . . . . . . . . . 95

3.3.3 The Projection Transformation . . . . . . . . . . . . . . . . . . . . . . . . 96

3.3.4 The Modelview Transformation . . . . . . . . . . . . . . . . . . . . . . . . 100

3.3.5 A Camera Abstraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

3.4 Polygonal Meshes and glDrawArrays . . . . . . . . . . . . . . . . . . . . . . . . . 105

3.4.1 Indexed Face Sets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

3.4.2 glDrawArrays and glDrawElements . . . . . . . . . . . . . . . . . . . . . . 109

3.4.3 Data Buffers in Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

3.4.4 Display Lists and VBOs . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

3.5 Some Linear Algebra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

3.5.1 Vectors and Vector Math . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

3.5.2 Matrices and Transformations . . . . . . . . . . . . . . . . . . . . . . . . . 118

3.5.3 Homogeneous Coordinates . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

3.6 Using GLUT and JOGL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

3.6.1 Using GLUT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

3.6.2 Using JOGL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

3.6.3 About glsim.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

4 OpenGL 1.1: Light and Material

135

4.1 Introduction to Lighting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

4.1.1 Light and Material . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

4.1.2 Light Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

4.1.3 Normal Vectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

CONTENTS

iii

4.1.4 The OpenGL 1.1 Lighting Equation . . . . . . . . . . . . . . . . . . . . . 141 4.2 Light and Material in OpenGL 1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . 144

4.2.1 Working with Material . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 4.2.2 Defining Normal Vectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 4.2.3 Working with Lights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 4.2.4 Global Lighting Properties . . . . . . . . . . . . . . . . . . . . . . . . . . 151 4.3 Image Textures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 4.3.1 Texture Coordinates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 4.3.2 MipMaps and Filtering . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 4.3.3 Texture Target and Texture Parameters . . . . . . . . . . . . . . . . . . . 158 4.3.4 Texture Transformation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 4.3.5 Loading a Texture from Memory . . . . . . . . . . . . . . . . . . . . . . . 160 4.3.6 Texture from Color Buffer . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 4.3.7 Texture Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 4.3.8 Loading Textures in C . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 4.3.9 Using Textures with JOGL . . . . . . . . . . . . . . . . . . . . . . . . . . 165 4.4 Lights, Camera, Action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 4.4.1 Attribute Stack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 4.4.2 Moving Camera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 4.4.3 Moving Light . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

5 Three.js: A 3D Scene Graph API

173

5.1 Three.js Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

5.1.1 About JavaScript Modules . . . . . . . . . . . . . . . . . . . . . . . . . . 174

5.1.2 Scene, Renderer, Camera . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

5.1.3 THREE.Object3D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

5.1.4 Object, Geometry, Material . . . . . . . . . . . . . . . . . . . . . . . . . . 179

5.1.5 Lights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

5.1.6 A Modeling Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

5.2 Building Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192

5.2.1 Polygonal Meshes and IFSs . . . . . . . . . . . . . . . . . . . . . . . . . . 192

5.2.2 Curves and Surfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

5.2.3 Textures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

5.2.4 Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

5.2.5 Loading Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

5.3 Other Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

5.3.1 Instanced Meshes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

5.3.2 User Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

5.3.3 Shadows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

5.3.4 Cubemap Textures and Skyboxes . . . . . . . . . . . . . . . . . . . . . . . 212

5.3.5 Reflection and Refraction . . . . . . . . . . . . . . . . . . . . . . . . . . . 213

6 Introduction to WebGL

217

6.1 The Programmable Pipeline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

6.1.1 The WebGL Graphics Context . . . . . . . . . . . . . . . . . . . . . . . . 218

6.1.2 The Shader Program . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

6.1.3 Data Flow in the Pipeline . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

6.1.4 Values for Uniform Variables . . . . . . . . . . . . . . . . . . . . . . . . . 224

CONTENTS

iv

6.1.5 Values for Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 6.1.6 Drawing a Primitive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 6.1.7 WebGL 2.0: Vertex Array Objects . . . . . . . . . . . . . . . . . . . . . . 229 6.1.8 WebGL 2.0: Instanced Drawing . . . . . . . . . . . . . . . . . . . . . . . . 230 6.2 First Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 6.2.1 WebGL Context Options . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 6.2.2 A Bit of GLSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 6.2.3 The RGB Triangle in WebGL . . . . . . . . . . . . . . . . . . . . . . . . . 233 6.2.4 Shape Stamper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 6.2.5 The POINTS Primitive . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 6.2.6 WebGL Error Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 6.3 GLSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 6.3.1 Basic Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 6.3.2 Data Structures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 6.3.3 Qualifiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 6.3.4 Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 6.3.5 Function Definitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 6.3.6 Control Structures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 6.3.7 Limits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 6.4 Image Textures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 6.4.1 Texture Units and Texture Objects . . . . . . . . . . . . . . . . . . . . . . 253 6.4.2 Working with Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 6.4.3 More Ways to Make Textures . . . . . . . . . . . . . . . . . . . . . . . . . 260 6.4.4 Cubemap Textures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 6.4.5 A Computational Example . . . . . . . . . . . . . . . . . . . . . . . . . . 265 6.4.6 Textures in WebGL 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 6.5 Implementing 2D Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 6.5.1 Transforms in GLSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 6.5.2 Transforms in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

7 3D Graphics with WebGL

275

7.1 Transformations in 3D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275

7.1.1 About Shader Scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275

7.1.2 Introducing glMatrix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

7.1.3 Transforming Coordinates . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

7.1.4 Transforming Normals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

7.1.5 Rotation by Mouse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

7.2 Lighting and Material . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

7.2.1 Minimal Lighting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

7.2.2 Specular Reflection and Phong Shading . . . . . . . . . . . . . . . . . . . 287

7.2.3 Adding Complexity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

7.2.4 Two-sided Lighting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292

7.2.5 Moving Lights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

7.2.6 Spotlights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295

7.2.7 Light Attenuation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

7.2.8 Diskworld 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298

7.3 Textures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

CONTENTS

v

7.3.1 Texture Transforms with glMatrix . . . . . . . . . . . . . . . . . . . . . . 299 7.3.2 Generated Texture Coordinates . . . . . . . . . . . . . . . . . . . . . . . . 300 7.3.3 Procedural Textures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302 7.3.4 Bumpmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305 7.3.5 Environment Mapping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 7.4 Framebuffers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 7.4.1 Framebuffer Operations . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312 7.4.2 Render To Texture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 7.4.3 Renderbuffers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 7.4.4 Dynamic Cubemap Textures . . . . . . . . . . . . . . . . . . . . . . . . . 317 7.5 WebGL Extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 7.5.1 Anisotropic Filtering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 7.5.2 Floating-Point Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322 7.5.3 Instanced Drawing in WebGL 1.0 . . . . . . . . . . . . . . . . . . . . . . . 325 7.5.4 Deferred Shading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325 7.5.5 Multiple Draw Buffers in WebGL 2.0 . . . . . . . . . . . . . . . . . . . . . 328

8 Beyond Basic 3D Graphics

331

8.1 Ray Tracing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331

8.1.1 Ray Casting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332

8.1.2 Recursive Ray Tracing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333

8.1.3 Limitations of Ray Tracing . . . . . . . . . . . . . . . . . . . . . . . . . . 335

8.2 Path Tracing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336

8.2.1 BSDF's . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

8.2.2 The Path Tracing Algorithm . . . . . . . . . . . . . . . . . . . . . . . . . 338

9 Introduction to WebGPU

341

9.1 WebGPU Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341

9.1.1 Adapter, Device, and Canvas . . . . . . . . . . . . . . . . . . . . . . . . . 342

9.1.2 Shader Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343

9.1.3 Render Pipeline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

9.1.4 Buffers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348

9.1.5 Drawing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350

9.1.6 Multiple Vertex Inputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351

9.1.7 Auto Bind Group Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . 353

9.2 Instances and Indices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353

9.2.1 Instanced Drawing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354

9.2.2 Indexed Drawing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356

9.2.3 Drawing Multiple Primitives . . . . . . . . . . . . . . . . . . . . . . . . . 358

9.2.4 Using Indices in Shaders . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360

9.2.5 Multisampling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361

9.3 WGSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362

9.3.1 Address Spaces and Alignment . . . . . . . . . . . . . . . . . . . . . . . . 362

9.3.2 Data Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365

9.3.3 Declarations and Annotations . . . . . . . . . . . . . . . . . . . . . . . . . 367

9.3.4 Expressions and Built-in Functions . . . . . . . . . . . . . . . . . . . . . . 368

9.3.5 Statements and Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369

9.3.6 Function Definitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370

CONTENTS

vi

9.4 3D Graphics With WebGPU . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371 9.4.1 The Depth Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372 9.4.2 Coordinate Systems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373 9.4.3 Into 3D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374 9.4.4 wgpu-matrix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376 9.4.5 Diskworld Yet Again . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378

9.5 Textures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380 9.5.1 Texture Coordinates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380 9.5.2 Textures and Samplers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382 9.5.3 Mipmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386 9.5.4 Cubemap Textures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387 9.5.5 Texture Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390

9.6 Compute Shaders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393 9.6.1 Workgroups and Dispatches . . . . . . . . . . . . . . . . . . . . . . . . . . 393 9.6.2 Compute Shaders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395 9.6.3 A Simulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399 9.6.4 Retrieving Output . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400

9.7 Some Details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402 9.7.1 Lost Device . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402 9.7.2 Error Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403 9.7.3 Limits and Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404 9.7.4 Render Pass Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405 9.7.5 Render Pipeline Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405

A Programming Languages

409

A.1 The Java Programming Language . . . . . . . . . . . . . . . . . . . . . . . . . . . 409

A.1.1 Basic Language Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . 410

A.1.2 Objects and Data Structures . . . . . . . . . . . . . . . . . . . . . . . . . 413

A.1.3 Windows and Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415

A.2 The C Programming Language . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

A.2.1 Language Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

A.2.2 Pointers and Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420

A.2.3 Data Structures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422

A.3 The JavaScript Programming Language . . . . . . . . . . . . . . . . . . . . . . . 424

A.3.1 The Core Language . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424

A.3.2 Arrays and Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429

A.3.3 JavaScript on Web Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . 432

A.3.4 Interacting with the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . 434

A.4 Promises and Async Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439

A.4.1 Async Functions and await . . . . . . . . . . . . . . . . . . . . . . . . . . 439

A.4.2 Using Promises Directly . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441

B Blender

443

B.1 Blender Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443

B.1.1 The 3D View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444

B.1.2 Adding Objects to the Scene . . . . . . . . . . . . . . . . . . . . . . . . . 446

B.1.3 Edit Mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448

B.1.4 Light, Material, and Texture . . . . . . . . . . . . . . . . . . . . . . . . . 448

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download