WebGL Beginner's Guide电子书

WebGL Beginner's Guide

Table of Contents

WebGL Beginner's Guide

Credits

About the Authors

Acknowledgement

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Time for action – heading

What just happened?

Have a go hero – heading

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Getting Started with WebGL

System requirements

What kind of rendering does WebGL offer?

Structure of a WebGL application

Creating an HTML5 canvas

Time for action – creating an HTML5 canvas

What just happened?

Defining a CSS style for the border

Understanding canvas attributes

What if the canvas is not supported?

Accessing a WebGL context

Time for action – accessing the WebGL context

What just happened?

WebGL is a state machine

Time for action – setting up WebGL context attributes

What just happened?

Using the context to access the WebGL API

Loading a 3D scene

Virtual car showroom

Time for action – visualizing a finished scene

What just happened?

Summary

2. Rendering Geometry

Vertices and Indices

Overview of WebGL's rendering pipeline

Vertex Buffer Objects (VBOs)

Vertex shader

Fragment shader

Framebuffer

Attributes, uniforms, and varyings

Rendering geometry in WebGL

Defining a geometry using JavaScript arrays

Creating WebGL buffers

Operations to manipulate WebGL buffers

Associating attributes to VBOs

Binding a VBO

Pointing an attribute to the currently bound VBO

Enabling the attribute

Rendering

The drawArrays and drawElements functions

Using drawArrays

Using drawElements

Putting everything together

Time for action – rendering a square

What just happened?

Have a go hero – changing the square color

Rendering modes

Time for action – rendering modes

What just happened?

WebGL as a state machine: buffer manipulation

Time for action – enquiring on the state of buffers

What just happened?

Have a go hero – add one validation

Advanced geometry loading techniques: JavaScript Object Notation (JSON) and AJAX

Introduction to JSON – JavaScript Object Notation

Defining JSON-based 3D models

JSON encoding and decoding

Time for action – JSON encoding and decoding

What just happened?

Asynchronous loading with AJAX

Setting up a web server

Working around the web server requirement

Time for action – loading a cone with AJAX + JSON

What just happened?

Have a go hero – loading a Nissan GTX

Summary

3. Lights!

Lights, normals, and materials

Lights

Normals

Materials

Using lights, normals, and materials in the pipeline

Parallelism and the difference between attributes and uniforms

Shading methods and light reflection models

Shading/interpolation methods

Goraud interpolation

Phong interpolation

Light reflection models

Lambertian reflection model

Phong reflection model

ESSL—OpenGL ES Shading Language

Storage qualifier

Types

Vector components

Operators and functions

Vertex attributes

Uniforms

Varyings

Vertex shader

Fragment shader

Writing ESSL programs

Goraud shading with Lambertian reflections

Time for action – updating uniforms in real time

What just happened?

Have a go hero – moving light

Goraud shading with Phong reflections

Time for action – Goraud shading

What just happened?

Phong shading

Time for action – Phong shading with Phong lighting

What just happened?

Back to WebGL

Creating a program

Initializing attributes and uniforms

Bridging the gap between WebGL and ESSL

Time for action – working on the wall

What just happened?

More on lights: positional lights

Time for action – positional lights in action

What just happened?

Nissan GTS example

Summary

4. Camera

WebGL does not have cameras

Vertex transformations

Homogeneous coordinates

Model transform

View transform

Projection transform

Perspective division

Viewport transform

Normal transformations

Calculating the Normal matrix

WebGL implementation

JavaScript matrices

Mapping JavaScript matrices to ESSL uniforms

Working with matrices in ESSL

The Model-View matrix

Spatial encoding of the world

Rotation matrix

Translation vector

The mysterious fourth row

The Camera matrix

Camera translation

Time for action – exploring translations: world space versus camera space

What just happened?

Camera rotation

Time for action – exploring rotations: world space versus camera space

What just happened?

Have a go hero – combining rotations and translations

The Camera matrix is the inverse of the Model-View matrix

Thinking about matrix multiplications in WebGL

Basic camera types

Orbiting camera

Tracking camera

Rotating the camera around its location

Translating the camera in the line of sight

Camera model

Time for action – exploring the Nissan GTX

What just happened?

Have a go hero – updating light positions

The Perspective matrix

Field of view

Perspective or orthogonal projection

Time for action – orthographic and perspective projections

What just happened?

Have a go hero – integrating the Model-view and the projective transform

Structure of the WebGL examples

WebGLApp

Supporting objects

Life-cycle functions

Configure

Load

Draw

Matrix handling functions

initTransforms

updateTransforms

setMatrixUniforms

Summary

5. Action

