WebGL Drawing
WebGL Drawing
It is important to understand that even if you are drawing in a 2D HTML canvas, WebGL is drawing in 3D.
Adding view direction, shades, and colors, you render the canvas in 3D.
WebGL Shaders
WebGL uses code written in OpenGL ES Shading Language (GLSL).
GLSL accepts vertices (pionts / endpoints) that defines a shape, and then generates screen pixels with different colors to simulate a 3D view.
GLSL uses two types of shaders: the vertex shader and the fragment shader.
Every time an object is displayed, the vertex shader has to run to recalculate the image.
The fragment shader runs for every pixel in the object to be drawn.
Vertex Shader Code
const vShader = '
attribute vec4 aVertexPosition;
uniform mat4
uModelViewMatrix;
uniform mat4 uProjectionMatrix;
void main() {
gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
}';
Fragment Shader Code
const fShader = '
void main() {
gl_FragColor =
vec4(1.0, 1.0, 1.0, 1.0);
}';
