A Beginner’s Guide to WebGL

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

Join the discussion on Reddit.

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins. You will often find developers using it for games, but it is finally gaining widespread visibility across the web, and is now being used for map visualizations, charting data, and even presentations.

First introduced in early 2011, this is similar OpenGL ES, the mobile version of OpenGL, but built inside of the browser. Desktop browsers have really started to support it as of late, as have mobile browsers. I wrote about the current state of it (as of November 2014) here.

How Many People Are Using WebGL?

User pyalot on reddit has pointed me towards an excellent site for tracking WebGL usage and statistics: http://webglstats.com/. WebGL Stats uses a tracker frame embedded in other sites to collect the data. You can help too, just embed the code below into your page.

<script src="//cdn.webglstats.com" defer="defer" async="async"></script>

What is WebGL Doing and Why Should I Care?

WebGL has three distinct advantages over writing code that simply manipulates the DOM:

• Tasks. Drawing reflective materials or complex lighting generate a ton of overhead, and seeing that JavaScript is single threaded and CPU bound, why not offload some of that to the GPU in your device and have that do the heavy lifting?
• Performance.Utilizing hardware acceleration (the GPU built into your device), WebGL is a great fit for games or complex visualizations.
• Shaders.Complex visual effects can be produced with small programs known as “shaders”. This may be as simple as producing a sepia coloring effect, or more complex simulations such as water or flames. Visit Shadertoy for a showcase of some examples which really highlight this.

Asm.js and Emscripten

Unity, and Epic’s Unreal Engine, the popular middleware tools frequently used by game developers are not limited to creating compiled applications that run as an executable.

Unity previously had a web player, which was a downloadable plugin that used ActiveX. Chrome killed support for NPAP (Netscape Plugin API), but announced it over one year ago.

In April, with the release of Chrome 42 stable, they finally put the axe to it. There are a number of reasons as to why, but most notably they stated “hangs, crashes, security incidents, and code complexity.” Google suggests using web standards instead, such as WebGL, which I will explain below.

Microsoft is following suit and deprecating ActiveX, VBScript, attachEvent, and other legacy technologies in favor of web standards. The need for ActiveX controls has been significantly reduced by HTML5-era capabilities, which also produces interoperable code across browsers.

With the advent of WebGL and now asm.js, developers can now harness much of the power of their computing device from within the browser and access markets previously unavailable.

JavaScript is the only language which works in all web browsers. Although only JavaScript will run in the browser, you can still write in other languages and still compile to JavaScript, thereby allowing it to also run in the browser. This is made possible by a technology known as emscripten.

Emscripten is an LLVM based project that compiles C and C++ into highly performant JavaScript in the asm.js format. In short: near native speeds, using C and C++, inside of the browser. Even better, emscripten converts OpenGL, a desktop graphics API, into WebGL, which is the web variant of that API.

Continue reading %A Beginner’s Guide to WebGL%

by David Voyles via SitePoint