The Developers’ Guide to WebGL 2.0
Let’s make computer graphics on the web!  💻

Do you want to go to mars?

I don’t. It’s a death trap (Elon Musk). But we can enjoy a virtual rendering of it:
This talk will cover a high-level overview of the graphics rendering pipeline, which makes up the rendering above. 

Source code will be linked at the document, so there is no need to copy code.

About Xavier

I am:
  • Dabbling in graphics programming and data visualisation at CSIRO
  • Twitter as 🐦 @xavier_ho 
  • Mastodon as 🐘 
  • Khronos Melbourne Chapter / Computer Graphics on the Web organiser
  • — be my pen pal ✒️

In this talk we will …

  • Introduce WebGL 
  • Give an overview of the graphics rendering pipeline
  • Apply above knowledge using WebGL 2.0
  • Provide useful links at the end of presentation, which will be linked after the talk
  • Provide a starting point to many WebGL tutorials out there

This talk will not …

  • Answer topical questions like “How do I create a glass shader with specular highlights, refraction and caustics”, or “How do I do networking in a WebVR game?”
  • Touch on WebGL frameworks like Three.js, A-Frame, or Whitestorm.js. There are plenty of resources online. I will try to be framework-agnostic in this talk.

Who has used Three.js or A-Frame?


What is WebGL?

“WebGL is a Javascript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins. It is designed and maintained by the non-profit Khronos Group.” (Wikipedia) 

What does WebGL offer exclusively that other technology doesn’t?

WebGL offers the only* programmable API to define 3D rendering in an HTML context. Like ECMAScript, it’s implemented only in Javascript by various browser vendors. Just as other browser-implementations go, WebGL does not need plugins to work.

  • * Technically, you can program in Javascript and set the CSS3 `transform` property (see API for a high-level library), but that is not standardised, and is besides the point.

WebGL sets the foundation for many technologies like Mozilla A-Frame, Three.js, Unity WebGL Export, and WebVR

WebGL follows the OpenGL ES specification (graphics library for embedded systems, like smartphones) closely, and many concepts will be familiar to those developers.

Who can access WebGL 2.0 today?

Over 3.7 billion people have access to the internet (World Internet Stats). Approximately 1.4 billion (38.3%) of them use a browser that supports WebGL 2.0 (W3Counter, Can I Use), with WebGL 1.0 supporting approximately 3.4 billion people (92%) (Can I Use).

  • Side note: this also means that the majority of the population (~51% of the 7.5 billion) does not have access to even basic internet connections. Please design in mind with other humans in need 🙏🏼

A thing about the graphics rendering pipeline