<aside> 📍 In my free time I got to work on a couple of projects while learning about webGL, shaders and basically 3d on the web. This is my attempt at dumping my knowledge and a couple of resources, thank me later.
If you want to skip to ThreeJs, Jump here
</aside>
WebGL is a Javascript api for rendering 2d and 3d on the web. It allows for image processing, effects and even physics simulations run on your computer’s gpu, rendering onto a HTML Canvas. It enables you access the capabilities of your computer’s gpu directly from the browser using Js and is based on OpenGL ES. WebGL is a JavaScript API that wraps around OpenGL and allows web developers to work with it in a more accessible way.
OpenGl is is a cross platform, cross language extensive low-level graphics library and api for defining (drawing, rendering) 2d & 3d graphics. It interacts with a GPU (graphics processing unit) to perform graphics rendering. When an OpenGL context is opened, it is essentially a connection to your computer’s GPU, shaders are compiled (using GLSL, OPenGL shading language), shaders runs on your gpu. Shaders contain the processing data about vertices and pixels (fragments), this in turn renders commands to openGL (about points, spatial data, textures, geometry, depth, light etc) which are executed on your GPU. Before the graphic is displayed on your screen, the shaders are processed (vertex & fragment), rasterisation, fragment operations and some others before it is written into a framebuffer.
TLDR; OpenGL is a low level api for rendering graphics, allowing developers to interact with the graphics hardware (gpu) and produce hardware accelerated visual output.
You can also checkout Direct3D, Vulkan if you want to learn about other 3D Api’s.
Well it’s still OpenGL but for Embedded systems, it is a subset of openGL used in embedded systems, mobile devices, and other resource-constrained platforms (smartphones, tablets, game consoles etc). WebGl is based on this specialised version, it omits some of the features and functions found in the desktop version of OpenGL.
I’ll keep this short, Shaders are like tiny computer programs that work inside your computer's graphics card. They tell the graphics card how things should look on your screen, including colors, brightness and adding textures to objects. GLSL is a specialised programming language designed for writing shaders that run on the GPU. It's specific to the OpenGL ecosystem and its variants, including WebGL. GLSL is C-like in its syntax and structure.
You can read more here: