Hardware accelerated
graphics
No additional software
“The WebGL API may be too tedious to use directly without some utility libraries” - Wikipedia
Graphics Pipeline
(0,0)
(1,-2)
(2,1)
vertex shader
rasterise
fragment shaderblending
make shapes
vertex shader
rasterise
fragment shaderblending
make shapes
vertex shader
rasterise
fragment shaderblending
make shapes
world space
screen space
transformsmodel vertices
vertex shader
world space
screen space
vertex shader
world space
screen space
vertex shader
Screenshot: The Eight Thousanders
world space
screen space
vertex shader
vertex shader
rasterise
fragment shaderblending
make shapes
attributes
colour
fragment shader
vec4(1.0, 0.0, 0.0, 1.0);
attributes
colour
fragment shader
attributes
colour
fragment shader
vec4(1.0, 0.0, 0.0, 1.0);
coords
attributes
colour
fragment shader
vec4(coords.x, 0.0, 0.0, 1.0);
attributes
colour
fragment shader
coords
vec4(coords.x, 0.0, 0.0, 1.0);
attributes
colour
fragment shader
coords
vec4(coords.y, 0.0, 0.0, 1.0);
attributes
colour
fragment shader
coords
vec4(coords.z, 0.0, 0.0, 1.0);
attributes
colour
fragment shader
coords, texture, lightPos, normals
texture2D(texture, coords) + light
Three.js + Shaders