WebGL Beginner's Guide

WebGL Beginner's Guide

Overview of this book

WebGL is a new web technology that brings hardware-accelerated 3D graphics to the browser without installing additional software. As WebGL is based on OpenGL and brings in a new concept of 3D graphics programming to web development, it may seem unfamiliar to even experienced Web developers.Packed with many examples, this book shows how WebGL can be easy to learn despite its unfriendly appearance. Each chapter addresses one of the important aspects of 3D graphics programming and presents different alternatives for its implementation. The topics are always associated with exercises that will allow the reader to put the concepts to the test in an immediate manner.WebGL Beginner's Guide presents a clear road map to learning WebGL. Each chapter starts with a summary of the learning goals for the chapter, followed by a detailed description of each topic. The book offers example-rich, up-to-date introductions to a wide range of essential WebGL topics, including drawing, color, texture, transformations, framebuffers, light, surfaces, geometry, and more. With each chapter, you will "level up"ù your 3D graphics programming skills. This book will become your trustworthy companion filled with the information required to develop cool-looking 3D web applications with WebGL and JavaScript.

WebGL Beginner's Guide

Credits

About the Authors

Acknowledgement

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

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

Accessing a WebGL context

Time for action – accessing the WebGL context

WebGL is a state machine

Time for action – setting up WebGL context attributes

Loading a 3D scene

Time for action – visualizing a finished scene

Summary

Rendering Geometry

Vertices and Indices

Overview of WebGL's rendering pipeline

Rendering geometry in WebGL

Putting everything together

Time for action – rendering a square

Rendering modes

Time for action – rendering modes

WebGL as a state machine: buffer manipulation

Time for action – enquiring on the state of buffers

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

Time for action – JSON encoding and decoding

Time for action – loading a cone with AJAX + JSON

Summary

Lights!

Lights, normals, and materials

Using lights, normals, and materials in the pipeline

Shading methods and light reflection models

ESSL—OpenGL ES Shading Language

Writing ESSL programs

Time for action – updating uniforms in real time

Time for action – Goraud shading

Time for action – Phong shading with Phong lighting

Back to WebGL

Bridging the gap between WebGL and ESSL

Time for action – working on the wall

More on lights: positional lights

Time for action – positional lights in action

Summary

Camera

WebGL does not have cameras

Vertex transformations

Normal transformations

WebGL implementation

The Model-View matrix

The Camera matrix

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

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

Basic camera types

Time for action – exploring the Nissan GTX

The Perspective matrix

Time for action – orthographic and perspective projections

Structure of the WebGL examples

Summary

Action

Matrix stacks

Animating a 3D scene

Timing strategies

Architectural updates

Connecting matrix stacks and JavaScript timers

Time for action – simple animation

Parametric curves

Time for action – bouncing ball

Optimization strategies

Interpolation

Time for action – interpolation

Summary

Colors, Depth Testing, and Alpha Blending

Using colors in WebGL

Use of color in objects

Time for action – coloring the cube

Use of color in lights

Architectural updates

Time for action – adding a blue light to a scene

Time for action – adding a white light to a scene

Time for action – directional point lights

Use of color in the scene

Depth testing

Alpha blending

Time for action – blending workbench

Creating transparent objects

Time for action – culling

Time for action – creating a transparent wall

Summary

Textures

What is texture mapping?

Creating and uploading a texture

Using texture coordinates

Using textures in a shader

Time for action – texturing the cube

Texture filter modes

Time for action – trying different filter modes

Texture wrapping

Time for action – trying different wrap modes

Using multiple textures

Time for action – using multitexturing

Cube maps

Time for action – trying out cube maps

Summary

Picking

Setting up an offscreen framebuffer

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

Implementing unique object labels

Time for action – unique object labels

Summary

Putting It All Together

Creating a WebGL application

Architectural review

Virtual Car Showroom application

Defining what the GUI will look like

Implementing the shaders

Setting up the scene

Configuring some WebGL properties

Loading the cars

Rendering

Time for action – customizing the application

Summary

Advanced Techniques

Post-processing

Architectural updates

Time for action – testing some post-process effects

Point sprites

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

Normal mapping

Time for action – normal mapping in action

Ray tracing in fragment shaders

Time for action – examining the ray traced scene

Summary

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Architectural updates

The picking method described in this chapter has been implemented in our architecture:

We have replaced the draw function with the render function. This function is the same that we previously described in the section Rendering to an offscreen framebuffer.

There is a new class: Picker. The source code for this class can be obtained from /js/webgl/Picker.js. This class encapsulates the offscreen framebuffer and encapsulates the code necessary to create it, configure it, and read from it.

We also updated the class CameraInteractor to notify the picker whenever the user clicks on the canvas. The following diagram explains how the picking algorithm is implemented using the Render function and the classes Picker and CameraInteractor:

Note

The source code for Picker and CameraInteractor can be found in the code accompanying this chapter under /js/webgl.

Now let's see picking in action!

WebGL Beginner's Guide

WebGL Beginner's Guide

Overview of this book

Related Content you might be interested in

Current Title:

WebGL Beginner's Guide

Architectural updates

Note