book

WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL

by Kouichi Matsuda, Rodger Lea

July 2013

Intermediate to advanced

600 pages

15h 15m

English

Addison-Wesley Professional

Read now

Unlock full access

Who the Book Is ForWhat the Book CoversHow the Book Is StructuredWebGL-Enabled BrowsersSample Programs and Related LinksStyle Conventions
Advantages of WebGLOrigins of WebGLStructure of WebGL ApplicationsSummary
What Is a Canvas?The World’s Shortest WebGL Program: Clear Drawing AreaDraw a Point (Version 1)Draw a Point (Version 2)Draw a Point with a Mouse ClickChange the Point ColorSummary

Drawing Multiple PointsHello TriangleMoving, Rotating, and ScalingSummary
Translate and Then RotateAnimationSummary
Passing Other Types of Information to Vertex ShadersExperimenting with the Sample ProgramColor Triangle (ColoredTriangle.js)Pasting an Image onto a RectanglePasting Multiple Textures to a ShapeSummary
Recap of Basic Shader ProgramsOverview of GLSL ESHello Shader!Data (Numerical and Boolean Values)VariablesGLSL ES Is a Type Sensitive LanguageBasic TypesVector Types and Matrix TypesStructuresArraysSamplersPrecedence of OperatorsConditional Control Flow and IterationFunctionsBuilt-In FunctionsGlobal Variables and Local VariablesStorage QualifiersPreprocessor DirectivesSummary
What’s Good for Triangles Is Good for CubesSpecifying the Viewing DirectionSample Program (LookAtRotatedTriangles.js)Experimenting with the Sample ProgramSpecifying the Visible Range (Box Type)Specifying the Visible Range Using a Quadrangular PyramidSample Program (PerspectiveView_mvp.js)Correctly Handling Foreground and Background ObjectsHello CubeSummary
Lighting 3D ObjectsLighting the Translated-Rotated ObjectUsing a Point Light ObjectSummary
Drawing and Manipulating Objects Composed of Other ObjectsShader and Program Objects: The Role of initShaders()Summary
Rotate an Object with the MouseSelect an ObjectHUD (Head Up Display)Fog (Atmospheric Effect)Make a Rounded PointAlpha BlendingSwitching ShadersUse What You’ve Drawn as a Texture ImageDisplay ShadowsLoad and Display 3D ModelsHandling Lost ContextSummary
Angle and Trigonometry FunctionsExponential FunctionsCommon FunctionsGeometric FunctionsMatrix FunctionsVector FunctionsTexture Lookup Functions
Orthogonal Projection MatrixPerspective Projection Matrix
Sample Program CoordinateSystem.jsHidden Surface Removal and the Clip Coordinate SystemThe Clip Coordinate System and the Viewing VolumeWhat Is Correct?Summary
The Local Coordinate SystemThe World Coordinate SystemTransformations and the Coordinate Systems

Content preview from WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL

Chapter 2. Your First Step with WebGL

As explained in Chapter 1, “Overview of WebGL,” WebGL applications use both HTML and JavaScript to create and draw 3D graphics on the screen. To do this, WebGL utilizes the new <canvas> element, introduced in HTML5, which defines a drawing area on a web page. Without WebGL, the <canvas> element only allows you to draw two-dimensional graphics using JavaScript. With WebGL, you can use the same element for drawing three-dimensional graphics.

This chapter explains the <canvas> element and the core functions of WebGL by taking you, step-by-step, through the construction of several example programs. Each example is written in JavaScript and uses WebGL to display and interact with a simple shape on a web page. ...