Posted on


3d graphics rendering is coming to a browsers now.  Khronos, which is responsible for OpenGL (among other things) has published the specifications for WebGL on their website.  The idea is to use the HTML5 canvas element to bring 3d straight to the browser without requiring third party plugins or proprietary code.  The technology itself is tied closely to the specs for OpenGL ES, which is a 3d rendering library largely used in portable devices (Android, Symbian and the iPhone).  Loosly speaking WebGL is a javascript binding of OpenGL ES 2.0. While Khronos itself is a consortium made up of companies such as AMD, Intel, Nvidia and Sun Microsystems, the WebGL working group has development support from all the major browser manufacturers except Microsoft.

While the technology itself is not ready for the masses, you can already start playing around with it in Firefox, Chrome, and Safari’s latest development releases.  Information on how to implement WebGL on each browser can be found on the Khronos website.

WebGL is a low-level API. OpenGL’s shading language, GLSL, is itself an entire programming environment. As a result, even simple things in WebGL take quite a bit of code. You have to load, compile, and link shaders, set up the variables to be passed in to the shaders, and also perform matrix math to animate shapes. Basic areas you’ll need to be familiar with include:

  • GLSL, the shading language used by OpenGL and WebGL
  • Matrix computation to set up transformations
  • Vertex buffers to hold data about vertex positions, normals, colors, and textures.

WebGL is based on OpenGL ES 2.0 specification, meaning it works only with shaders and dropped fixed function pipeline. The main problem is that you can quickly hit the javascript speed execution even though javascript is improving. In javascript performance related to cpu are far from what we know with C/C++. As a consequence the main bottleneck is the cpu, you can display huge mesh with a lot of triangles but have less cpu power for logic or computation due to javascript. Something that might help would be OpenCL ES in the browser.


About GPUToaster

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s