WebGLResources

Deborah R. Fowler

Resources for WebGL

Posted on July 15 2015
Updated on Nov 1 2020 to remove dead links

What is WebGL?

Click here for the Khronos Group illustration of WebGL/OpenGL/OpenCL diagram, page 21
or here

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." (wiki).

Note: JavaScript is not Java!

You will see similarities between Javascript/WebGL code and C++/OpenGL - each has their own purpose.

I have long been interested in/using C++/OpenGL but have recently become interested in WebGL. Below are some sites I have found useful. The first has an excellent introduction to the basics and the second is a java script library dedicated to animated 3D graphics.

http://www.webglacademy.com/
http://threejs.org/

Three.js uses WebGL. For 3D, the threejs adds functionality so you don't have to do it yourself! The source code is hosted on GitHub. Download the js folder from the source below.

An article about the 10 most popular html5, javascript and webgl 3D game engines and frameworks exists here. There is also an article comparing three.js and babylon.js here as well as an article here comparing four popular WebGL 3D Engines - three.js, babylon.js, Goo Engine and PlayCanvas. I will be experimenting with three.js for the moment.

Also of intersest:

http://blog.teamtreehouse.com/the-beginners-guide-to-three-js
WebGL VR: http://smus.com/responsive-vr/
Siggraph University “An Introduction to WebGL Programming by Ed Angel and Dave Shreiner at https://www.youtube.com/watch?v=tgVLb6fOVVc

If you check out the webglacademy lesson "2 - 3D colored Triangle", the code is annotated to give you a clear understanding of what the script is doing. A "Canvas" (similar to OpenGL/freeglut's window) is defined and used to draw on.

html - inserts scripts into document headers, calls the java function and defines a canvas.
script.js - similar to C++ with OpenGL calls but now in Javascript with WebGL calls.
libs.js - var LIBS = {}; - sets up useful functions ...

In the example, matrix multiplication is set up to define a camera projection and to move the triangle (this is where matrix multiplication has a real world (well CG world) application!

In addition, for simple parameter interface you can also include Dat-gui - a GUI widget for demos found at
http://learningthreejs.com/blog/2011/08/14/dat-gui-simple-ui-for-demos/

In the left bar menu (or below) you will see examples of how I have dappled a little with Webgl and hope to revisit soon. The first three are from the documentation above at webglacademy - try them yourself! I did!

The phyllotactic pattern I implemented in threejs with the Dat-gui.

Phyllotactic Pattern

The Spirograph pattern I implemented in threejs with the Dat-gui. There are some really excellent articles about Spirograph. My favorites include the wiki page as well as this display here.

Sept 5 - 2015 - Line width on Windows does not work by default! Important note: Linewidth does not work on firefox/chrome browsers on windows (it will always default to 1 no matter what your code says). This is a bug in "Angle".

A work around in Firefox is to type about:config and then search for webgl.disable-angle and toggle it from false to true. Now you will see your correct line width. Hopefully this bug will be fixed in Angle soon.

There was a great article on Thinking for WebGL. It appears that as of Nov 1, 2020, Goo is no longer popular (was 2014). Quick search reveals Goo Create declared bankruptcy. There still appears a github repository at github.com/GooTechnologies/goojs
which is now 5-6 years old. Not advised to use, however the articles previously posted and an interesting forum about three.js versus goocreate here lead to the notes below.

Important points from the above article are below.

"Limit the data needed to be transferred, make use of the local memory and offload complex calculations to the GPU"
"Mobile First Development" - since this will be the lower limit
Limit data

using code minification programs can reduce your file size typically by 50%
reduce texture size
reduce load time by using procedurally generated geometry (note to self identify if threejs does this under the hood?) for example http://verbnurbs.com/
reduce load time with procedurally generated textures
do specular effects in the shader (shadertoy)

Use local memory

"Do not create objects unconditionally in the main game loop". requestAnimationFrame - creates objects as it updates
polygon reduction
reduce draw calls

Move calculations from the CPU to the GPU

Note that three.js is still being used.

WebGL Resources

Deborah R. Fowler

Resources for WebGL

What is WebGL?