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.
Table of Contents (18 chapters)
WebGL Beginner's Guide
Credits
About the Authors
Acknowledgement
About the Reviewers
www.PacktPub.com
Preface
Index

What kind of rendering does WebGL offer?


WebGL is a 3D graphics library that enables modern Internet 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. As this is a process executed in a computer, there are different ways to produce such images.

The first distinction we need to make is whether we are using any special graphics hardware or not. We can talk of software-based rendering, for those cases where all the calculations required to render 3D scenes are performed using the computer's main processor, its CPU; on the other hand we use the term hardware-based rendering for those scenarios where there is a Graphics Processing Unit (GPU) performing 3D graphics computations in real time. From a technical point of view, hardware-based rendering is much more efficient than software-based rendering because there is dedicated hardware taking care of the operations. Contrastingly, a software-based rendering solution can be more pervasive due to the lack of hardware dependencies.

A second distinction we can make is whether or not the rendering process is happening locally or remotely. When the image that needs to be rendered is too complex, the render most likely will occur remotely. This is the case for 3D animated movies where dedicated servers with lots of hardware resources allow rendering intricate scenes. We called this server-based rendering . The opposite of this is when rendering occurs locally. We called this client-based rendering .

WebGL has a client-based rendering approach: the elements that make part of the 3D scene are usually downloaded from a server. However, all the processing required to obtain an image is performed locally using the client's graphics hardware.

In comparison with 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 Internet web browsers. Working with JavaScript allows you to access all parts of the DOM and also lets you communicate between elements easily as opposed to talking to an applet. Because WebGL is programmed in JavaScript, this makes it easier to integrate WebGL applications with other JavaScript libraries such as JQuery and with other HTML5 technologies.

  • Automatic memory management: Unlike its cousin OpenGL and other technologies where there are specific operations to allocate and deallocate memory manually, WebGL does not have this requisite. It follows the rules for variable scoping in JavaScript and memory is automatically deallocated when it's no longer needed. This simplifies programming tremendously, reducing the code that is needed and making it clearer and easier to understand.

  • Pervasiveness: Thanks to current advances in technology, web browsers with JavaScript capabilities are installed in smart phones and tablet devices. At the moment of writing, the Mozilla Foundation is testing WebGL capabilities in Motorola and Samsung phones. There is also an effort to implement WebGL on the Android platform.

  • Performance: The performance of WebGL applications is comparable to equivalent standalone applications (with some exceptions). This happens thanks to WebGL's ability to access the local graphics hardware. Up until now, many 3D web rendering technologies used software-based rendering.

  • Zero compilation: Given that WebGL is written in JavaScript, there is no need to compile your code before executing it on the web browser. This empowers you to make changes on-the-fly and see how those changes affect your 3D web application. Nevertheless, when we analyze the topic of shader programs, we will understand that we need some compilation. However, this occurs in your graphics hardware, not in your browser.