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 10. Advanced Techniques

This chapter includes a “grab-bag” of interesting techniques that you should find useful for creating your WebGL applications. The techniques are mostly stand-alone, so you can select and read any section that interests you. Where there are dependencies, they are clearly identified. The explanations in this chapter are terse in order to include as many techniques as possible. However, the sample programs on the website include comprehensive comments, so please refer to them as well.

Rotate an Object with the Mouse

When creating WebGL applications, sometimes you want users to be able to control 3D objects with the mouse. In this section, you construct a sample program RotateObject, which allows users to rotate ...