2D- und 3D-Datenvisualisierung für alle Plattformen mit HTML5

View Slide

SPECIAL DAY "HTML5 CROSS-PLATTFORM"

View Slide

INTRODUCTION
Christian Liebel Manuel Rauber
[email protected]
@chris_liebel
[email protected]
@manuelrauber

View Slide

TALKING POINTS
2D 3D
Overview
Browser support, performance
API
Basics, retina scaling,
animation, interaction
Examples
Overview
Basics
WebGL & three.js
Browser support, controls
Examples

View Slide

2D VISUALIZATION
HTML5 CANVAS
Manuel Rauber
@manuelrauber

View Slide

CROSS PLATFORM
Native Multi Platform Cross Platform
One app per
platform
Less to none
code sharing
Java/Swift/C#
One app per
supported
platforms
Medium code
sharing
Xamarin (C#)
One app for all
High code
sharing
HTML/JS

View Slide

Plain bitmap for the web
Cross platform graphic manipulations
High performance
Mouse, touch & gamepad support
Low energy consumpting animations

View Slide

BROWSER SUPPORT (BASIC)
From http://caniuse.com/#search=canvas

View Slide

BROWSER SUPPORT (OVERALL)
From http://caniuse.com/#search=canvas

View Slide

PERFORMANCE
CHROME @ MACBOOK PRO
From http://jsperf.com/html-vs-svg-vs-canvas/31

View Slide

PERFORMANCE
ANDROID @ SAMSUNG GALAXY NOTE
From http://jsperf.com/html-vs-svg-vs-canvas/31

View Slide

COORDINATE SYSTEM
Cartesian: (0/0) bottom left
Canvas: (0/0) top left
From http://www.sitepoint.com/html5-canvas-tutorial-introduction/

View Slide

USAGE
<
!
D
O
C
T
Y
P
E h
t
m
l
>
<
h
t
m
l
>
<
h
e
a
d
>
<
t
i
t
l
e
>
C
a
n
v
a
s
!
<
/
t
i
t
l
e
>
<
/
h
e
a
d
>
<
b
o
d
y
>
<
c
a
n
v
a
s
>
<
/
c
a
n
v
a
s
>
<
/
b
o
d
y
>
<
/
h
t
m
l
>

View Slide

FALLBACK
<
!
D
O
C
T
Y
P
E h
t
m
l
>
<
h
t
m
l
>
<
h
e
a
d
>
<
t
i
t
l
e
>
C
a
n
v
a
s
!
<
/
t
i
t
l
e
>
<
/
h
e
a
d
>
<
b
o
d
y
>
<
c
a
n
v
a
s
>
T
h
i
s t
e
x
t i
s s
h
o
w
n
,
w
h
e
n a b
r
o
w
s
e
r d
o
e
s n
o
t
s
u
p
p
o
r
t c
a
n
v
a
s
.
<
/
c
a
n
v
a
s
>
<
/
b
o
d
y
>
<
/
h
t
m
l
>

View Slide

CONTEXTS
2D context: CanvasRenderingContext2D
v
a
r c
o
n
t
e
x
t = c
a
n
v
a
s
.
g
e
t
C
o
n
t
e
x
t
(
'
2
d
'
)
;
WebGL context: WebGLRenderingContext
v
a
r c
o
n
t
e
x
t = c
a
n
v
a
s
.
g
e
t
C
o
n
t
e
x
t
(
'
w
e
b
g
l
'
)
;

View Slide

API
DRAWING
v
o
i
d f
i
l
l
R
e
c
t
(
x
, y
, w
i
d
t
h
, h
e
i
g
h
t
)
;
v
o
i
d s
t
r
o
k
e
R
e
c
t
(
x
, y
, w
i
d
t
h
, h
e
i
g
h
t
)
;
v
o
i
d c
l
e
a
r
R
e
c
t
(
x
, y
, w
i
d
t
h
, h
e
i
g
h
t
)
;
v
o
i
d f
i
l
l
T
e
x
t
(
t
e
x
t
, x
, y [
, m
a
x
W
i
d
t
h
]
)
;
v
o
i
d s
t
r
o
k
e
T
e
x
t
(
t
e
x
t
, x
, y [
, m
a
x
W
i
d
t
h
]
)
;
MDN: CanvasRenderingContext2D

View Slide

API
PATHS
v
o
i
d b
e
g
i
n
P
a
t
h
(
)
;
v
o
i
d c
l
o
s
e
P
a
t
h
(
)
;
v
o
i
d m
o
v
e
T
o
(
x
, y
)
;
v
o
i
d l
i
n
e
T
o
(
x
, y
)
;
v
o
i
d b
e
z
i
e
r
C
u
r
v
e
T
o
(
c
p
1
x
, c
p
1
y
, c
p
2
x
, c
p
2
y
, x
, y
)
;
v
o
i
d r
e
c
t
(
x
, y
, w
i
d
t
h
, h
e
i
g
h
t
)
;
v
o
i
d f
i
l
l
(
)
;
v
o
i
d s
t
r
o
k
e
(
)
;

View Slide

API
PIXEL MANIPULATION
I
m
a
g
e
D
a
t
a c
r
e
a
t
e
I
m
a
g
e
D
a
t
a
(
w
i
d
t
h
, h
e
i
g
h
t
)
;
I
m
a
g
e
D
a
t
a g
e
t
I
m
a
g
e
D
a
t
a
(
s
x
, s
y
, s
w
, s
h
)
;
v
o
i
d p
u
t
I
m
a
g
e
D
a
t
a
(
i
m
a
g
e
d
a
t
a
, d
x
, d
y
)
;

View Slide

RETINA SUPPORT

View Slide

View Slide

RETINA - HOW TO
f
u
n
c
t
i
o
n a
d
j
u
s
t
F
o
r
R
e
t
i
n
a
(
) {
i
f (
!
w
i
n
d
o
w
.
d
e
v
i
c
e
P
i
x
e
l
R
a
t
i
o |
| w
i
n
d
o
w
.
d
e
v
i
c
e
P
i
x
e
l
R
a
t
i
o <
= 1
) {
r
e
t
u
r
n
;
}
v
a
r w
i
d
t
h = c
a
n
v
a
s
.
w
i
d
t
h
;
v
a
r h
e
i
g
h
t = c
a
n
v
a
s
.
h
e
i
g
h
t
;
c
a
n
v
a
s
.
s
t
y
l
e
.
w
i
d
t
h = w
i
d
t
h + '
p
x
'
;
c
a
n
v
a
s
.
s
t
y
l
e
.
h
e
i
g
h
t = h
e
i
g
h
t + '
p
x
'
;
c
a
n
v
a
s
.
w
i
d
t
h = w
i
d
t
h * w
i
n
d
o
w
.
d
e
v
i
c
e
P
i
x
e
l
R
a
t
i
o
;
c
a
n
v
a
s
.
h
e
i
g
h
t = h
e
i
g
h
t * w
i
n
d
o
w
.
d
e
v
i
c
e
P
i
x
e
l
R
a
t
i
o
;
c
o
n
t
e
x
t
.
s
c
a
l
e
(
w
i
n
d
o
w
.
d
e
v
i
c
e
P
i
x
e
l
R
a
t
i
o
, w
i
n
d
o
w
.
d
e
v
i
c
e
P
i
x
e
l
R
a
t
i
o
)
;
}

View Slide

ANIMATIONS
THE OLD WAY
setTimeout
f
u
n
c
t
i
o
n d
r
a
w
(
) {
/
/ d
r
a
w r
o
u
t
i
n
e
s
e
t
T
i
m
e
o
u
t
(
d
r
a
w
, 1
0
0
0
/
6
0
)
;
}
setInterval
s
e
t
I
n
t
e
r
v
a
l
(
f
u
n
c
t
i
o
n (
) {
/
/ d
r
a
w r
o
u
t
i
n
e
}
, 1
0
0
0
/
6
0
)
;

View Slide

ANIMATIONS
THE MODERN WAY
requestAnimationFrame
v
a
r a
n
i
m
a
t
i
o
n
F
r
a
m
e
;
f
u
n
c
t
i
o
n s
t
a
r
t
A
n
i
m
a
t
i
o
n
(
) {
v
a
r s
t
e
p = f
u
n
c
t
i
o
n
(
) {
/
/ d
r
a
w r
o
u
t
i
n
e
a
n
i
m
a
t
i
o
n
F
r
a
m
e = w
i
n
d
o
w
.
r
e
q
u
e
s
t
A
n
i
m
a
t
i
o
n
F
r
a
m
e
(
s
t
e
p
)
;
}
a
n
i
m
a
t
i
o
n
F
r
a
m
e = w
i
n
d
o
w
.
r
e
q
u
e
s
t
A
n
i
m
a
t
i
o
n
F
r
a
m
e
(
s
t
e
p
)
;
f
u
n
c
t
i
o
n s
t
o
p
A
n
i
m
a
t
i
o
n
(
) {
w
i
n
d
o
w
.
c
a
n
c
e
l
A
n
i
m
a
t
i
o
n
F
r
a
m
e
(
a
n
i
m
a
t
i
o
n
F
r
a
m
e
)
;
}
MDN: ,
requestAnimationFrame cancelAnimationFrame

View Slide

ANIMATIONS
PROBLEMS WITH "OLD" TECHNIQUES
If the callback function takes longer than the timer will
call it, the callback function gets queued.
Could lead quickly to an "infinite" amount of queued
callback functions.
Timers continue to work in background tabs, the browser
will render invisible animations (wastage of CPU and
battery life).
Especially bad for mobile devices.
From https://dev.opera.com/articles/better-performance-with-requestanimationframe/

View Slide

ANIMATIONS
WHAT REQUESTANIMATIONFRAME DOES
Only executed when visible to the user
(will stop in background tabs!).
No wastage of CPU and battery life.
Frame is only drawn when browser is ready and no other
frame waits for drawing.
No "infinite" amount of queued callback functions.

View Slide

ANIMATIONS
WHAT REQUESTANIMATIONFRAME
DOESN'T DO
As the name suggests: Only one frame is requested.
r
e
q
u
e
s
t
A
n
i
m
a
t
i
o
n
F
r
a
m
e has to be called within the
callback to get an animation loop.
You don't know, when the callback will be executed.
Animations on the same page, where one is in the visible
area and one not, will not run synchronously since the
hidden one's r
e
q
u
e
s
t
A
n
i
m
a
t
i
o
n
F
r
a
m
e will not be
called.

View Slide

INTERACTION
KEYBOARD & MOUSE SUPPORT
Canvas supports all keyboard & mouse events like
k
e
y
d
o
w
n
, k
e
y
u
p
, m
o
u
s
e
d
o
w
n or m
o
u
s
e
m
o
v
e
.
c
a
n
v
a
s
.
a
d
d
E
v
e
n
t
L
i
s
t
e
n
e
r
(
'
m
o
u
s
e
m
o
v
e
'
, f
u
n
c
t
i
o
n (
m
o
u
s
e
E
v
e
n
t
) {
/
/ m
o
u
s
e e
v
e
n
t r
o
u
t
i
n
e
}
)
;
c
a
n
v
a
s
.
a
d
d
E
v
e
n
t
L
i
s
t
e
n
e
r
(
'
k
e
y
d
o
w
n
'
, f
u
n
c
t
i
o
n (
k
e
y
E
v
e
n
t
) {
/
/ k
e
y d
o
w
n e
v
e
n
t r
o
u
t
i
n
e
}
)
;
MDN: ,
MouseEvent KeyboardEvent

View Slide

INTERACTION
TOUCH
Canvas supports all touch events like t
o
u
c
h
s
t
a
r
t
,
t
o
u
c
h
m
o
v
e
, t
o
u
c
h
e
n
d
.
Consider using a library for recognizing gestures like
.
HammerJS
c
a
n
v
a
s
.
a
d
d
E
v
e
n
t
L
i
s
t
e
n
e
r
(
'
t
o
u
c
h
m
o
v
e
'
, f
u
n
c
t
i
o
n (
t
o
u
c
h
E
v
e
n
t
) {
/
/ t
o
u
c
h m
o
v
e e
v
e
n
t r
o
u
t
i
n
e
}
)
;
MDN: ,
Touch events TouchEvent

View Slide

EXAMPLES
WITHIN GITHUB REPOSITORY
1. Basic circle
2. Circle with gradient
3. Retina support
4. requestAnimationFrame
5. Time-based animations
6. Mouse Move
7. Touch Move
8. Manipulating a rectangle with HammerJS
9. Rotating Pie Chart

View Slide

EXAMPLES
WITHIN THE WEB
Gesture recognition:
Video explosion:
Zen Photon Garden:
Zoom Charts:
Many more examples @
http://revealjs.herokuapp.com/
http://www.craftymind.com/factory/html5video/CanvasVideo
http://zenphoton.com/
https://zoomcharts.com/developers/en/net-
chart/examples/items/link-items.html
http://www.canvasdemos.com/

View Slide

VIDEO EXPLOSION
From http://www.craftymind.com/factory/html5video/CanvasVideo.html

View Slide

ZEN PHOTON GARDEN
From http://zenphoton.com/

View Slide

ZOOM CHARTS
From https://zoomcharts.com/developers/en/net-chart/examples/items/link-items.html

View Slide

LIVE DEMO

View Slide

3D VISUALIZATION
Christian Liebel
@chris_liebel

View Slide

3D CONTENT
IN A 3D WORLD
WITH 2D SCREENS
scenes, cameras, rendering

View Slide

COORDINATE SYSTEM
Right-handed
From https://msdn.microsoft.com/library/dn479430(v=vs.85).aspx

View Slide

CAMERA FRUSTUM
From https://msdn.microsoft.com/library/dn479430(v=vs.85).aspx

View Slide

WEBGL
Web Graphics Library
Hardware accelerated (GPU)
New canvas rendering context w
e
b
g
l

View Slide

PROVEN TECHNOLOGY
Based on OpenGL for Embedded Systems
Blender & Unity can export to WebGL
ANGLE (Chrome/Firefox): Rendering on Direct3D

View Slide

THREE.JS
Native WebGL is complex
Open-source JavaScript library
High-level API abstracting WebGL (and more)

View Slide

STRUCTURE
Geometry: shape (cube, sphere, …)
Material: color, texture, light reflection
Mesh: 3D object (geometry + material)

View Slide

BROWSER SUPPORT
From http://caniuse.com/#search=webgl

View Slide

MOBILE PLATFORM SUPPORT
iOS 8+
Android
WebView 36+
Crosswalk
Windows (Phone) 8.1+

View Slide

CONTROLS
Mouse/Keyboard
Touch
Gamepad

View Slide

A WORD ON TOUCH EVENTS…
Pointer Events vs. Touch Events
Browser support varies on desktop
three.js controls only support Touch Events

View Slide

A WORD ON GAMEPADS…
HTML5 Gamepad API
Polling (requestAnimationFrame)
Supported by Chrome, Firefox, MS Edge, Opera

View Slide

THE CREATION OF THE WORLD

View Slide

EVEN MORE SAMPLES…
Flight Arcade Physijs three.js samples

View Slide

SUMMARY
Cross platform high-performance graphic manipulation
2D & 3D
Hardware acceleration
Supported by all major browsers
Touch-enabled, gamepad-enabled

View Slide

THANK YOU!
GitHub repository:
https://github.com/thinktecture/basta-herbst-2015-2d-3d
thinktecture.com

View Slide

RESOURCES
GitHub repository:
Canvas browser support:
Cordova:
Ionic:
Gulp:
TypeScript:
CanvasRenderingContext2D:
WebGLRenderingContext:
requestAnimationFrame:
https://github.com/thinktecture/basta-herbst-2015-2d-3d
http://caniuse.com/#search=canvas
https://cordova.apache.org/
http://ionicframework.com/
http://gulpjs.com
http://www.typescriptlang.org/
https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D
https://developer.mozilla.org/en/docs/Web/API/WebGLRenderingContext
https://developer.mozilla.org/en-
US/docs/Web/API/window/requestAnimationFrame

View Slide

View Slide

2D- und 3D-Datenvisualisierung für alle Plattformen mit HTML5

2D- und 3D-Datenvisualisierung für alle Plattformen mit HTML5

Manuel Rauber

More Decks by Manuel Rauber

Other Decks in Programming

Featured

Transcript