WebGL Core Concepts
People often think WebGL is a 3D engine, but it is a rasterization engine that provides a low level API. It draws points, lines and triangles based on code you supply.
This can be used for building a 3D engine, but it is also good for image processing. Also, there are 3D engines that are implemented on top of WebGL. Popular choices are:
It runs on the GPU
WebGL runs little programs that are run on the GPU on your computer.
- These little programs consist of a pair of functions, called shaders.
- Shaders are written in a C-like programming language, GLSL
- There's a vertex shader and a fragment shader
Vertex and Fragment shaders
The job of the Vertex shader is to calculate vertex positions. Based on the positions it returns, WebGL can then rasterize certain primitives, like points, lines or triangles.
When rasterizing these shapes, the fragment shader is run. This is done in a highly parallelized manner for each fragment(=pixel) of the shape.
What is the WebGL API about?
- initializing a
- compile shader code
- specify buffer data for the vertex shader
- uploading images to the GPU which can be used as textures
- calling drawArrays for drawing shapes on screen (using the GL buffers and the shader code)