WebGL Tutorial 1 - How To Initialize WebGL in 11 Minutes





The interactive transcript could not be loaded.


Rating is available when the video has been rented.
This feature is not available right now. Please try again later.
Published on Aug 15, 2015

My WebGL site for more:

how to create a webgl application webgl html5
webgl tutorial for beginners webgl tutorial 3d webgl tutorial youtube webgl tutorial video webgl tutorial 2017

This WebGL tutorial's source code available for download is here: http://www.tigrisgames.com/webgl/1

Rats! WebGL hit a snag solution:

WebGL Tutorial For Beginners [Lesson 1]

This tutorial started as a write up titled "WebGL Lesson 1 - Cross-Browser Initialization of WebGL And Setting Up A Blank Window;" Then I converted it into this video tutorial. You see here. It's definitely not a full blown webgl game tutorial, only a first step for setting up your webgl pipeline. No webgl shaders here, Unity or terrain rendering either. But all it is, it's just a webgl demo.

In this WebGL tutorial you will learn how to set up OpenGL in HTML5 within canvas tag (how to enable WebGL, how to install WebGL). Even though only setting up a blank drawing area will be explained, important WebGL initialization principles will be covered using the JavaScript (js) language. And then source code will be provided with a browser demo. I use Google Chrome for all of my examples.

Note: To check if your browser supports WebGL, visit http://get.webgl.org/

First, let’s define a basic HTML canvas area. At this point the code has nothing to do with WebGL itself. It’s simply an HTML5 tag:

Initializing WebGL in your browser using JavaScript

First, let’s grab an object handle to the canvas tag: // Get a handle to canvas var canvas = document.getElementById("gl");

Now, let’s write some JavaScript code that will initialize WebGL. This is done by creating a JavaScript object of aforementioned type WebGLRenderingContext. However, there is no direct way of creating this object using a constructor function, like with the standard JavaScript objects. Instead, we have to use one of the following functions on the canvas object: var gl = canvas.getContext(“webgl”); // or… var gl = canvas.getContext(“experimental-webgl”); // Alternative, if webgl is not available

There are even more ways to identify a context in different browsers. For example using the literal string moz-webg instead of webgl, we can check for Mozilla’s (Firefox) implementation. And webkit-3d will try to grab GL context from a Webkit based browser. Our final initialization source code will check for these too. I’m just trying to keep things simple for now.

Please take a look at the __proto__(or prototype, in browsers where available) object property attached to the WenGL context object gl in its initialized state, by expanding the small arrow in Google Chrome console, after running the WebGL initialization code below. This prototype property contains all initialized OpenGL properties, as well as all available OpenGL functions we can call to create our 3D graphics.

WebGL and OpenGL Extensions

Before we move on to implementing a robust cross-browser WebGL initialization function, let’s briefly talk about OpenGL Extensions.

In order to grab a list of supported extensions we can use getSupportedExtensions command. This function is attached to the WebGL context object and it is called as follows: gl_context.getSupportedExtensions();

Note that in the example source code below our WebGL context object is simply called gl.

Clearing the Screen With a Solid Color

Once the WebGL context object is initialized and stored in gl variable, the following commands are issued as a minimum requirement for clearing the screen with a solid color. In this case we simply chose black (r=0,g=0,b=0). And value of 1.0 for alpha.


And there we have it. We have just initialized WebGL in most modern browsers, set the viewport to 640x480 and cleared it out with solid black color.


When autoplay is enabled, a suggested video will automatically play next.

Up next

to add this to Watch Later

Add to

Loading playlists...