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     1Advantages of WebGL     3You Can Start Developing 3D Graphics Applications Using Only a Text Editor     3Publishing Your 3D Graphics Applications Is Easy     4 You Can Leverage the Full Functionality of the Browser     5Learning and Using WebGL Is Easy     5Origins of WebGL     5Structure of WebGL Applications     6Summary     7  2. Your First Step with WebGL     9What Is a Canvas?     9Using the Tag     11DrawRectangle.js     13The World’s Shortest WebGL Program: Clear Drawing Area     16The HTML File (HelloCanvas.html)      17JavaScript Program (HelloCanvas.js)      18Experimenting with the Sample Program      23Draw a Point (Version 1)     23HelloPoint1.html     25HelloPoint1.js      25What Is a Shader?      27The Structure of a WebGL Program that Uses Shaders      28Initializing Shaders      30Vertex Shader      33Fragment Shader      35The Draw Operation      36The WebGL Coordinate System     38Experimenting with the Sample Program      40Draw a Point (Version 2)      41Using Attribute Variables      41Sample Program (HelloPoint2.js)      42Getting the Storage Location of an Attribute Variable      44Assigning a Value to an Attribute Variable      45Family Methods of gl.vertexAttrib3f()      47Experimenting with the Sample Program      49Draw a Point with a Mouse Click      50Sample Program (ClickedPoints.js)      50Register Event Handlers      52Handling Mouse Click Events      53Experimenting with the Sample Program      57Change the Point Color      58Sample Program (ColoredPoints.js)      59Uniform Variables      61Retrieving the Storage Location of a Uniform Variable      62Assigning a Value to a Uniform Variable      63Family Methods of gl.uniform4f()      65Summary      66  3. Drawing and Transforming Triangles     67Drawing Multiple Points     68Sample Program (MultiPoint.js)      70Using Buffer Objects      72Create a Buffer Object (gl.createBuffer())      74Bind a Buffer Object to a Target (gl.bindBuffer())      75Write Data into a Buffer Object (gl.bufferData())      76Typed Arrays      78Assign the Buffer Object to an Attribute Variable (gl.vertexAttribPointer())     79Enable the Assignment to an Attribute Variable (gl.enableVertexAttribArray())      81The Second and Third Parameters of gl.drawArrays()      82Experimenting with the Sample Program      84Hello Triangle      85Sample Program (HelloTriangle.js)      85Basic Shapes      87Experimenting with the Sample Program      89Hello Rectangle (HelloQuad)      89Experimenting with the Sample Program      91Moving, Rotating, and Scaling      91Translation      92Sample Program (TranslatedTriangle.js)      93Rotation      96Sample Program (RotatedTriangle.js)      99Transformation Matrix: Rotation      102Transformation Matrix: Translation      105Rotation Matrix, Again      106Sample Program (RotatedTriangle_Matrix.js)      107Reusing the Same Approach for Translation      111Transformation Matrix: Scaling      111Summary      113  4. More Transformations and Basic Animation     115Translate and Then Rotate      115Transformation Matrix Library: cuon-matrix.js      116Sample Program (RotatedTriangle_Matrix4.js)      117Combining Multiple Transformation      119Sample Program (RotatedTranslatedTriangle.js)      121Experimenting with the Sample Program      123Animation      124The Basics of Animation      125Sample Program (RotatingTriangle.js)      126Repeatedly Call the Drawing Function (tick())     129Draw a Triangle with the Specified Rotation Angle (draw())      130Request to Be Called Again (requestAnimationFrame())      131Update the Rotation Angle (animate())      133Experimenting with the Sample Program      135Summary      136  5. Using Colors and Texture Images     137Passing Other Types of Information to Vertex Shaders      137Sample Program (MultiAttributeSize.js)      139Create Multiple Buffer Objects      140The gl.vertexAttribPointer() Stride and Offset Parameters      141Sample Program (MultiAttributeSize_Interleaved.js)      142Modifying the Color (Varying Variable)     146Sample Program (MultiAttributeColor.js)      147Experimenting with the Sample Program      150Color Triangle (ColoredTriangle.js)      151Geometric Shape Assembly and Rasterization      151Fragment Shader Invocations      155Experimenting with the Sample Program      156Functionality of Varying Variables and the Interpolation Process      157Pasting an Image onto a Rectangle      160Texture Coordinates      162Pasting Texture Images onto the Geometric Shape      162Sample Program (TexturedQuad.js)      163Using Texture Coordinates (initVertexBuffers())      166Setting Up and Loading Images (initTextures())      166Make the Texture Ready to Use in the WebGL System (loadTexture())      170Flip an Image’s Y-Axis      170Making a Texture Unit Active (gl.activeTexture())      171Binding a Texture Object to a Target (gl.bindTexture())      173Set the Texture Parameters of a Texture Object (gl.texParameteri())      174Assigning a Texture Image to a Texture Object (gl.texImage2D())      177Pass the Texture Unit to the Fragment Shader (gl.uniform1i())      179Passing Texture Coordinates from the Vertex Shader to the Fragment Shader      180Retrieve the Texel Color in a Fragment Shader (texture2D())      181Experimenting with the Sample Program      182Pasting Multiple Textures to a Shape      183Sample Program (MultiTexture.js)      184Summary      189  6. The OpenGL ES Shading Language (GLSL ES)     191Recap of Basic Shader Programs      191Overview of GLSL ES      192Hello Shader!      193Basics      193Order of Execution      193Comments      193Data (Numerical and Boolean Values)      194Variables      194GLSL ES Is a Type Sensitive Language      195Basic Types      195Assignment and Type Conversion      196Operations      197Vector Types and Matrix Types      198Assignments and Constructors      199Access to Components      201Operations      204Structures      207Assignments and Constructors      207Access to Members      207Operations      208Arrays      208Samplers      209Precedence of Operators      210Conditional Control Flow and Iteration      211if Statement and if-else Statement      211for Statement      211continue, break, discard Statements      212Functions      213Prototype Declarations      214Parameter Qualifiers      214Built-In Functions      215Global Variables and Local Variables      216Storage Qualifiers      217const Variables      217Attribute Variables     218Uniform Variables      218Varying Variables      219Precision Qualifiers      219Preprocessor Directives      221Summary      223  7. Toward the 3D World     225What’s Good for Triangles Is Good for Cubes      225Specifying the Viewing Direction       226Eye Point, Look-At Point, and Up Direction      227Sample Program (LookAtTriangles.js)      229Comparing LookAtTriangles.js with RotatedTriangle_Matrix4.js      232Looking at Rotated Triangles from a Specified Position      234Sample Program (LookAtRotatedTriangles.js)      235Experimenting with the Sample Program      236Changing the Eye Point Using the Keyboard      238Sample Program (LookAtTrianglesWithKeys.js)      238Missing Parts      241Specifying the Visible Range (Box Type)      241Specify the Viewing Volume      242Defining a Box-Shaped Viewing Volume      243Sample Program (OrthoView.html)      245Sample Program (OrthoView.js)      246Modifying an HTML Element Using JavaScript      247The Processing Flow of the Vertex Shader      248Changing Near or Far      250Restoring the Clipped Parts of the Triangles (LookAtTrianglesWithKeys_ViewVolume.js)     251Experimenting with the Sample Program      253Specifying the Visible Range Using a Quadrangular Pyramid      254Setting the Quadrangular Pyramid Viewing Volume      256Sample Program (PerspectiveView.js)      258The Role of the Projection Matrix      260Using All the Matrices (Model Matrix, View Matrix, and Projection Matrix) ......262Sample Program (PerspectiveView_mvp.js)      263Experimenting with the Sample Program      266Correctly Handling Foreground and Background Objects      267Hidden Surface Removal      270Sample Program (DepthBuffer.js)      272Z Fighting      273Hello Cube      275Drawing the Object with Indices and Vertices Coordinates      277Sample Program (HelloCube.js)      278Writing Vertex Coordinates, Colors, and Indices to the Buffer Object      281Adding Color to Each Face of a Cube      284Sample Program (ColoredCube.js)      285Experimenting with the Sample Program      287Summary      289  8. Lighting Objects     291Lighting 3D Objects      291Types of Light Source      293Types of Reflected Light      294Shading Due to Directional Light and Its Diffuse Reflection      296Calculating Diffuse Reflection Using the Light Direction and the Orientation of a Surface     297The Orientation of a Surface: What Is the Normal?      299Sample Program (LightedCube.js)      302Add Shading Due to Ambient Light      307Sample Program (LightedCube_ambient.js)      308Lighting the Translated-Rotated Object      310The Magic Matrix: Inverse Transpose Matrix      311Sample Program (LightedTranslatedRotatedCube.js)      312Using a Point Light Object      314Sample Program (PointLightedCube.js)      315More Realistic Shading: Calculating the Color per Fragment      319Sample Program (PointLightedCube_perFragment.js)      319Summary      321  9. Hierarchical Objects     323 Drawing and Manipulating Objects Composed of Other Objects      324Hierarchical Structure     325Single Joint Model      326Sample Program (JointModel.js)      328Draw the Hierarchical Structure (draw())      332A Multijoint Model      334Sample Program (MultiJointModel.js)      335Draw Segments (drawBox())      339Draw Segments (drawSegment())      340Shader and Program Objects: The Role of initShaders()      344Create Shader Objects (gl.createShader())      345Store the Shader Source Code in the Shader Objects (g.shaderSource())     346Compile Shader Objects (gl.compileShader())      347Create a Program Object (gl.createProgram())      349Attach the Shader Objects to the Program Object (gl.attachShader())      350Link the Program Object (gl.linkProgram())      351Tell the WebGL System Which Program Object to Use (gl.useProgram())      353The Program Flow of initShaders()      353Summary      356  10. Advanced Techniques     357Rotate an Object with the Mouse      357How to Implement Object Rotation      358Sample Program (RotateObject.js)      358Select an Object      360How to Implement Object Selection      361Sample Program (PickObject.js)      362Select the Face of the Object      365Sample Program (PickFace.js)      366HUD (Head Up Display)      368How to Implement a HUD     369Sample Program (HUD.html)      369Sample Program (HUD.js)      370Display a 3D Object on a Web Page (3DoverWeb)      372Fog (Atmospheric Effect)      372How to Implement Fog      373Sample Program (Fog.js)      374Use the w Value (Fog_w.js)      376Make a Rounded Point      377How to Implement a Rounded Point      377Sample Program (RoundedPoints.js)      378Alpha Blending      380How to Implement Alpha Blending      380Sample Program (LookAtBlendedTriangles.js)      381Blending Function      382Alpha Blend 3D Objects (BlendedCube.js)      384How to Draw When Alpha Values Coexist      385Switching Shaders      386How to Implement Switching Shaders      387Sample Program (ProgramObject.js)      387Use What You’ve Drawn as a Texture Image      392Framebuffer Object and Renderbuffer Object      392How to Implement Using a Drawn Object as a Texture      394Sample Program (FramebufferObjectj.js)      395Create Frame Buffer Object (gl.createFramebuffer())      397Create Texture Object and Set Its Size and Parameters      397Create Renderbuffer Object (gl.createRenderbuffer())      398Bind Renderbuffer Object to Target and Set Size (gl.bindRenderbuffer(),  gl.renderbufferStorage())     399Set Texture Object to Framebuffer Object (gl.bindFramebuffer(), gl.framebufferTexture2D())     400Set Renderbuffer Object to Framebuffer Object (gl.framebufferRenderbuffer())     401Check Configuration of Framebuffer Object (gl.checkFramebufferStatus())      402Draw Using the Framebuffer Object      403Display Shadows      405How to Implement Shadows      405Sample Program (Shadow.js)      406Increasing Precision      412Sample Program (Shadow_highp.js)      413Load and Display 3D Models      414The OBJ File Format      417The MTL File Format      418Sample Program (OBJViewer.js)      419User-Defined Object      422Sample Program (Parser Code in OBJViewer.js)      423Handling Lost Context      430How to Implement Handling Lost Context      431Sample Program (RotatingTriangle_contextLost.js)      432Summary      434  A. No Need to Swap Buffers in WebGL     437  B. Built-in Functions of GLSL ES 1.0     441Angle and Trigonometry Functions      441Exponential Functions      443Common Functions      444Geometric Functions      447Matrix Functions      448Vector Functions      449Texture Lookup Functions      451  C. Projection Matrices     453Orthogonal Projection Matrix      453Perspective Projection Matrix      453  D. WebGL/OpenGL: Left or Right Handed?     455Sample Program CoordinateSystem.js      456Hidden Surface Removal and the Clip Coordinate System      459The Clip Coordinate System and the Viewing Volume     460What Is Correct?      462Summary      464  E. The Inverse Transpose Matrix     465  F. Load Shader Programs from Files     471  G. World Coordinate System Versus Local Coordinate System     473The Local Coordinate System      474The World Coordinate System      475Transformations and the Coordinate Systems     477  H. Web Browser Settings for WebGL     479Glossary     481References      485Index     487