O'Reilly logo

WebGL Game Development by Sumeet Arora

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

A walkthrough of the WebGL API

This section will explain the basic functions of the WebGL API. We will first understand buffer objects. A WebGL application has two sections: JavaScript control code and shader functions. We will explain the WebGL API functions used in the control code as well as cover the code of a simple shader.

Initializing the WebGL context

To render WebGL 3D content, we need an HTML canvas element. The following HTML code establishes a canvas object that will be used to render 3D content:

<canvas id="squareWithDrawArrays" style="border: none;" width="500" height="500"></canvas>

The first thing we do here is obtain a reference to the canvas. We store it in a variable called canvas. We pass the canvas object to our function initGL ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required