Engagement/Developer Engagement/Grab bag/WebGL

WebGL is the 3D equivalent of canvas. It is hardware accelerated and allows you to create 3D animations and games in the browser. WebGL is the web version of OpenGL which is used to create desktop games. This means a lot of talent from the games industry can now come to the web without having to learn a new skill. The introduction of WebGL to the browser gave us a few new tricks like indexed arrays which allow for heavy computation in JavaScript using the GPU instead of the main CPU.

The Firefox Developer Tools feature a shader editor to debug WebGL - you can read all about it on the MDN page.

Issues with WebGL

• Programming WebGL is a different skill set from web development and the learning kerb might be a bit high for people. Libraries like three.js make things much easier but it still is a switch from a 2D to a 3D world.

Demos

• WebGL screencast(MP4) showing various demos from Alteredqualia
• Ginger is a great example for facial expressions in WebGL webm mp4 ogv
• The Skin renderer in WebGL looks pretty creepy but also very impressive. webm mp4 ogv
• The winners of the Mozilla Demoparty Competition are great examples of what can be done with WebGL
• The three.js demo site has a lot of great demos of both 2D and 3D examples using the library.
• Body Browser - Google took a 3D model of the human body and built a maps-style interface to it in WebGL webm mp4 ogv
• Evan Wallace has some very cool WebGL demos. One of them is a Water simulation webm mp4 ogv and another is a path tracing demo webm mp4 ogv

Presentations and articles

• Angelina Fabbro: Improving 2D & 3D Canvas Performance on the Web, One Frame at a Time (at JSConf2014) explains how to use the Developer Tools to debug WebGL code