WebGL Programming Guide

Dr. Kouichi Matsuda has a broad background in user interface and user experience design and its application to novel multimedia products. His work has taken him from product development, through research, and back to development, having spent time at NEC, Sony Corporate Research, and Sony Computer Science Laboratories. He is currently a chief distinguished researcher focused on user experience and human computer interaction across a range of consumer electronics. He was the designer of the social 3D virtual world called “PAW” (personal agent-oriented virtual world), was involved in the development of the VRML97 (ISO/IEC 14772-1:1997) standard from the start, and has remained active in both VRML and X3D communities (precursors to WebGL). He has written 15 books on computer technologies and translated a further 25 into Japanese. His expertise covers user experiences, user interface, human computer interaction, natural language understanding, entertainment-oriented network services, and interface agent systems. Always on the lookout for new and exciting possibilities in the technology space, he combines his professional life with a love of hot springs, sea in summer, wines, and MANGA (at which he dabbles in drawing and illustrations). He received his Ph.D. (Engineering) from the Graduate School of Engineering, University of Tokyo. Dr. Rodger Lea is an adjunct professor with the Media and Graphics Interdisciplinary Centre at the University of British Columbia, with an interest in systems aspects of multimedia and distributed computing. With more than 20 years of experience leading research groups in both academic and industrial settings, he has worked on early versions of shared 3D worlds, helped define VRML97, developed multimedia operating systems, prototyped interactive digital TV, and led developments on multimedia home networking standards. He has published more than 60 research papers and three books, and he holds 12 patents. His current research explores the growing "Internet of Things," but he retains a passion for all things media and graphics.  

Preface     xvii

 

1. Overview of WebGL     1

Advantages of WebGL     3

   You Can Start Developing 3D Graphics Applications Using Only a Text Editor     3

   Publishing Your 3D Graphics Applications Is Easy     4

   You Can Leverage the Full Functionality of the Browser     5

   Learning and Using WebGL Is Easy     5

Origins of WebGL     5

Structure of WebGL Applications     6

Summary     7

 

2. Your First Step with WebGL     9

What Is a Canvas?     9

   Using the Tag     11

   DrawRectangle.js     13

The World’s Shortest WebGL Program: Clear Drawing Area     16

   The HTML File (HelloCanvas.html)      17

   JavaScript Program (HelloCanvas.js)      18

   Experimenting with the Sample Program      23

Draw a Point (Version 1)     23

   HelloPoint1.html     25

   HelloPoint1.js      25

   What Is a Shader?      27

   The Structure of a WebGL Program that Uses Shaders      28

   Initializing Shaders      30

   Vertex Shader      33

   Fragment Shader      35

   The Draw Operation      36

   The WebGL Coordinate System     38

   Experimenting with the Sample Program      40

Draw a Point (Version 2)      41

   Using Attribute Variables      41

   Sample Program (HelloPoint2.js)      42

   Getting the Storage Location of an Attribute Variable      44

   Assigning a Value to an Attribute Variable      45

   Family Methods of gl.vertexAttrib3f()      47

   Experimenting with the Sample Program      49

Draw a Point with a Mouse Click      50

   Sample Program (ClickedPoints.js)      50

   Register Event Handlers      52

   Handling Mouse Click Events      53

   Experimenting with the Sample Program      57

Change the Point Color      58

   Sample Program (ColoredPoints.js)      59

   Uniform Variables      61

   Retrieving the Storage Location of a Uniform Variable      62

   Assigning a Value to a Uniform Variable      63

   Family Methods of gl.uniform4f()      65

Summary      66

 

3. Drawing and Transforming Triangles     67

Drawing Multiple Points     68

   Sample Program (MultiPoint.js)      70

   Using Buffer Objects      72

   Create a Buffer Object (gl.createBuffer())      74

   Bind a Buffer Object to a Target (gl.bindBuffer())      75

   Write Data into a Buffer Object (gl.bufferData())      76

   Typed Arrays      78

   Assign the Buffer Object to an Attribute Variable (gl.vertexAttribPointer())     79

   Enable the Assignment to an Attribute Variable (gl.enableVertexAttribArray())      81

   The Second and Third Parameters of gl.drawArrays()      82

   Experimenting with the Sample Program      84

