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/ILLUSTRATION

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 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

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 position

[(0, 0, 0), (1, 0, 0)] => [0, 2π]

[(0, 0, 0), (0, 0, 1)] => [-π, π]

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!