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 6. The OpenGL ES Shading Language (GLSL ES)

This chapter takes a break from examining WebGL sample programs and explains the essential features of the OpenGL ES Shading Language (GLSL ES) in detail.

As you have seen, shaders are the core mechanism within WebGL for constructing 3DCG programs, and GLSL ES is the dedicated programming language for writing those shader programs. This chapter covers:

• Data, variables, and variable types

• Vector, matrix, structure, array, and sampler types

• Operators, control flow, and functions

• Attributes, uniform, and varying variables

• Precision qualifiers

• Preprocessor and directives

By the end of this chapter, you will have a good understanding of GLSL ES and how to use it to write a variety of ...