Up Arrow

WebGL Tutorial: Part 1

  • Date: April 6th, 2015 | by wahid
  • Facebook
  • Tweet
  • Googleplus
  • IN

WebGL is the web implementation of OpenGL ES2 (Embedded System 2). WebGL allows us to create real 3D content and render it in a web browser that supports it and the graphics capabilities to handle such visually rich content. In web technology terms, WebGl is the 3d drawing context of the HTML5 <canvas> element.

How to getting prepared

To get started WebGL we should have :

# Some basic knowledge of Javascript and <canvas>.

# A web browser that supports Webgl. ( such as: Opera 12.00 or higher, Chrome 9 or higher, Firefox 4 or higher, Safari 5.1 or higher on Leopard, Snow Leopard or Lion).

# A web server that supports XHR (XML HttpRequest), to serve some of the examples. For an easy option, we could install MAMP or use the command python –m SimpleHttpServer 8080 on our command line if we have python installed.

# A decent text editor for writing code.

How To Started

Let’s begin by creating a new HTML file and saving it with a suitable name.

First of all, enter a basic HTML5 template into it, containing a simple <canvas> and a <script> element. Give our canvas an id, so we reference it via Javascript.


In the script, add a line to store reference to the canvas in a variable:


Below, get the drawing context of this canvas – note that we are using an experimental –webgl (3D) context here, rather than the more established 2D context:


Next, we will use two WebGl- specific methods:


clearColor specifies the background color of the canvas. We are then using clear to clear the canvas of any content, which means the background color will be shown. We are passing clear the COLOR_BUFFER_BIT buffer, which stores the color of pixels drawn on the screen. Note that the clear color we specify takes form of four values, for red, green, blue and alpha(these all take a value of between 0 and 1, unlike in CSS colors).

If you save and run this page it should give you a blank canvas, with a default color of blue like we specified above.

Figure 1: A very simple WebGL output.

Recent Posts