This is a simple example of how to use WebGL to generate interactive images for the web or for applications.
See the first part of this series here.
WebGL is very similar to OpenGL. Both are used frequently in visualization software and game development, as well as in many GUI libraries.
Open index.html in the src folder with your browser.
Start by looking at the comments in the HTML. Each HTML document invokes an exampleXX.js script which is where the logic for setting up and running WebGL is. Go through the code in these scripts and see if you can complete the tasks.
There is also a script with helper functions called commonFunctions.js.
This example uses an additional JavaScript library called glMatrix to help with creating structures for matrices and vectors and performing mathematical operations on them. It is worth noting that there are many other libraries out there that can aid in using WebGL, and libraries that use WebGL behind the scenes.
The three-object-loader library was taken from here and modified to fit the needs of this tutorial. This library is usually used with three.js, a higher level rendering library.
Consider using a package manager like npm to organize your dependencies in a larger project.
The Bootstrap file is a style sheet obtained from Bootswatch. It allows the elements in the HTML to be styled according to a theme.
This example uses WebGL 2, which is not fully supported by all browsers. This table shows which browsers support this functionality.