Hello Triangle      85

   Sample Program (HelloTriangle.js)      85

   Basic Shapes      87

   Experimenting with the Sample Program      89

   Hello Rectangle (HelloQuad)      89

   Experimenting with the Sample Program      91

Moving, Rotating, and Scaling      91

   Translation      92

   Sample Program (TranslatedTriangle.js)      93

   Rotation      96

   Sample Program (RotatedTriangle.js)      99

   Transformation Matrix: Rotation      102

   Transformation Matrix: Translation      105

   Rotation Matrix, Again      106

   Sample Program (RotatedTriangle_Matrix.js)      107

   Reusing the Same Approach for Translation      111

   Transformation Matrix: Scaling      111

Summary      113

 

4. More Transformations and Basic Animation     115

Translate and Then Rotate      115

   Transformation Matrix Library: cuon-matrix.js      116

   Sample Program (RotatedTriangle_Matrix4.js)      117

   Combining Multiple Transformation      119

   Sample Program (RotatedTranslatedTriangle.js)      121

   Experimenting with the Sample Program      123

Animation      124

   The Basics of Animation      125

   Sample Program (RotatingTriangle.js)      126

   Repeatedly Call the Drawing Function (tick())     129

   Draw a Triangle with the Specified Rotation Angle (draw())      130

   Request to Be Called Again (requestAnimationFrame())      131

   Update the Rotation Angle (animate())      133

   Experimenting with the Sample Program      135

Summary      136

 

5. Using Colors and Texture Images     137

Passing Other Types of Information to Vertex Shaders      137

   Sample Program (MultiAttributeSize.js)      139

   Create Multiple Buffer Objects      140

   The gl.vertexAttribPointer() Stride and Offset Parameters      141

   Sample Program (MultiAttributeSize_Interleaved.js)      142

   Modifying the Color (Varying Variable)     146

   Sample Program (MultiAttributeColor.js)      147

   Experimenting with the Sample Program      150

Color Triangle (ColoredTriangle.js)      151

   Geometric Shape Assembly and Rasterization      151

   Fragment Shader Invocations      155

   Experimenting with the Sample Program      156

   Functionality of Varying Variables and the Interpolation Process      157

Pasting an Image onto a Rectangle      160

   Texture Coordinates      162

   Pasting Texture Images onto the Geometric Shape      162

   Sample Program (TexturedQuad.js)      163

   Using Texture Coordinates (initVertexBuffers())      166

   Setting Up and Loading Images (initTextures())      166

   Make the Texture Ready to Use in the WebGL System (loadTexture())      170

   Flip an Image’s Y-Axis      170

   Making a Texture Unit Active (gl.activeTexture())      171

   Binding a Texture Object to a Target (gl.bindTexture())      173

   Set the Texture Parameters of a Texture Object (gl.texParameteri())      174

   Assigning a Texture Image to a Texture Object (gl.texImage2D())      177

   Pass the Texture Unit to the Fragment Shader (gl.uniform1i())      179

   Passing Texture Coordinates from the Vertex Shader to the Fragment Shader      180

   Retrieve the Texel Color in a Fragment Shader (texture2D())      181

   Experimenting with the Sample Program      182

Pasting Multiple Textures to a Shape      183

   Sample Program (MultiTexture.js)      184

Summary      189

 

6. The OpenGL ES Shading Language (GLSL ES)     191

Recap of Basic Shader Programs      191

Overview of GLSL ES      192

Hello Shader!      193

   Basics      193

   Order of Execution      193

   Comments      193

Data (Numerical and Boolean Values)      194

Variables      194

GLSL ES Is a Type Sensitive Language      195

Basic Types      195

   Assignment and Type Conversion      196

   Operations      197

Vector Types and Matrix Types      198

   Assignments and Constructors      199

   Access to Components      201

   Operations      204

Structures      207

   Assignments and Constructors      207

   Access to Members      207

   Operations      208

Arrays      208

Samplers      209

