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?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/ILLUSTRATION
WORLD FLIGHTS
EXPLORATORY VISUALIZATIONS
EXPLORATORY VISUALIZATIONS
REAL-TIME DATA ANALYSIS
REAL-TIME COLOR DECOMPOSITION
SCIENTIFIC VISUALIZATION
LINE INTEGRAL CONVOLUTION
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 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
GLSL BUILT-IN FUNCTIONS
radians degrees sincos tan asin
acos atan powexp log exp2log2 sqrt inversesqrtabs sign floorceil fract modmin max clampmix step smoothstep
length distance dotcross normalize faceforward
reflect refract matrixCompMult
EXAMPLE: HOPF FIBRATION
HOPF FIBRATION
•HOPF MAP DEFINITION
•DATA MODEL
•FIBERS VIEW
•INTERACTIONS
WHAT IS THE HOPF MAP1 POINT IN A (3D) SPHERE MAPS TO
A CIRCLE IN A 4D SPHERE
WHAT IS THE HOPF MAP1 POINT IN A (3D) SPHERE MAPS TO
A CIRCLE IN A 4D SPHERE
?
WHAT IS THE HOPF MAPPROJECT THE 4D CIRCLES INTO 3D
SPACE USING A MAP PROJECTION
IDEALLY…
DATA MODEL
INSTANCED ARRAYS TO THE RESCUE!
FIBERS VIEW
0
2π
0 2π
GLSL
GLSL0
2π
FIBERS VIEW
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)] => [-π, π]
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!