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. SPECIAL DAY "HTML5 CROSS-PLATTFORM"

    View full-size slide

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

    View full-size slide

  3. 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 full-size slide

  4. 2D VISUALIZATION
    HTML5 CANVAS
    Manuel Rauber
    @manuelrauber

    View full-size slide

  5. 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 full-size slide


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. 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 full-size slide

  13. 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 full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

  17. 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 full-size slide

  18. RETINA SUPPORT

    View full-size slide

  19. 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 full-size slide

  20. 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 full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

  23. 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 full-size slide

  24. 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 full-size slide

  25. 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 full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. 3D VISUALIZATION
    Christian Liebel
    @chris_liebel

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. CONTROLS
    Mouse/Keyboard
    Touch
    Gamepad

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. THE CREATION OF THE WORLD

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. 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 full-size slide