Precedence of Operators      210

Conditional Control Flow and Iteration      211

   if Statement and if-else Statement      211

   for Statement      211

   continue, break, discard Statements      212

Functions      213

   Prototype Declarations      214

   Parameter Qualifiers      214

Built-In Functions      215

Global Variables and Local Variables      216

Storage Qualifiers      217

   const Variables      217

   Attribute Variables     218

   Uniform Variables      218

   Varying Variables      219

Precision Qualifiers      219

Preprocessor Directives      221

Summary      223

 

7. Toward the 3D World     225

What’s Good for Triangles Is Good for Cubes      225

Specifying the Viewing Direction       226

   Eye Point, Look-At Point, and Up Direction      227

   Sample Program (LookAtTriangles.js)      229

   Comparing LookAtTriangles.js with RotatedTriangle_Matrix4.js      232

   Looking at Rotated Triangles from a Specified Position      234

   Sample Program (LookAtRotatedTriangles.js)      235

   Experimenting with the Sample Program      236

   Changing the Eye Point Using the Keyboard      238

   Sample Program (LookAtTrianglesWithKeys.js)      238

   Missing Parts      241

Specifying the Visible Range (Box Type)      241

   Specify the Viewing Volume      242

   Defining a Box-Shaped Viewing Volume      243

   Sample Program (OrthoView.html)      245

   Sample Program (OrthoView.js)      246

   Modifying an HTML Element Using JavaScript      247

   The Processing Flow of the Vertex Shader      248

   Changing Near or Far      250

   Restoring the Clipped Parts of the Triangles (LookAtTrianglesWithKeys_ViewVolume.js)     251

   Experimenting with the Sample Program      253

Specifying the Visible Range Using a Quadrangular Pyramid      254

   Setting the Quadrangular Pyramid Viewing Volume      256

   Sample Program (PerspectiveView.js)      258

   The Role of the Projection Matrix      260

   Using All the Matrices (Model Matrix, View Matrix, and Projection Matrix) ......262

   Sample Program (PerspectiveView_mvp.js)      263

   Experimenting with the Sample Program      266

Correctly Handling Foreground and Background Objects      267

   Hidden Surface Removal      270

   Sample Program (DepthBuffer.js)      272

   Z Fighting      273

Hello Cube      275

   Drawing the Object with Indices and Vertices Coordinates      277

   Sample Program (HelloCube.js)      278

   Writing Vertex Coordinates, Colors, and Indices to the Buffer Object      281

   Adding Color to Each Face of a Cube      284

   Sample Program (ColoredCube.js)      285

   Experimenting with the Sample Program      287

Summary      289

 

8. Lighting Objects     291

Lighting 3D Objects      291

   Types of Light Source      293

   Types of Reflected Light      294

   Shading Due to Directional Light and Its Diffuse Reflection      296

   Calculating Diffuse Reflection Using the Light Direction and the Orientation of a Surface     297

   The Orientation of a Surface: What Is the Normal?      299

   Sample Program (LightedCube.js)      302

   Add Shading Due to Ambient Light      307

   Sample Program (LightedCube_ambient.js)      308

Lighting the Translated-Rotated Object      310

   The Magic Matrix: Inverse Transpose Matrix      311

   Sample Program (LightedTranslatedRotatedCube.js)      312

Using a Point Light Object      314

   Sample Program (PointLightedCube.js)      315

   More Realistic Shading: Calculating the Color per Fragment      319

   Sample Program (PointLightedCube_perFragment.js)      319

Summary      321

 

9. Hierarchical Objects     323

Drawing and Manipulating Objects Composed of Other Objects      324

   Hierarchical Structure     325

   Single Joint Model      326

   Sample Program (JointModel.js)      328

   Draw the Hierarchical Structure (draw())      332

   A Multijoint Model      334

   Sample Program (MultiJointModel.js)      335

   Draw Segments (drawBox())      339

   Draw Segments (drawSegment())      340

