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

Parametric curves


There are many situations where we don't know the exact position that an object will have at a given time but we know an equation that describe its movement. These equations are known as parametric curves and are called like that because the position depends on one parameter: the time.

There are many examples of parametric curves. We can think for instance of a projectile that we shoot on a game, a car that is going downhill or a bouncing ball. In each case, there are equations that describe the motion of these objects under ideal conditions. The next diagram shows the parametric equation that describes free fall motion.

We are going to use parametric curves for animating objects in a WebGL scene. In this example, we will model a set of bouncing balls.

Note

The complete source code for this exercise can be found in /code/ch5_BouncingBalls.html.

Initialization steps

We will create a global variable that will store the time (simulation time).

var sceneTime = 0;

We also create the...