WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 2D and 3D rendering in an HTML canvas in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code (shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

This article will introduce you to the basics of using WebGL. It's assumed that you already have an understanding of the mathematics involved in 3D graphics, and this article doesn't pretend to try to teach you 3D graphics concepts itself. We have a beginner-oriented guide, complete with coding assignments to complete, in our Learning Area: Learn WebGL for 2D and 3D graphics.

The code examples in this tutorial can also be found in the webgl-examples GitHub repository.

Preparing to render in 3D

The first thing you need in order to use WebGL to render in 3D is a canvas. The HTML fragment below declares a canvas what our sample will draw into.

<body>
  <canvas id="glCanvas" width="640" height="480"></canvas>
</body>

Preparing the WebGL context

The main() function, in our JavaScript code, is called when our script is loaded. Its mission is to set up the WebGL context and start rendering content.

main();

//
// start here
//
function main() {
  const canvas = document.querySelector("#glCanvas");
  // Initialize the GL context
  const gl = canvas.getContext("webgl");

  // Only continue if WebGL is available and working
  if (!gl) {
    alert("Unable to initialize WebGL. Your browser or machine may not support it.");
    return;
  }

  // Set clear color to black, fully opaque
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // Clear the color buffer with specified clear color
  gl.clear(gl.COLOR_BUFFER_BIT);
}

The first thing we do here is obtain a reference to the canvas, stashing it in a variable called canvas.

Once we have the canvas, we get try to get a WebGLRenderingContext from it by calling getContext and passing it the string "webgl". If the browser does not support webgl getContext will return null in which case we'll display a message to the user and exit.

If the context is successfully initialized, gl is our reference to it. In this case, we set the clear color to black, then clear the context to that color.

At this point, you have enough code that the WebGL context should successfully initialize, and you should wind up with a big black, empty box, ready and waiting to receive content.

View the complete code | Open this demo on a new page

See also

  • An introduction to WebGL: Written by Luz Caballero, published at dev.opera.com. This article addresses that what WebGL is, explains how WebGL works (including the rendering pipeline concept), and introduces some WebGL libraries.
  • WebGL Fundamentals
  • An intro to modern OpenGL: A series of nice articles about OpenGL written by Joe Groff, providing a clear intro about OpenGL from its history to the important graphics pipeline concept, and some examples to demo how OpenGL works. If you have no idea about OpenGL, this is a good place to start.

Document Tags and Contributors

Tags: 
 Last updated by: Sheppy,