Shader and Program Objects: The Role of initShaders()      344

   Create Shader Objects (gl.createShader())      345

   Store the Shader Source Code in the Shader Objects (g.shaderSource())     346

   Compile Shader Objects (gl.compileShader())      347

   Create a Program Object (gl.createProgram())      349

   Attach the Shader Objects to the Program Object (gl.attachShader())      350

   Link the Program Object (gl.linkProgram())      351

   Tell the WebGL System Which Program Object to Use (gl.useProgram())      353

   The Program Flow of initShaders()      353

Summary      356

 

10. Advanced Techniques     357

Rotate an Object with the Mouse      357

   How to Implement Object Rotation      358

   Sample Program (RotateObject.js)      358

Select an Object      360

   How to Implement Object Selection      361

   Sample Program (PickObject.js)      362

   Select the Face of the Object      365

   Sample Program (PickFace.js)      366

HUD (Head Up Display)      368

   How to Implement a HUD     369

   Sample Program (HUD.html)      369

   Sample Program (HUD.js)      370

   Display a 3D Object on a Web Page (3DoverWeb)      372

Fog (Atmospheric Effect)      372

   How to Implement Fog      373

   Sample Program (Fog.js)      374

   Use the w Value (Fog_w.js)      376

Make a Rounded Point      377

   How to Implement a Rounded Point      377

   Sample Program (RoundedPoints.js)      378

Alpha Blending      380

   How to Implement Alpha Blending      380

   Sample Program (LookAtBlendedTriangles.js)      381

   Blending Function      382

   Alpha Blend 3D Objects (BlendedCube.js)      384

   How to Draw When Alpha Values Coexist      385

Switching Shaders      386

   How to Implement Switching Shaders      387

   Sample Program (ProgramObject.js)      387

Use What You’ve Drawn as a Texture Image      392

   Framebuffer Object and Renderbuffer Object      392

   How to Implement Using a Drawn Object as a Texture      394

   Sample Program (FramebufferObjectj.js)      395

   Create Frame Buffer Object (gl.createFramebuffer())      397

   Create Texture Object and Set Its Size and Parameters      397

   Create Renderbuffer Object (gl.createRenderbuffer())      398

   Bind Renderbuffer Object to Target and Set Size (gl.bindRenderbuffer(),  gl.renderbufferStorage())     399

   Set Texture Object to Framebuffer Object (gl.bindFramebuffer(), gl.framebufferTexture2D())     400

   Set Renderbuffer Object to Framebuffer Object (gl.framebufferRenderbuffer())     401

   Check Configuration of Framebuffer Object (gl.checkFramebufferStatus())      402

   Draw Using the Framebuffer Object      403

Display Shadows      405

   How to Implement Shadows      405

   Sample Program (Shadow.js)      406

   Increasing Precision      412

   Sample Program (Shadow_highp.js)      413

Load and Display 3D Models      414

   The OBJ File Format      417

   The MTL File Format      418

   Sample Program (OBJViewer.js)      419

   User-Defined Object      422

   Sample Program (Parser Code in OBJViewer.js)      423

Handling Lost Context      430

   How to Implement Handling Lost Context      431

   Sample Program (RotatingTriangle_contextLost.js)      432

Summary      434

 

A. No Need to Swap Buffers in WebGL     437

 

B. Built-in Functions of GLSL ES 1.0     441

Angle and Trigonometry Functions      441

Exponential Functions      443

Common Functions      444

Geometric Functions      447

Matrix Functions      448

Vector Functions      449

Texture Lookup Functions      451

 

C. Projection Matrices     453

Orthogonal Projection Matrix      453

Perspective Projection Matrix      453

 

D. WebGL/OpenGL: Left or Right Handed?     455

Sample Program CoordinateSystem.js      456

Hidden Surface Removal and the Clip Coordinate System      459

The Clip Coordinate System and the Viewing Volume     460

What Is Correct?      462

Summary      464

 

E. The Inverse Transpose Matrix     465

 

F. Load Shader Programs from Files     471

 

G. World Coordinate System Versus Local Coordinate System     473

The Local Coordinate System      474

The World Coordinate System      475

Transformations and the Coordinate Systems     477

 

H. Web Browser Settings for WebGL     479

Glossary     481

References      485

Index     487