A little about WebGL
--
WebGL is a JavaScript library (API ) that works with the HTML5 canvas element to not just create 2D shapes but virtual 3D visuals on modern browsers. It is based on the OpenGL ES API that works with computer graphics so that developers can access GPU (Graphics Processing Unit). OpenGL is used by GPU manufacturers to implement their unique code for their graphics cards drivers. It is also cross-platform meaning that it can be run by major operating systems. It has been managed by the non-profit Khronos Group. Alternatives to OpenGL are Direct3D developed by Microsoft, Vulkan also developed by the Khronos Group, Metal developed by Apple and Mantle developed by AMD.
WebGL has been released in 2011. This is years after we have been introduced to amazing 3D animations like Toy Story and Monsters Inc or computer games like Call of Duty 4: Modern Warfare. The purpose of WebGL is to showcase interactive 3D on a web browser. Epic Games Studio converts their games made in Unreal Engine using Emscripten by Mozilla to cross-compile C and C++ code into JavaScript.
Emscripten is a compiler technology that produces subsets of JavaScript known as asm.js.
asm.js is a subset of JavaScript designed to allow computer software written in languages such as C to be run as web applications
For example, the following C++ code will be interpreted into JavaScript by Emscripten:
int plusOne (int i) {
return i + 1;
};⇩
function plusOne (i) {
i = i|0;
return (i + 1)|0;
}This enables users playing games online on the browser without installing and downloading any file. It is recommended to use the 64-bit version of the browser.
No DOM (Document Object Model) is involved directly into WebGL. We would need to deal with the manipulation inside the canvas element of the HTML file ourselves. There is also no file format built it into the API which means we can’t upload any obj file. We can’t load any 3D file natively and show it on a browser. But we can, using JavaScipt!
Here is how it works as steps in its simplest form under the hood:
1. Creating <canvas> element.
2. Obtaining a drawing context.
This is were we create HTML 2D context but thanks to WebGL we now can create 3D context.
3. Initializing the viewport.
Similar to object orientation class initialization, this is an initialized function in JavaScript where it returns WebGL and creates a viewport if the browser supports it otherwise put up an error message.
4. Creating one or more buffers to represent a 3D object.
5. Creating one or more matrices.
Buffers of data represent 3D objects attributes for example colour. These are an array of binary data that is compact and runs very fast.
const colors = [
1.0, 1.0, 1.0, 1.0, // white
1.0, 0.0, 0.0, 1.0, // red
0.0, 1.0, 0.0, 1.0, // green
0.0, 0.0, 1.0, 1.0, // blue
];Matrices mainly refer to 3D transformation attributes to define X, Y and Z of a 3D object
6. Creating one or more shaders.
7. Initializing the shaders.
Programmable shaders refer to creating materials for objects written in OpenGL Shading Language (GLSL). Note that we cannot use JavaScript to create shaders.
8. Drawing one or more primitives.
Refers to basic 3D geometry including cube, sphere, cylinder, pyramid, etc.
If you find these steps time consuming and as a barrier to your visual creation then you can use the following abstracted WebGL engines that produce 3D content so you can focus on coding and creating your goals than worrying about the building blocks of WebGL.
— — — — — — — — — — — — — —FIN- — — — — — — — — — — — — ——
