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

Appendix H. Web Browser Settings for WebGL

This appendix explains how to use advanced web browser settings to ensure that WebGL is displayed correctly and what to do if it isn’t.

If your graphics board isn’t compatible with WebGL, you may see the message shown in Figure H.1.

Figure H.1 Loading a WebGL application results in an error message

If this happens, you may still be able to get WebGL to work in your browser with a little bit of tweaking:

1. If you are using Chrome, start the browser with the option --ignore-gpu-blacklist. To specify this option, right-click the Chrome browser shortcut icon and select Properties from the menu. You’ll see ...