Home > Store

WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL

Register your product to gain access to bonus material or receive a coupon.

WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL

Book

  • Sorry, this book is no longer in print.
Not for Sale

About

Features

  • Breakthrough 3D programming techniques for tomorrow’s web games, user interfaces, and information visualization applications
  • 100+ recipes demonstrate and explain basic to advanced tasks: complete code library jumpstarts your own projects
  • Part of AW’s official OpenGL series: co-written by a member of Khronos’s official WebGL team

Description

  • Copyright 2014
  • Dimensions: 7" x 9-1/8"
  • Pages: 552
  • Edition: 1st
  • Book
  • ISBN-10: 0-321-90292-0
  • ISBN-13: 978-0-321-90292-4

Using WebGL®, you can create sophisticated interactive 3D graphics inside web browsers, without plug-ins. WebGL makes it possible to build a new generation of 3D web games, user interfaces, and information visualization solutions that will run on any standard web browser, and on PCs, smartphones, tablets, game consoles, or other devices. WebGL Programming Guide will help you get started quickly with interactive WebGL 3D programming, even if you have no prior knowledge of HTML5, JavaScript, 3D graphics, mathematics, or OpenGL.

You’ll learn step-by-step, through realistic examples, building your skills as you move from simple to complex solutions for building visually appealing web pages and 3D applications with WebGL. Media, 3D graphics, and WebGL pioneers Dr. Kouichi Matsuda and Dr. Rodger Lea offer easy-to-understand tutorials on key aspects of WebGL, plus 100 downloadable sample programs, each demonstrating a specific WebGL topic.

You’ll move from basic techniques such as rendering, animating, and texturing triangles, all the way to advanced techniques such as fogging, shadowing, shader switching, and displaying 3D models generated by Blender or other authoring tools. This book won’t just teach you WebGL best practices, it will give you a library of code to jumpstart your own projects.

Coverage includes:

• WebGL’s origin, core concepts, features, advantages, and integration with other web standards
• How <canvas> and basic WebGL functions work together to deliver 3D graphics
• Shader development with OpenGL ES Shading Language (GLSL ES)
• 3D scene drawing: representing user views, controlling space volume, clipping, object creation, and perspective
• Achieving greater realism through lighting and hierarchical objects
• Advanced techniques: object manipulation, heads-up displays, alpha blending, shader switching, and more
• Valuable reference appendixes covering key issues ranging from coordinate systems to matrices and shader loading to web browser settings

This is the newest text in the OpenGL Technical Library, Addison-Wesley’s definitive collection of programming guides an reference manuals for OpenGL and its related technologies. The Library enables programmers to gain a practical understanding of OpenGL and the other Khronos application-programming libraries including OpenGL ES and OpenCL. All of the technologies in the OpenGL Technical Library evolve under the auspices of the Khronos Group, the industry consortium guiding the evolution of modern, open-standards media APIs.

Downloads

Source Code

Access the Source Code Files from the author's web site.

Sample Content

Online Sample Chapter

Drawing and Transforming Triangles in WebGL

Sample Pages

Download the sample pages (includes Chapter 3 and Index)

Table of Contents

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 <canvas> 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

More Information

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020