O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
WEBGL FOR GRAPHICS
AND DATA VISUALIZATION
NICOLAS GARCIA BELMONTE - @PHILOGB
UBER - I’M HIRING!
AGENDA
•WHAT IS WEBGL ?
•WHAT CAN WEBGL BE USED FOR ?
•HOW DOES WEBGL WORK ?
•WHAT DOES WEBGL CODE LOOK LIKE ?
WHAT IS WEBGL?
WHAT IS WEBGL?
WEBGL IS AN API TO ACCESS THE GPU
WHAT IS WEBGL?
OPENGL OPENGL ES WEBGL
WHAT CAN WEBGL BE USED FOR?
WEBGL USE-CASES
•EXPLORATORY VISUALIZATIONS
•REAL-TIME DATA ANALYSIS
•STORYTELLING
•SCIENTIFIC VISUALIZATION
•DATA ART/ILL...
WORLD FLIGHTS
EXPLORATORY VISUALIZATIONS
EXPLORATORY VISUALIZATIONS
REAL-TIME DATA ANALYSIS
REAL-TIME COLOR DECOMPOSITION
STORYTELLING
SCIENTIFIC VISUALIZATION
LINE INTEGRAL CONVOLUTION
DATA ART
HOW DOES WEBGL WORK?
JAVASCRIPT
GPU (COMPILED PROGRAM)
WEBGL JS API
WEBGL API
JAVASCRIPT
FRAGMENT SHADER
WEBGL JS API
VERTEX SHADERGLSL API
GLSL API
WEBGL API
VERTEX SHADER
WEBGL PIPELINE
VERTEX SHADER
TRIANGLE ASSEMBLY
WEBGL PIPELINE
VERTEX SHADER
TRIANGLE ASSEMBLY
RASTERIZATION
WEBGL PIPELINE
VERTEX SHADER
TRIANGLE ASSEMBLY
RASTERIZATION
FRAGMENT SHADER
WEBGL PIPELINE
GLSL
A DSL FOR GRAPHICS
•C-LIKE
•BUILT-IN TYPES, FUNCTIONS FOR GRAPHICS
•OPERATOR OVERLOADING
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 v...
GLSL
BUILT-IN FUNCTIONS
radians degrees sin
cos tan asin
acos atan pow
exp log exp2
log2 sqrt inversesqrt
abs sign floor
ce...
EXAMPLE: HOPF FIBRATION
HOPF FIBRATION
•HOPF MAP DEFINITION
•DATA MODEL
•FIBERS VIEW
•INTERACTIONS
WHAT IS THE HOPF MAP
1 POINT IN A (3D) SPHERE MAPS TO
A CIRCLE IN A 4D SPHERE
WHAT IS THE HOPF MAP
1 POINT IN A (3D) SPHERE MAPS TO
A CIRCLE IN A 4D SPHERE
?
WHAT IS THE HOPF MAP
PROJECT THE 4D CIRCLES INTO 3D
SPACE USING A MAP PROJECTION
DEMO
HOPF MAP IN GLSL
DATA MODEL
IDEALLY…
DATA MODEL
INSTANCED ARRAYS TO THE RESCUE!
FIBERS VIEW
FIBERS VIEW
FIBERS VIEW
FIBERS VIEW
0
2π
0 2π
GLSL
GLSL0
2π
FIBERS VIEW
INTERACTIONS
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...
KEY TAKEAWAYS
KEY TAKEAWAYS
•USES THE GPU: SPEED & SCALE
•FROM DATA ART AND EXPLORATORY VIS
•LOW-LEVEL API: USE A LIBRARY
THANK YOU!
NICOLAS GARCIA BELMONTE - @PHILOGB
UBER - I’M HIRING!
OpenVisConf - WebGL for graphics and data visualization
Próximos SlideShares
Carregando em…5
×

5

Compartilhar

Baixar para ler offline

OpenVisConf - WebGL for graphics and data visualization

Baixar para ler offline

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

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!
  • nikai1

    Jun. 17, 2019
  • KarolStopyra

    Oct. 15, 2017
  • malikperang

    Aug. 11, 2016
  • thejaguarorg

    Aug. 4, 2015
  • EvgheniPolisciuc

    Apr. 7, 2015

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

Vistos

Vistos totais

5.452

No Slideshare

0

De incorporações

0

Número de incorporações

545

Ações

Baixados

66

Compartilhados

0

Comentários

0

Curtir

5

×