OpenVisConf - WebGL for graphics and data visualization

3,421 views

Published on

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

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,421
On SlideShare
0
From Embeds
0
Number of Embeds
525
Actions
Shares
0
Downloads
31
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

OpenVisConf - WebGL for graphics and data visualization

  1. 1. WEBGL FOR GRAPHICS AND DATA VISUALIZATION NICOLAS GARCIA BELMONTE - @PHILOGB UBER - I’M HIRING!
  2. 2. AGENDA •WHAT IS WEBGL ? •WHAT CAN WEBGL BE USED FOR ? •HOW DOES WEBGL WORK ? •WHAT DOES WEBGL CODE LOOK LIKE ?
  3. 3. WHAT IS WEBGL?
  4. 4. WHAT IS WEBGL? WEBGL IS AN API TO ACCESS THE GPU
  5. 5. WHAT IS WEBGL? OPENGL OPENGL ES WEBGL
  6. 6. WHAT CAN WEBGL BE USED FOR?
  7. 7. WEBGL USE-CASES •EXPLORATORY VISUALIZATIONS •REAL-TIME DATA ANALYSIS •STORYTELLING •SCIENTIFIC VISUALIZATION •DATA ART/ILLUSTRATION
  8. 8. WORLD FLIGHTS EXPLORATORY VISUALIZATIONS
  9. 9. EXPLORATORY VISUALIZATIONS
  10. 10. REAL-TIME DATA ANALYSIS REAL-TIME COLOR DECOMPOSITION
  11. 11. STORYTELLING
  12. 12. SCIENTIFIC VISUALIZATION LINE INTEGRAL CONVOLUTION
  13. 13. DATA ART
  14. 14. HOW DOES WEBGL WORK?
  15. 15. JAVASCRIPT GPU (COMPILED PROGRAM) WEBGL JS API WEBGL API
  16. 16. JAVASCRIPT FRAGMENT SHADER WEBGL JS API VERTEX SHADERGLSL API GLSL API WEBGL API
  17. 17. VERTEX SHADER WEBGL PIPELINE
  18. 18. VERTEX SHADER TRIANGLE ASSEMBLY WEBGL PIPELINE
  19. 19. VERTEX SHADER TRIANGLE ASSEMBLY RASTERIZATION WEBGL PIPELINE
  20. 20. VERTEX SHADER TRIANGLE ASSEMBLY RASTERIZATION FRAGMENT SHADER WEBGL PIPELINE
  21. 21. GLSL A DSL FOR GRAPHICS •C-LIKE •BUILT-IN TYPES, FUNCTIONS FOR GRAPHICS •OPERATOR OVERLOADING
  22. 22. 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
  23. 23. 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
  24. 24. EXAMPLE: HOPF FIBRATION
  25. 25. HOPF FIBRATION •HOPF MAP DEFINITION •DATA MODEL •FIBERS VIEW •INTERACTIONS
  26. 26. WHAT IS THE HOPF MAP 1 POINT IN A (3D) SPHERE MAPS TO A CIRCLE IN A 4D SPHERE
  27. 27. WHAT IS THE HOPF MAP 1 POINT IN A (3D) SPHERE MAPS TO A CIRCLE IN A 4D SPHERE ?
  28. 28. WHAT IS THE HOPF MAP PROJECT THE 4D CIRCLES INTO 3D SPACE USING A MAP PROJECTION
  29. 29. DEMO
  30. 30. HOPF MAP IN GLSL
  31. 31. DATA MODEL
  32. 32. IDEALLY… DATA MODEL
  33. 33. INSTANCED ARRAYS TO THE RESCUE!
  34. 34. FIBERS VIEW
  35. 35. FIBERS VIEW
  36. 36. FIBERS VIEW
  37. 37. FIBERS VIEW 0 2π 0 2π GLSL
  38. 38. GLSL0 2π FIBERS VIEW
  39. 39. INTERACTIONS
  40. 40. 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)] => [-π, π]
  41. 41. KEY TAKEAWAYS
  42. 42. KEY TAKEAWAYS •USES THE GPU: SPEED & SCALE •FROM DATA ART AND EXPLORATORY VIS •LOW-LEVEL API: USE A LIBRARY
  43. 43. THANK YOU! NICOLAS GARCIA BELMONTE - @PHILOGB UBER - I’M HIRING!

×