WebGL Resources

Updated on Jan 7  2016


WebGLResources

Deborah R. Fowler



Resources for WebGL

Posted on  July 15   2015
Updated on  Jan 7  2016


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.
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:
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.

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.

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.


Great article on Thinking for WebGL http://goocreate.com/learn/general-differences-between-webgl-and-native-3d-applications/
However it is also about goo create and goo engine which uses and IDE environment for webGL with the product, but these are good points to keep in mind. Interesting forum about three.js versus goocreate here.

Important points from the above article are below.