Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Manuel Rauber
September 30, 2015

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

Zahlen und Ziffern, schwarz auf weiß, sind für sich genommen ziemlich langweilig und oftmals nur bedingt aussagekräftig. Es bedarf einer Visualisierung, um Zusammenhänge verstehen und Daten vergleichen zu können. Mit Webtechnologien stehen Ihnen hierfür mehr Möglichkeiten zur Verfügung denn je. Neben 2-D-Diagrammen können Sie mithilfe von WebGL auch interaktive dreidimensionale Darstellungen plattformübergreifend realisieren – im Browser und Touch-optimiert auf mobilen Endgeräten. Christian Liebel und Manuel Rauber zeigen Ihnen in dieser Session, wie Sie ansprechende 2-D- und 3-D-Visualisierungen Cross-Plattform implementieren und in existierende Anwendungen einbetten können.

Manuel Rauber

September 30, 2015
Tweet

More Decks by Manuel Rauber

Other Decks in Programming

Transcript

  1. View Slide

  2. SPECIAL DAY "HTML5 CROSS-PLATTFORM"

    View Slide

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

    View Slide

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

  5. 2D VISUALIZATION
    HTML5 CANVAS
    Manuel Rauber
    @manuelrauber

    View Slide

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


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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

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

  17. 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
    (
    )
    ;
    MDN: CanvasRenderingContext2D

    View Slide

  18. 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
    )
    ;
    MDN: CanvasRenderingContext2D

    View Slide

  19. RETINA SUPPORT

    View Slide

  20. View Slide

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

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

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

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

  25. 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.
    From https://dev.opera.com/articles/better-performance-with-requestanimationframe/

    View Slide

  26. 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.
    From https://dev.opera.com/articles/better-performance-with-requestanimationframe/

    View Slide

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

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

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

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

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

    View Slide

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

    View Slide

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

    View Slide

  34. LIVE DEMO

    View Slide

  35. 3D VISUALIZATION
    Christian Liebel
    @chris_liebel

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  45. CONTROLS
    Mouse/Keyboard
    Touch
    Gamepad

    View Slide

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

    View Slide

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

    View Slide

  48. THE CREATION OF THE WORLD

    View Slide

  49. EVEN MORE SAMPLES…
    Flight Arcade Physijs three.js samples

    View Slide

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

    View Slide

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

    View Slide

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

  53. View Slide