Rachel Prudden talks about WebGL at ExeterWeb on 28th April 2016 www.techexeter.uk

1. WebGL

2. Hardware
accelerated
graphics

3. No additional
software

5. GPU

6. “The WebGL API may
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
make shapes

14. vertex shader
rasterise
fragment shader
blending
make shapes

15. vertex shader
rasterise
fragment shader
blending
make shapes

16. world space
screen space
transforms
model vertices
vertex shader

17. world space
screen space
vertex shader

18. world space
screen space
vertex shader

19. Screenshot: The Eight Thousanders
world space
screen space
vertex shader

22. vertex shader
rasterise
fragment shader
blending
make shapes

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!