Introduction to Webgl by Rachel Prudden

WebGL

Hardware accelerated

graphics

No additional software

GPU

“The WebGL API may be too tedious to use directly without some utility libraries” - Wikipedia

Three.js

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

Thanks!