Matrix stacks

Animating a 3D scene

requestAnimFrame function

JavaScript timers

Timing strategies

Animation strategy

Simulation strategy

Combined approach: animation and simulation

Web Workers: Real multithreading in JavaScript

Architectural updates

WebGLApp review

Adding support for matrix stacks

Configuring the rendering rate

Creating an animation timer

Connecting matrix stacks and JavaScript timers

Time for action – simple animation

What just happened?

Have a go hero – simulating dropped and frozen frames

Parametric curves

Initialization steps

Setting up the animation timer

Running the animation

Drawing each ball in its current position

Time for action – bouncing ball

What just happened?

Optimization strategies

Optimizing batch performance

Performing translations in the vertex shader

Interpolation

Linear interpolation

Polynomial interpolation

B-Splines

Time for action – interpolation

What just happened?

Summary

6. Colors, Depth Testing, and Alpha Blending

Using colors in WebGL

Use of color in objects

Constant coloring

Per-vertex coloring

Per-fragment coloring

Time for action – coloring the cube

What just happened?

Use of color in lights

Using multiple lights and the scalability problem

How many uniforms can we use?

Simplifying the problem

Architectural updates

Adding support for light objects

Improving how we pass uniforms to the program

Time for action – adding a blue light to a scene

What just happened?

Have a go hero – adding interactivity with JQuery UI

Using uniform arrays to handle multiple lights

Uniform array declaration

JavaScript array mapping

Time for action – adding a white light to a scene

Time for action – directional point lights

What just happened?

Use of color in the scene

Transparency

Updated rendering pipeline

Depth testing

Depth function

Alpha blending

Blending function

Separate blending functions

Blend equation

Blend color

WebGL alpha blending API

Alpha blending modes

Additive blending

Subtractive blending

Multiplicative blending

Interpolative blending

Time for action – blending workbench

What just happened?

Creating transparent objects

Time for action – culling

What just happened?

Time for action – creating a transparent wall

What just happened?

Summary

7. Textures

What is texture mapping?

Creating and uploading a texture

Using texture coordinates

Using textures in a shader

Time for action – texturing the cube

What just happened?

Have a go hero – try a different texture

Texture filter modes

Time for action – trying different filter modes

What just happened?

NEAREST

LINEAR

Mipmapping

NEAREST_MIPMAP_NEAREST

LINEAR_MIPMAP_NEAREST

NEAREST_MIPMAP_LINEAR

LINEAR_MIPMAP_LINEAR

Generating mipmaps

Texture wrapping

Time for action – trying different wrap modes

What just happened?

CLAMP_TO_EDGE

REPEAT

MIRRORED_REPEAT

Using multiple textures

Time for action – using multitexturing

What just happened?

Have a go hero – moving beyond multiply

Cube maps

Time for action – trying out cube maps

What just happened?

Have a go hero – shiny logo

Summary

8. Picking

Picking

Setting up an offscreen framebuffer

Creating a texture to store colors

Creating a Renderbuffer to store depth information

Creating a framebuffer for offscreen rendering

Assigning one color per object in the scene

Rendering to an offscreen framebuffer

Clicking on the canvas

Reading pixels from the offscreen framebuffer

Looking for hits

Processing hits

Architectural updates

Time for action – picking

What just happened?

Picker architecture

Implementing unique object labels

Time for action – unique object labels

What just happened?

Have a go hero – clearing the scene

Summary

9. Putting It All Together

Creating a WebGL application

Architectural review

Virtual Car Showroom application

Complexity of the models

Shader quality

Network delays and bandwidth consumption

Defining what the GUI will look like

Adding WebGL support

Implementing the shaders

Setting up the scene

Configuring some WebGL properties

Setting up the camera

Creating the Camera Interactor

The SceneTransforms object

Creating the lights

Mapping the Program attributes and uniforms

Uniform initialization

Loading the cars

Exporting the Blender models

Understanding the OBJ format

Parsing the OBJ files

Load cars into our WebGL scene

Rendering

Time for action – customizing the application

What just happened?

Have a go Hero – flying through the scene

Summary

10. Advanced Techniques

Post-processing

Creating the framebuffer

Creating the geometry

Setting up the shader

Architectural updates

Time for action – testing some post-process effects

What just happened?

Have a go hero – funhouse mirror effect

Point sprites

Time for action – using point sprites to create a fountain of sparks

What just happened?

Have a go hero – bubbles!

Normal mapping

Time for action – normal mapping in action

What just happened?

Ray tracing in fragment shaders

Time for action – examining the ray traced scene

What just happened?

Have a go hero – multiple spheres

Summary

Index