WebGL Beginner's Guide

Book Image

WebGL Beginner's Guide

Book Image

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

WebGL Beginner's Guide

Credits

About the Authors

About the Authors

Acknowledgement

Acknowledgement

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Free Chapter

Getting Started with WebGL

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

Rendering Geometry

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

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

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

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

Action

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

Time for action – interpolation

Colors, Depth Testing, and Alpha Blending

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

Time for action – blending workbench

Creating transparent objects

Time for action – culling

Time for action – creating a transparent wall

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

Time for action – trying out cube maps

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

Putting It All Together

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

Time for action – customizing the application

Advanced Techniques

Advanced Techniques

Post-processing

Architectural updates

Time for action – testing some post-process effects

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

Time for action – normal mapping in action

Ray tracing in fragment shaders

Time for action – examining the ray traced scene

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Time for action – customizing the application

Open the file ch9_Car_Showroom.html using your favorite code editor.
We will assign a different home for the camera when we load the Ford Mustang. To do so, please check the cameraHome, cameraAzimuth, and cameraElevation global variables. We set up the camera home position by using this variable inside the configure function like this:
```
camera.goHome(cameraHome);
camera.setAzimuth(cameraAzimuth);
camera.setElevation(cameraElevation);
```
Let's use this code to configure the default pose for the camera when we load the Ford Mustang. Go to the loadMustang function and append these lines:
```
cameraHome = [0,0,10];
cameraAzimuth = -25;
cameraElevation = -15;
camera.goHome(cameraHome);
camera.setAzimuth(cameraAzimuth);
camera.setElevation(cameraElevation);
```
Now save your work and load the page in your web browser. Check that the camera appears in the indicated position when you load the Ford Mustang.
We can also set up the lighting scheme on a car-per-car basis...