More demos on http://philogb.github.io

1. WEBGL FOR GRAPHICS
AND DATA VISUALIZATION
NICOLAS GARCIA BELMONTE - @PHILOGB
UBER - I’M HIRING!

2. AGENDA
•WHAT IS WEBGL ?
•WHAT CAN WEBGL BE USED FOR ?
•HOW DOES WEBGL WORK ?
•WHAT DOES WEBGL CODE LOOK LIKE ?

3. WHAT IS WEBGL?

4. WHAT IS WEBGL?
WEBGL IS AN API TO ACCESS THE GPU

6. WHAT IS WEBGL?
OPENGL OPENGL ES WEBGL

7. WHAT CAN WEBGL BE USED FOR?

8. WEBGL USE-CASES
•EXPLORATORY VISUALIZATIONS
•REAL-TIME DATA ANALYSIS
•STORYTELLING
•SCIENTIFIC VISUALIZATION
•DATA ART/ILLUSTRATION

9. WORLD FLIGHTS
EXPLORATORY VISUALIZATIONS

10. EXPLORATORY VISUALIZATIONS

11. REAL-TIME DATA ANALYSIS
REAL-TIME COLOR DECOMPOSITION

12. STORYTELLING

13. SCIENTIFIC VISUALIZATION
LINE INTEGRAL CONVOLUTION

14. DATA ART

15. HOW DOES WEBGL WORK?

16. JAVASCRIPT
GPU (COMPILED PROGRAM)
WEBGL JS API
WEBGL API

17. JAVASCRIPT
FRAGMENT SHADER
WEBGL JS API
VERTEX SHADERGLSL API
GLSL API
WEBGL API

18. VERTEX SHADER
WEBGL PIPELINE

19. VERTEX SHADER
TRIANGLE ASSEMBLY
WEBGL PIPELINE

20. VERTEX SHADER
TRIANGLE ASSEMBLY
RASTERIZATION
WEBGL PIPELINE

21. VERTEX SHADER
TRIANGLE ASSEMBLY
RASTERIZATION
FRAGMENT SHADER
WEBGL PIPELINE

22. GLSL
A DSL FOR GRAPHICS
•C-LIKE
•BUILT-IN TYPES, FUNCTIONS FOR GRAPHICS
•OPERATOR OVERLOADING

23. 1 vec4 vector = vec4( 0, 1, vec2(0, 0) );
2 vec3 point = vector.xyz;
3 vec3 rgb = vector.rgb;
4 mat4 m = mat4(vector);
5 vec4 ans = vector * m;
6
7 float delta = 0.3;
8 vec4 from = vec4(0);
9 vec4 to = vec4(1);
10 vec4 current = from + (to - from) * delta;
11 vec4 current2 = mix(from, to, delta);
GLSL
SYNTAX

24. GLSL
BUILT-IN FUNCTIONS
radians degrees sin
cos tan asin
acos atan pow
exp log exp2
log2 sqrt inversesqrt
abs sign floor
ceil fract mod
min max clamp
mix step smoothstep
length distance dot
cross normalize faceforward
reflect refract matrixCompMult

25. EXAMPLE: HOPF FIBRATION

26. HOPF FIBRATION
•HOPF MAP DEFINITION
•DATA MODEL
•FIBERS VIEW
•INTERACTIONS

27. WHAT IS THE HOPF MAP
1 POINT IN A (3D) SPHERE MAPS TO
A CIRCLE IN A 4D SPHERE

28. WHAT IS THE HOPF MAP
1 POINT IN A (3D) SPHERE MAPS TO
A CIRCLE IN A 4D SPHERE
?

29. WHAT IS THE HOPF MAP
PROJECT THE 4D CIRCLES INTO 3D
SPACE USING A MAP PROJECTION

30. DEMO

31. HOPF MAP IN GLSL

32. DATA MODEL

33. IDEALLY…
DATA MODEL

34. INSTANCED ARRAYS TO THE RESCUE!

35. FIBERS VIEW

36. FIBERS VIEW

37. FIBERS VIEW

38. FIBERS VIEW
0
2π
0 2π
GLSL

39. GLSL0
2π
FIBERS VIEW

40. INTERACTIONS

41. INTERACTIONS
(0, 0, 0) (1, 0, 0)
(0, 0, 1) (1, 0, 1)
Every pixel maps to a unique color
Every color is mapped to a lat/lon position
[(0, 0, 0), (1, 0, 0)] => [0, 2π]
[(0, 0, 0), (0, 0, 1)] => [-π, π]

42. KEY TAKEAWAYS

43. KEY TAKEAWAYS
•USES THE GPU: SPEED & SCALE
•FROM DATA ART AND EXPLORATORY VIS
•LOW-LEVEL API: USE A LIBRARY

44. THANK YOU!
NICOLAS GARCIA BELMONTE - @PHILOGB
UBER - I’M HIRING!