Introduction to Webgl by Rachel Prudden

1.
WebGL

2.
Hardware accelerated graphics

3.
No additional software

5.
GPU

6.
“The WebGL APImay be too tedious to use directly without some utility libraries” - Wikipedia

8.
Three.js

11.
Graphics Pipeline

12.
(0,0) (1,-2) (2,1)

13.
vertex shader rasterise fragment shader blending makeshapes

14.

15.

16.
world space screen space transforms modelvertices vertex shader

17.
world space screen space vertexshader

18.
world space screen space vertexshader

19.
Screenshot: The EightThousanders world space screen space vertex shader

22.

23.
attributes colour fragment shader

24.
vec4(1.0, 0.0, 0.0,1.0); attributes colour fragment shader

25.
attributes colour fragment shader vec4(1.0, 0.0,0.0, 1.0);

26.
coords attributes colour fragment shader vec4(coords.x, 0.0,0.0, 1.0);

27.
attributes colour fragment shader coords vec4(coords.x, 0.0,0.0, 1.0);

28.
attributes colour fragment shader coords vec4(coords.y, 0.0,0.0, 1.0);

29.
attributes colour fragment shader coords vec4(coords.z, 0.0,0.0, 1.0);

30.
attributes colour fragment shader coords, texture,lightPos, normals texture2D(texture, coords) + light

33.
Three.js + Shaders

35.
Thanks!

More Related Content