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 7. Toward the 3D World

In the previous chapters, we used examples based on 2D geometrical shapes to explain how the WebGL system works and how it supports the behavior of shaders, transformations such as translation and rotation, animation, and texture mapping. However, the techniques you’ve learned so far can be applied not only to 2D shapes but also to 3D objects. In this chapter you’ll take the first step into the 3D world and explore the implications of moving from 2D to 3D. In particular, you will explore:

• Representing the user’s view into the 3D world

• Controlling the volume of 3D space that is viewed

• Clipping

• Handling foreground and background objects

• Drawing a 3D object (a cube)

All these issues have a significant impact ...