Book Image

Real-Time 3D Graphics with WebGL 2 - Second Edition

By : Farhad Ghayour, Diego Cantor
5 (1)
Book Image

Real-Time 3D Graphics with WebGL 2 - Second Edition

5 (1)
By: Farhad Ghayour, Diego Cantor

Overview of this book

As highly interactive applications have become an increasingly important part of the user experience, WebGL is a unique and cutting-edge technology that brings hardware-accelerated 3D graphics to the web. Packed with 80+ examples, this book guides readers through the landscape of real-time computer graphics using WebGL 2. Each chapter covers foundational concepts in 3D graphics programming with various implementations. Topics are always associated with exercises for a hands-on approach to learning. This book presents a clear roadmap to learning real-time 3D computer graphics with WebGL 2. 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 3D computer graphics topics, including rendering, colors, textures, transformations, framebuffers, lights, surfaces, blending, geometry construction, advanced techniques, and more. With each chapter, you will "level up" your 3D graphics programming skills. This book will become your trustworthy companion in developing highly interactive 3D web applications with WebGL and JavaScript.
Table of Contents (14 chapters)

System Requirements

WebGL is a web-based 3D Graphics API. As such, there is no installation needed. While WebGL 1 is based on the OpenGL ES 2.0 specification, WebGL 2 is based on OpenGL ES 3.0, which guarantees the availability of many WebGL 1 extensions along with new features.

WebGL 2 Versus WebGL 1

Given this book covers WebGL 2, all WebGL and WebGL 2 terms reference the WebGL 2 (OpenGL ES 3.0) specification. Any references to WebGL 1 (OpenGL ES 2.0) will be done so explicitly.

As of January 27, 2016, WebGL 2 is available by default in Firefox and Chrome. You will automatically have access to WebGL 2, provided you have one of the following web browsers:

  • Firefox 51 or above
  • Google Chrome 56 or above
  • Chrome for Android 64 or above

For an updated list of the web browsers that support WebGL, please visit the Khronos Group web page: http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation.

Or visit the well-known CanIUse.com resource: https://caniuse.com/#search=WebGL 2.

Modern Standards

Since we will be using modern browsers to run WebGL 2, we will also leverage HTML5, CSS3, and JavaScript ES6 throughout this book. For more information on these modern standards, please refer to the following link: https://developer.mozilla.org/en-US/docs/Web.

At the time of this book's publication, WebGL 2 remains a specification that's in flux. Some parts of the specification are considered stable and have been implemented in modern browsers; other parts should be considered experimental and have been partially implemented to varying degrees. Therefore, you should be familiar with how the standardization process works and the levels of implementation for each new property. That being said, WebGL 2 is nearly 100% backward compatible with WebGL 1. All exceptions to backward compatibility are recorded in the following link: https://www.khronos.org/registry/webgl/specs/latest/2.0/#BACKWARDS_INCOMPATIBILITY.

Migrating to WebGL 2

If you have prior experience with WebGL 1 or are curious about migration strategies to WebGL 2, you can refer to Chapter 11, WebGL 2 Highlights, where key differences between WebGL 1 and WebGL 2 are highlighted.

Lastly, you will need to make sure that your computer has an approved graphics card. To quickly validate your current configuration for WebGL 2, please visit the following link: https://get.webgl.org/WebGL 2/.