WebGL Beginner's Guide

If you’re a JavaScript developer who wants to take the plunge into 3D web development, this is the perfect primer. From a basic understanding of WebGL structure to creating realistic 3D scenes, everything you need is here.

WebGL Beginner's Guide

Beginner's Guide
Diego Cantor, Brandon Jones

If you’re a JavaScript developer who wants to take the plunge into 3D web development, this is the perfect primer. From a basic understanding of WebGL structure to creating realistic 3D scenes, everything you need is here.
$26.99
$44.99
RRP $26.99
RRP $44.99
eBook
Print + eBook
$12.99 p/month

Get Access

Get Unlimited Access to every Packt eBook and Video course

Enjoy full and instant access to over 3000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781849691727
Paperback376 pages

About This Book

  • Dive headfirst into 3D web application development using WebGL and JavaScript.
  • Each chapter is loaded with code examples and exercises that allow the reader to quickly learn the various concepts associated with 3D web development
  • The only software that the reader needs to run the examples is an HTML5 enabled modern web browser. No additional tools needed.
  • A practical beginner's guide with a fast paced but friendly and engaging approach towards 3D web development

Who This Book Is For

This book is written for JavaScript developers who are interested in 3D web development. A basic understanding of the DOM object model and the jQuery library is ideal but not required. No prior WebGL knowledge is expected.

Table of Contents

Chapter 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
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
Chapter 2: 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
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 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
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
Chapter 8: Picking
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
Chapter 9: 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
Chapter 10: 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

What You Will Learn

  • Understand the structure of a WebGL application
  • Build and render 3D objects with WebGL
  • Load complex models using JSON and AJAX
  • Set up a lighting model using shaders, physics of light reflection, and lighting strategies
  • Create a camera and use it to move around a 3D scene
  • Use texturing, lighting and shading techniques to add greater realism to 3D scenes
  • Implement selection of objects in a 3D scene with the mouse
  • Advanced techniques to create more visually complex and compelling scenes

In Detail

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.

Authors

Table of Contents

Chapter 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
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
Chapter 2: 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
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 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
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
Chapter 8: Picking
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
Chapter 9: 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
Chapter 10: 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

Book Details

ISBN 139781849691727
Paperback376 pages
Read More