34,79 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Fachliteratur
- Sprache: Englisch
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.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 490
Veröffentlichungsjahr: 2018
Ähnliche
Real-Time 3D Graphics with WebGL 2 Second Edition
Copyright © 2018 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Commissioning Editor: Kunal ChaudhariAcquisition Editor: Divya PoojariContent Development Editor: Francis CarneiroTechnical Editor: Sachin SunilkumarCopy Editor: Safis EditingProject Coordinator: Sheejal ShahProofreader: Safis EditingIndexer: Aishwarya GangawaneGraphics: Jason MonteiroProduction Coordinator: Shraddha Falebhai
First published: June 2012 Second edition: October 2018
Production reference: 1311018
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-78862-969-0
www.packtpub.com
Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.
Why Subscribe?
Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Mapt is fully searchable
Copy and paste, print, and bookmark content
Packt.com
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.packt.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.packt.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.
Foreword
Having worked with Farhad Ghayour for over 10 years, I can assure you that he prioritizes practicality and innovation above all. With years of experiences in building businesses from the ground up, Farhad will help you filter what is useful from what is unnecessary in guiding you towards success. WebGL is a technology that will change the way we interact with our digital devices. As a UI/UX thought leader, Farhad will walk you through a systematic process for how to deliver and optimize compelling user experiences with WebGL. This book will show you what can be done with practical examples and what we can look forward to in the near future.Jonathan Melo Lead Engineer and Serial Entrepreneur
Contributors
About the Authors
Farhad Ghayour is a technology consultant based out of San Francisco, California, where he helps transform Fortune 500 companies worldwide.
Currently, he is focused on technology solutions at the intersection of computer graphics, vision, and machine learning. Previously, he was a core contributor to a leading open source WebGL engine, lead engineer at various start-ups around the world, a philosophy teacher, a serial entrepreneur, and an investment banker.
He is passionate about all things philosophy, math, code, and design. When he is not working, you can either find him racing cars or trying out new Chinese hotpot restaurants—most likely, hotpot.
About the Authors
Diego Cantor received his M.Eng. in Systems and Computer Engineering from Universidad de Los Andes (Colombia), and his Ph.D. in Biomedical Engineering from Western University (Canada). He published the first-ever online beating heart and brain cortex map using WebGL. He is also the author of the WebGL Beginner's Guide which sold internationally in English, Korean and Chinese. Diego is passionate about open source and web technologies, and he has worked extensively in medical imaging technologies. In his free time, he enjoys working out, classical music and learning new languages.
About the Reviewers
Sebastian Hack is an R&D software engineer who specializes in computer vision, machine learning, and robotics. After graduating from the University of California, Berkeley, with a bachelor's degree in Electrical Engineering and Computer Science, he moved to work on Microsoft's HoloLens. Outside of work, he enjoys playing tennis, watching classic films, and racing quadcopter drones.
Brian Foster grew up as a traditional artist and, over time, became fascinated by technology and its applied advances. He has a diverse background in visual design, programming, and information security, and has always been fascinated in identifying efficiency gaps, automating scalable solutions, and integrating various mediums for the sake of establishing innovation and new discoveries. Brian believes WebGL 2 represents the dawn of a new age for an internet-based experience.
Joseph Sample is a graphics engineer with a particular focus on WebGL. When he is not working, he is a touring musician in the band Ice Cream, and is particularly interested in the intersection of sound and graphics.
Alexander Gugel is a software engineer working at Facebook. He previously worked on the platform team at Famo.us building a 3D rendering engine.
Packt Is Searching for Authors like You
If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.
Table of Contents
Title Page
Copyright and Credits
Real-Time 3D Graphics with WebGL 2 Second Edition
Dedication
Packt Upsell
Why Subscribe?
Packt.com
Foreword
Contributors
About the Authors
About the Authors
About the Reviewers
Packt Is Searching for Authors like You
Preface
Who This Book Is For
What This Book Covers
To Get the Most out of This Book
Download the Example Code Files
Running Examples Locally
Download the Color Images
Conventions Used
Sections
Time for Action
Have a Go
Get in Touch
Reviews
Getting Started
System Requirements
WebGL Rendering
Software and Hardware Based Rendering
Server and Client Based Rendering
Retained and Immediate Mode Rendering
Retained-Mode Rendering
Immediate-Mode Rendering
Retained Versus Immediate Mode Rendering
Elements in a WebGL Application
Time for Action: Creating an HTML5 Canvas Element
Defining a CSS Style
Understanding Canvas Attributes
What If Canvas Is Not Supported?
Time for Action: Accessing the WebGL Context
State Machine
Time for Action: Setting up WebGL Context Attributes
Using the Context to Access the WebGL API
Loading a 3D Scene
Virtual Car Showroom
Time for Action: Visualizing a 3D Showroom
Architecture Updates
Summary
Rendering
WebGL Rendering Pipeline
Vertex Buffer Objects (VBOs)
Index Buffer Objects (IBOs)
Vertex Shader
Fragment Shader
Framebuffer
Attributes
Uniforms
Textures
Varyings
Rendering in WebGL
Vertices
Indices
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
Unbinding a VBO
Rendering
Drawing Functions
Using drawArrays
Using drawElements
Putting Everything Together
Time for Action: Rendering a Square
Have a Go: Changing the Square Color
Have a Go: Rendering Using drawArrays
Vertex Array Objects
Time for Action: Rendering a Square Using a VAO
Time for Action: Rendering Modes
WebGL as a State Machine: Buffer Manipulation
Time for Action: Querying the State of Buffers
Have a Go: Add One Validation
Advanced Geometry-Loading Techniques
Introduction to JavaScript Object Notation (JSON)
Defining JSON-Based 3D Models
Time for Action: Encoding and Decoding JSON
Asynchronous Loading with AJAX
Setting up a Web Server
Working Around the Web Server Requirement
Time for Action: Loading a Cone with AJAX
Have a Go: Loading a Nissan GTR
Architecture Updates
Summary
Lights
Lights, Normals, and Materials
Positional Versus Directional 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
Goraud Versus Phong Shading
Light-Reflection Models
The Lambertian Reflection Model
Phong Reflection Model
Ambient
Diffuse
Specular
OpenGL ES Shading Language (ESSL)
Storage Qualifier
Types
Vector Components
Operators and Functions
Vertex Attributes
Uniforms
Varyings
The in and out variables
Changing attribute to in
Changing varying to in / out
Vertex Shader
Fragment Shader
Writing ESSL Programs
Goraud Shading with Lambertian Reflections
Time for Action: Updating Uniforms in Real Time
Have a Go: Moving Light
Goraud Shading with Phong Reflections
Time for Action: Goraud Shading
Phong Shading
Time for Action: Phong Shading with Phong Lighting
Back to WebGL
Creating a Program
Initializing Attributes and Uniforms
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
Virtual Showroom Example
Architecture Updates
Summary
Cameras
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: Translations in World Space vs Camera Space
Camera Rotation
Time for Action: Rotations in World Space vs Camera Space
Have a Go: Combining Rotations and Translations
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
The Camera Model
Time for Action: Exploring the Showroom
Have a Go: Updating Light Positions
The Projection matrix
Field of View
Perspective or Orthogonal Projection
Time for Action: Orthographic and Perspective Projections
Have a Go: Integrating the Model-View and the Projective Transform
Structure of the WebGL Examples
Supporting Objects
Life Cycle Functions
The configure Function
The load Function
The draw Function
Matrix-Handling Functions
initTransforms
updateTransforms
setMatrixUniforms
Summary
Animations
WebGL Matrix Naming Conventions
Matrix Stacks
Animating a 3D scene
The requestAnimationFrame Function
JavaScript Timers
Timing Strategies
Animation Strategy
Simulation Strategy
Combined Approach: Animation and Simulation
Web Workers: Multithreading in JavaScript
Architectural Updates
App Review
Adding Support for Matrix Stacks
Connecting Matrix Stacks and JavaScript Timers
Time for Action: Simple Animation
Have a Go: 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
Optimization Strategies
Optimizing Batch Performance
Performing Translations in the Vertex Shader
Interpolation
Linear Interpolation
Polynomial Interpolation
B-Splines
Time for Action: Interpolation
Summary
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
Use of Color in Lights
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
Have a Go: Adding Interactivity
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
Use of Color in the Scene
Transparency
Updated Rendering Pipeline
Depth Testing
Depth Function
Alpha Blending
The Blending Function
Separate Blending Functions
The Blend Equation
The Blend Color
WebGL Alpha-Blending API
Alpha Blending Modes
The Blending Function
Subtractive Blending
Multiplicative Blending
Interpolative 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
Have a Go: Try a Different Texture
Texture Filter Modes
Time for Action: Trying Different Filter Modes
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
CLAMP_TO_EDGE
REPEAT
MIRRORED_REPEAT
Using Multiple Textures
Time for Action: Using Multi-Texturing
Have a Go: Moving Beyond Multiply
Have a Go: Using Multi-Dimensional Textures
Cube Maps
Time for Action: Trying out Cube Maps
Have a Go: Shiny Logo
Summary
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
Picker Architecture
Implementing Unique Object Labels
Time for Action: Unique Object Labels
Have a Go: Clearing the Scene
Have a Go: Using Alternative Identifiers for Picking
Have a Go: Decoupling WebGL Components
Summary
Putting It All Together
Creating a WebGL Application
Architectural Review
Time for Action: 3D Virtual Car Showroom
Complexity of the Models
Shader Quality
Network Delays and Bandwidth Consumption
Designing Our GUI
Adding canvas Support
Adding Shader Scripts
Adding WebGL Support
Implementing the Shaders
Setting up the Scene
Configuring WebGL Properties
Setting up the Camera
Creating the Camera Controls
Scene Transforms
Creating the Lights
Mapping Program Attributes and Uniforms
Uniform Initialization
Loading the Cars
Exporting the Blender Models
Understanding the OBJ Format
Vertex
Vertex/Texture Coordinate
Vertex/Texture Coordinate/Normal
Vertex//Normal
Parsing the OBJ Files
Loading Cars into Our WebGL Scene
Rendering
Have a Go: Interactive Controls
Bonus
Summary
Advanced Techniques
Post-Processing
Creating the Framebuffer
Creating the Geometry
Setting up the Shader
Architectural Updates
Time for Action: Post-Process Effects
Have a Go: Funhouse Mirror Effect
Point Sprites
Time for Action: Fountain of Sparks
Have a Go: Bubbles!
Normal Mapping
Time for Action: Normal Mapping in Action
Ray Tracing in Fragment Shaders
Time for Action: Examining the Ray Traced Scene
Have a Go: Multiple Spheres
Summary
WebGL 2 Highlights
What's New in WebGL 2?
Vertex Array Objects
Wider Range of Texture Formats
3D Textures
Texture Arrays
Instanced Rendering
Non-Power of 2 Texture Support
Fragment Depth
Texture Size in Shaders
Sync Objects
Direct Texel Lookup
Flexible Shader Loops
Shader Matrix Functions
Common Compressed Textures
Uniform Buffer Objects
Integer Textures and Attributes
Transform Feedback
Sampler Objects
Depth Textures
Standard Derivatives
UNSIGNED_INT Indices
Blend Equation MIN / MAX
Multiple Render Targets (MRT)
Texture Access in Vertex Shaders
Multi-Sampled Renderbuffers
Query Objects
Texture LOD
Shader Texture LOD
Floating Point Textures Always Available
Migrating to WebGL 2
Attaining context
Extensions
Shader Updates
Shader Definitions
Attribute Definitions
Varying Definitions
No More gl_FragColor
Automatic Texture Type Detection
Non-Power of 2 Texture Support
Floating Point Framebuffer Attachments
Vertex Array Objects
Summary
Journey Ahead
WebGL Libraries
Small Libraries
TWGL
Regl
StackGL
Feature-Rich Libraries
Three.js
Babylon.js
A-Frame
Game Engines
Unity
PlayCanvas
Testing WebGL 2 Applications
Visual Regression Testing
Application Introspection Testing
3D Reconstruction
Physically-Based Rendering
Communities
Summary
Other Books You May Enjoy
Leave a Review - Let Other Readers Know What You Think
Preface
WebGL is a powerful web technology that brings hardware-accelerated 3D graphics to the browser without requiring the user to install additional software. Given that WebGL is based on OpenGL and introduces 3D graphics programming to web development, it may seem unfamiliar to even experienced web developers. On the other hand, for those with experience in traditional computer graphics, building 3D applications with JavaScript takes some getting use to. A common view is that JavaScript is not as fast as other traditional languages used in computer graphics; although this is a concern in comparing CPU-bound algorithms, it is not an issue in comparing GPU-bound work. This is where WebGL shines! The powerful capabilities that WebGL offers, coupled with the ubiquity and accessibility of browsers, positions the technology in a unique and attractive position to power the future of immersive experiences on the web.
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.
Real-Time 3D Graphics with WebGL 2 presents a clear roadmap to learning WebGL 2. While WebGL1 is based on the OpenGL ES 2.0 specification, WebGL 2 is derived from OpenGL ES 3.0, which guarantees the availability of many WebGL1 extensions along with new features. 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, frame buffers, light, surfaces, geometry, and more. Each chapter is packed with useful and practical examples that demonstrate the implementation of these topics in a WebGL scene. 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 compelling 3D web applications with JavaScript and WebGL 2.
Who This Book Is For
This book is written for developers who are interested in building 3D applications for the web. A basic understanding of JavaScript and Linear Algebra is ideal, but not mandatory. No prior WebGL knowledge is expected.
What This Book Covers
Chapter 1,Getting Started, introduces the HTML5 canvas element and describes how to obtain a WebGL 2 context for it. After that, it discusses the basic structure of a WebGL application. The virtual car showroom application is presented as a demo of the capabilities of WebGL. This application also showcases the different components of a WebGL application.
Chapter 2,Rendering, presents the WebGL API to define, process, and render objects. This chapter also demonstrates how to perform asynchronous geometry loading using AJAX and JSON.
Chapter 3,Lights, introduces ESSL, the shading language for WebGL. This chapter shows how to implement a lighting strategy for the WebGL scene using ESSL shaders. The theory behind shading and reflective lighting models is covered and put into practice through a variety of examples.
Chapter 4,Cameras, illustrates the use of matrix algebra to create and operate cameras in WebGL. The Perspective and Normal matrices that are used in a WebGL scene are also described here. The chapter also shows how to pass these matrices to ESSL shaders so that they can be applied to every vertex. The chapter contains several examples that show how to set up a camera in WebGL.
Chapter 5,Animations, extends the use of matrices to perform geometrical transformations (move, rotate, scale) on scene elements. In this chapter, the concept of matrix stacks is discussed. It is shown how to maintain isolated transformations for every object in the scene using matrix stacks. Also, the chapter describes several animation techniques using matrix stacks and JavaScript timers. A practical demonstration is provided of each technique.
Chapter 6,Colors, Depth Testing, and Alpha Blending, goes into detail about the use of colors in ESSL shaders. This chapter shows how to define and operate with more than one light source in a WebGL scene. It also explains the concepts of depth testing and alpha blending, and shows how these features can be used to create translucent objects. The chapter contains several practical exercises that put these concepts into practice.
Chapter 7,Textures, shows how to create, manage, and map textures in a WebGL scene. The concepts of texture coordinates and texture mapping are presented here. This chapter discusses different mapping techniques that are presented through practical examples. The chapter also shows how to use multiple textures and cube maps.
Chapter 8,Picking, describes a simple implementation of picking, which is the technical term that describes the selection and interaction of the user with objects in the scene. The method described in this chapter calculates mouse-click coordinates and determines whether the user is clicking on any of the objects being rendered in the canvas. The architecture of the solution is presented with several callback hooks that can be used to implement logic-specific application. A couple of examples of picking are given.
Chapter 9,Putting It All Together, ties in the concepts discussed throughout the book. In this chapter, the architecture of the demos is reviewed and the virtual car showroom application outlined inChapter 1,Getting Started, is revisited and expanded. Using the virtual car showroom as the case study, this chapter shows how to import Blender models into WebGL scenes and how to create ESSL shaders that support the materials used in Blender.
Chapter 10,Advanced Techniques, provides a sample of a number of advanced techniques, including post-processing effects, point sprites, normal mapping, and ray tracing. Each technique is provided with a practical example. After reading this chapter, you will be able to take on more advanced techniques on your own.
Chapter 11,WebGL 2 Highlights, outlines some of the major features and updates to the WebGL 2 specification. This chapter also provides a migration strategy for converting applications based on WebGL1 to WebGL 2.
Chapter 12,Journey Ahead, concludes Real-Time 3D Graphics with WebGL 2 with recommendations regarding techniques, concepts, tools, and communities that readers can leverage on their journey in mastering real-time 3D graphics.
To Get the Most out of This Book
You need a browser that implements WebGL 2. WebGL 2 is supported by all major browser vendors with the exception of Microsoft Internet Explorer:
Firefox 51 or above
Google Chrome 56 or above
Chrome for Android 64 or above
An updated list of WebGL-enabled browsers can be found here: http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation.
You also need a source code editor that recognizes and highlights JavaScript syntax.
And you need a web server, such as Apache, Lighttpd, or Python, to load remote assets.
Download the Example Code Files
You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packt.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
Log in or register at
www.packt.com
.
Select the
Support
tab.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box and follow the onscreen instructions.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR/7-Zip for Windows
Zipeg/iZip/UnRarX for Mac
7-Zip/PeaZip for Linux
The code bundle for the book is also hosted on GitHub athttps://github.com/PacktPublishing/Real-Time-3D-Graphics-with-WebGL-2. In case there's an update to the code, it will be updated on the existing GitHub repository.
We also have other code bundles from our rich catalog of books and videos available athttps://github.com/PacktPublishing/. Check them out!
Running Examples Locally
If you donot have a web server, we recommend that you install a lightweight web server from the following options:
Serve:
https://github.com/zeit/serve
Lighttpd:
http://www.lighttpd.net
Python server:
https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server
That being said, to run the examples locally on your machine, be sure to run your server from the root of the examples directory, since thecommon directory is a shared dependency across chapters.
Download the Color Images
We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://www.packtpub.com/sites/default/files/downloads/9781788629690_ColorImages.pdf.
Conventions Used
There are a number of text conventions used throughout this book.
CodeInText: Indicates code words in text, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and so forth. Here is an example: "Open the ch01_01_demo.htmlfile in your editor."
A block of code is set as follows:
<html>
<head>
<title>
Real-Time 3D Graphics with WebGL 2
</title>
<style
type=
"text/css"
>
canvas
{
border
:
5
px dotted blue
;
}
</style>
</head>
<body>
<canvas
id=
"webgl-canvas"
width=
"800"
height=
"600"
>
Your browser does not support the HTML5 canvas element.
</canvas>
</body>
</html>
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
<canvas
id=
"webgl-canvas"
width=
"800"
height=
"600"
>
Your browser does not support the HTML5 canvas element.
</canvas>
Any command-line input or output is written as follows:
$ mkdir webgl-demo
$ cd webgl-demo
Bold: Indicates a new term, an important word, or words that you see on screen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Select System info from the Administration panel."
Sections
In this book, you will find several headings that appear frequently (Time for Action, What just happened?, and Have a Go).
To give clear instructions on how to complete a procedure or task, we use these sections as follows:
Time for Action
Action 1
Action 2
Action 3
Instructions often require some extra explanation to ensure they make sense, so they are followed by these sections:
What just happened?
This section explains the working of the tasks or instructions that you have just completed.
Have a Go
These are practical challenges that give you ideas on how to experiment using what you have learned.
Get in Touch
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [email protected].
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packt.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Reviews
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packt.com.
Getting Started
There was a time when most of the web comprised pages with static content—the only graphics were embedded images. Over time, however, application requirements became more ambitious and began running into limitations. As highly interactive applications became an increasingly important part of the user experience, there was, eventually, enough demand for a fully programmable graphics Application Programming Interface (API) to address these requirements. In 2006, Vladimir Vukicevic, an American-Serbian software engineer, began working on an OpenGL prototype for a then-upcoming HTML <canvas> element that he called Canvas 3D. In March 2011, his work would lead to the Kronos Group, the nonprofit organization behind OpenGL, to create WebGL, a specification to grant internet browsers access to Graphics Processing Units (GPUs).
All of the browser engines collaborated to create WebGL, the standard for rendering 3D graphics on the web. It was based on OpenGL Embedded Systems (ES), a cross-platform API for graphics targeted at embedded systems. This was the right starting place, because it made it possible to easily implement the same API in all browsers, especially since most browser engines were running on systems that had support for OpenGL.
WebGL was originally based on OpenGL ES 2.0, the OpenGL specification version for devices such as Apple's iPhone and iPad. But, as the specification evolved, it became independent with the goal of providing portability across various operating systems and devices. The idea of web-based, real-time rendering opened a new world of possibilities for web-based 3D environments. Due to the pervasiveness of web browsers, these and other kinds of 3D applications could now be rendered on desktop and mobile devices such as smartphones and tablets. According to the Khronos Group, the ability for Web developers to directly access OpenGL-class graphics directly from JavaScript, and freely mix 3D with other HTML content, will enable a new wave of innovation in Web gaming, educational and training applications.
Even though WebGL was vastly adopted for many years after it matured into a stable release—shipping inside Firefox, Chrome, Opera, IE11, and Android's mobile web browsers—Apple still lacked official WebGL support. Neither OS X Safari nor Safari Mobile supported WebGL. In fact, it wasn't until 2014, at June's Worldwide Developers Conference (WWDC), that Apple announced that both OS X Yosemite and iOS 8 would ship with WebGL support. This became a turning point for 3D graphics on the web. With official support from all major browsers, the entire range of 3D graphics—at native speeds—could be delivered to billions of desktop and mobile devices. WebGL unleashed the power of graphics processors to developers on an open platform, allowing console-quality application to be built for the web.
In this chapter, we will do the following:
Understand the necessary system requirements to run WebGL.
Cover the common high-level components of a WebGL application.
Set up a drawing area (
canvas
).
Test your browser's WebGL capabilities.
Understand that WebGL acts as a state machine.
Modify WebGL variables that affect your scene.
Load and examine a fully-functional scene.
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.
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.
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.
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/.
WebGL Rendering
WebGL is a 3D graphics library that enables modern web browsers to render 3D scenes in a standard and efficient manner. According to Wikipedia, rendering is the process of generating an image from a model by means of computer programs. Since this is a process executed by a computer, there are different ways to produce such images. There are three main distinctions to make when discussing rendering: software-based and hardware-based rendering, server-based and client-based rendering, and retained-mode and immediate-mode rendering. As we will see, WebGL offers a unique approach to hardware and client based rendering with an immediate-mode API on the web.
Software and Hardware Based Rendering
The first distinction we should make is whether we are using any special graphics hardware. On one hand, we can talk about software-based rendering for cases where all required calculations to render 3D scenes are performed using the computer's Central Processing Unit (CPU). On the other hand, as is the case with WebGL, we use the term hardware-based rendering for scenarios where there is a GPU performing 3D graphics computations. From a technical standpoint, hardware-based rendering is much more efficient than software-based rendering, because the former involves dedicated hardware handling the necessary operations. In contrast, a software-based rendering solution can be more common due to the lack of hardware dependencies.
Server and Client Based Rendering
The second distinction to make is whether the rendering process is happening locally or remotely. When the image that needs to be rendered is too complex, the render will most likely occur remotely. This is the case for 3D animated movies where dedicated servers with lots of hardware resources render intricate scenes. We call this server-based rendering. The opposite of this approach takes place when rendering occurs locally. We call this client-based rendering. WebGL offers a client-based rendering approach: the elements that are a part of the 3D scene are usually downloaded from a server. However, the processing required to obtain an image is all performed locally using the client's graphics hardware. Although this is not a unique solution, compared to other technologies (such as Java 3D, Flash, and the Unity Web Player Plugin), WebGL presents several advantages:
JavaScript programming
: JavaScript is a language that is natural to both web developers and browsers. Working with JavaScript allows you to access all parts of the DOM and easily integrate WebGL applications with other JavaScript libraries such as jQuery, React, and Angular.
Automatic memory management
: WebGL—unlike other technologies, such as OpenGL, where memory allocation and deallocation are handled manually—follows the rules for JavaScript variable scoping and automatic memory management. This simplifies programming tremendously while reducing the code footprint. Ultimately, this simplification makes it easier to understand the application logic.
Pervasiveness
: Web browsers with JavaScript capabilities are installed in smartphones and tablet devices by default. This means you can leverage WebGL across a vast ecosystem of desktop and mobile devices.
Performance
: Performance of WebGL applications is comparable to equivalent standalone applications (with some exceptions). This is possible due to WebGL's ability to access the local graphics hardware. Until recently, many 3D web rendering technologies used software-based rendering.
Zero compilation
: WebGL is written in JavaScript; therefore, there is no need to compile your code before executing it on the web browser. This empowers you to make changes in real-time and see how those changes affect your 3D web application. Nevertheless, when we cover shader programs, we will understand that some compilation is needed. However, this occurs in your graphics hardware and not in your browser.
Retained and Immediate Mode Rendering
The third distinction to make is that WebGL is an immediate mode 3D rendering API designed for the web. Graphics APIs can be divided into retained-mode APIs and immediate-mode APIs.
Retained-Mode Rendering
A retained-mode API is declarative. The application builds a scene from primitives, such as shapes and lines, and then the graphics library maintains a scene model in memory. To change what is rendered, the application issues a command to update the scene, which could include, for example, adding or removing a shape; the library is then responsible for managing and redrawing the scene:
Immediate-Mode Rendering
An immediate-mode API is procedural. Immediate mode rendering requires the application to directly manage rendering. In this case, the graphics library does not maintain a scene model. Each time a new frame is drawn, the application issues all drawing commands required to describe the entire scene, regardless of actual changes. This method provides the maximum amount of control and flexibility to the application program:
Retained Versus Immediate Mode Rendering
Retained-mode rendering can be simpler to use, because the API does more of the work for you, such as initialization, state maintenance, and cleanup. However, it is often less flexible since the API forces its own particular scene model; it can also have higher memory prerequisites because it needs to provide a general-purpose scene model. Immediate-mode rendering, on the other hand, as offered with WebGL, is much more flexible and can implement targeted optimizations.
Elements in a WebGL Application
WebGL, like other 3D graphics libraries, comprises many common 3D elements. These fundamental elements will be covered, chapter-by-chapter, throughout this book.
Some of these common elements include the following:
canvas
: It is the placeholder where our scene is rendered. It is a standard HTML5 element and as such, can be accessed using the
Document Object Model
(
DOM
).
Objects
: These are the 3D entities that make up the scene. These entities are composed of triangles. In the following chapters, we will see how WebGL handles and renders geometries using
buffers
.
Lights
: Nothing in a 3D world can be seen without lights. In later chapters, we will learn that WebGL uses
shaders
to model lights in the scene. We will see how 3D objects reflect or absorb light according to the laws of physics. We will also discuss different light models to visualize our objects.
Camera
:
canvas
acts as the viewport to the 3D world. We see and explore a 3D scene through it. In the following chapters, we will understand the different matrix operations that are required to produce a view perspective. We will understand how these operations can be modeled as a camera.
This chapter will cover the first element of our list: canvas. The following sections will help us understand how to create a canvas element and how to set up a WebGL context.
Time for Action: Creating an HTML5 Canvas Element
A canvas is a rectangular element in your web page where your 3D scene will be rendered. Let's create a web page and add a HTML5 canvas element:
Using your favorite editor, create a web page with the following code:
Save the file as
ch01_01_canvas.html
.
Open it with a supported browser.
You should see something similar to the following screenshot:
What just happened?
We created a simple web page containing a canvas element. This canvas will contain our 3D application. Let's go very quickly over some relevant elements presented in this example.
Defining a CSS Style
This is the piece of code that determines the canvas style:
This code is not fundamental to build a WebGL application. Given that the canvas elementis initially empty, a blue-dotted border is a simple way to verify the location of the canvas.
Understanding Canvas Attributes
There are three attributes in our previous example:
id
: This is the
canvas
identifier in the DOM.
width
and
height
: These two attributes determine the size of our
canvas
element. When these two attributes are missing, Firefox, Chrome, and WebKit will default to using
300px
by
150px
.
What If Canvas Is Not Supported?
If you see the following message on your screen, Your browser does not support the HTML5 canvas element (which is the message between the <canvas> tags), you need to make sure that you're using one of the supported web browsers described earlier.
If you're using Firefox and you still see this message, you may want to check whether WebGL is enabled (it is by default). To do so, go to Firefox and type about:config in the address bar. Then, look for the webgl.disabledproperty. If it is set to true, change it to false. When you restart Firefox and load ch01_01_canvas.html, you should be able to see the dotted border of the canvas element.
In the remote case that you still do not see canvas, it could be because your browser has blacklisted your GPU. If this is the case, please use a system with the appropriate hardware.
State Machine
A WebGL context can be understood as a state machine: once you modify attributes, the modifications persist until later modifications. At any point, you can query the state of these attributes to determine the current state of your WebGL context. Let's analyze this behavior with an example.
Using the Context to Access the WebGL API
It is essential to note that all of the WebGL functions are accessed through the WebGL context. In our examples, the context is being held by the gl variable. Therefore, any call to the WebGL API will be performed using this variable.
Loading a 3D Scene
So far, we have seen how to set up a canvas element and how to obtain a WebGL context; the next step is to discuss objects, lights, and cameras. But why wait to see what WebGL can do? In this section, we will take a quick peek at a simplified version of the final WebGL application that we'll be building in this book.
Virtual Car Showroom
Through this book, we will develop a virtual car showroom application using WebGL. At this point, we will load one simple scene into the canvas element. This scene will contain a car, some lights, and a camera.
Time for Action: Visualizing a 3D Showroom
Once you finish reading this book, you will be able to create compelling 3D scenes such as the one we are going to play with next. This scene showcases one of the cars from this book's virtual car showroom:
Open the
ch01_04_showroom.html
file
in your browser.
You will see a WebGL scene with a car in it, as shown in the following screenshot. In the following chapters, we will cover geometry rendering and will see how to load and render various 3D models:
Use the sliders to interactively update the four light sources that have been defined for this scene. Each light source has two elements: diffuse and specular elements. We have
Chapter 3
,
Lights
, dedicated entirely to lights in a 3D scene.
Click and drag on
canvas
to rotate the car and visualize it from different perspectives. You can zoom by pressing the
Alt
key while dragging the mouse on the
canvas
. You can also use the
arrow
keys to rotate the camera around the car. Make sure that
canvas
is in focus by clicking on it before using the
arrow
keys. In
Chapter 4
,
Cameras
, we will discuss how to create and operate our own custom cameras in WebGL.
Use the color selector widget to change the color of the car. The use of colors in the scene will be discussed in detail later in this book.
What just happened?
We have loaded a simple scene in a browser using WebGL. This scene consists of the following:
A
canvas
elementthrough which we see the scene.
A series of polygonal meshes (
objects
) that constitute the car: roof, windows, headlights, fenders, doors, wheels, spoiler, bumpers, and so on.
Light
sources, otherwise everything would appear black.
A
camera
that determines where our viewpoint is in the 3D world. This camera is interactive where the viewpoint can change, depending on user input. For example, we used various keys and the mouse to move the camera around the car.
There are many other elements in this scene such as textures, colors, and special light effects (specularity). Do not panic! We will explain each element throughout this book. The point here is to identify that the four basic elements we discussed previously are present in the scene. That said, feel free to examine the source code to get a sense of what's to come.
