Link to the next tutorial - Tutorial 2: Basic Three.js

1. What is WebGL?

WebGL (Short for Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins.

Advantages:

• Free and native in major browsers
• Allowing GPU-accelerated
• Usage of physics (consume CPU resources)
• Shader code is written in OpenGL ES Shading Language (GLSL ES)
• WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

Disadvantages:

• Heavy application may crash clients browser.

2. Why use WebGL for Computer Graphics project?

Prior to the last several years, ICT bachelor students had faced problems when working on Computer Graphics labworks and/or the final project.

For instance:

• Coding with C++:
  • MUST have Visual Studio installed on the local machine [around 20GB on disk].
  • Waste time on configuring libraries (GLEW, GLUT, GLFW) and might get the LNK2019 error (if configure not correctly).
  • Running CMake from this repo could help, but the installation process is long, and need to be extremely careful.
  • Somehow, you can save your precious time with the vcpkg when installing/configuring libraries.
• Coding with Python:
  • Recommended to have "Python Virtual Environment management" such as Virtualenv or Anaconda
  • Better than those who use C++ for setting up libraries, just do pip install [package] and everything will be done.

To overcome the difficulty, we would love to have a look at WebGL and JavaScript. Of course, we will need to install Node.js and npm. Once finished, we can use npm to install any package just like Python pip command.

In addition, there is a very famous JavaScript 3D Library - the Three.js. It is well-developed and constantly maintained by the Github community. Three.js documentation is also very easy to read and understand with a variety of examples.