WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL [NOOK Book]


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, ...

See more details below
WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL

Available on NOOK devices and apps  
  • NOOK Devices
  • Samsung Galaxy Tab 4 NOOK 7.0
  • Samsung Galaxy Tab 4 NOOK 10.1
  • NOOK HD Tablet
  • NOOK HD+ Tablet
  • NOOK eReaders
  • NOOK Color
  • NOOK Tablet
  • Tablet/Phone
  • NOOK for Windows 8 Tablet
  • NOOK for iOS
  • NOOK for Android
  • NOOK Kids for iPad
  • PC/Mac
  • NOOK for Windows 8
  • NOOK for PC
  • NOOK for Mac

Want a NOOK? Explore Now

NOOK Book (eBook)
BN.com price
(Save 20%)$35.99 List Price


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.

Read More Show Less

Product Details

  • ISBN-13: 9780133364927
  • Publisher: Pearson Education
  • Publication date: 7/18/2013
  • Series: OpenGL
  • Sold by: Barnes & Noble
  • Format: eBook
  • Edition number: 1
  • Pages: 552
  • Sales rank: 1,163,412
  • File size: 49 MB
  • Note: This product may take a few minutes to download.

Meet the Author

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.

Read More Show Less

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

Read More Show Less

Customer Reviews

Be the first to write a review
( 0 )
Rating Distribution

5 Star


4 Star


3 Star


2 Star


1 Star


Your Rating:

Your Name: Create a Pen Name or

Barnes & Noble.com Review Rules

Our reader reviews allow you to share your comments on titles you liked, or didn't, with others. By submitting an online review, you are representing to Barnes & Noble.com that all information contained in your review is original and accurate in all respects, and that the submission of such content by you and the posting of such content by Barnes & Noble.com does not and will not violate the rights of any third party. Please follow the rules below to help ensure that your review can be posted.

Reviews by Our Customers Under the Age of 13

We highly value and respect everyone's opinion concerning the titles we offer. However, we cannot allow persons under the age of 13 to have accounts at BN.com or to post customer reviews. Please see our Terms of Use for more details.

What to exclude from your review:

Please do not write about reviews, commentary, or information posted on the product page. If you see any errors in the information on the product page, please send us an email.

Reviews should not contain any of the following:

  • - HTML tags, profanity, obscenities, vulgarities, or comments that defame anyone
  • - Time-sensitive information such as tour dates, signings, lectures, etc.
  • - Single-word reviews. Other people will read your review to discover why you liked or didn't like the title. Be descriptive.
  • - Comments focusing on the author or that may ruin the ending for others
  • - Phone numbers, addresses, URLs
  • - Pricing and availability information or alternative ordering information
  • - Advertisements or commercial solicitation


  • - By submitting a review, you grant to Barnes & Noble.com and its sublicensees the royalty-free, perpetual, irrevocable right and license to use the review in accordance with the Barnes & Noble.com Terms of Use.
  • - Barnes & Noble.com reserves the right not to post any review -- particularly those that do not follow the terms and conditions of these Rules. Barnes & Noble.com also reserves the right to remove any review at any time without notice.
  • - See Terms of Use for other conditions and disclaimers.
Search for Products You'd Like to Recommend

Recommend other products that relate to your review. Just search for them below and share!

Create a Pen Name

Your Pen Name is your unique identity on BN.com. It will appear on the reviews you write and other website activities. Your Pen Name cannot be edited, changed or deleted once submitted.

Your Pen Name can be any combination of alphanumeric characters (plus - and _), and must be at least two characters long.

Continue Anonymously

    If you find inappropriate content, please report it to Barnes & Noble
    Why is this product inappropriate?
    Comments (optional)