Cross platform, touch optimized 2D & 3D visualization

Cross platform, touch optimized 2D & 3D visualization

Cross platform, touch optimized 2D & 3D visualization made with HTML5 Canvas, WebGL and Three.js.

667fbca1f58bc0215c744b5ae8f8e5d2?s=128

Manuel Rauber

May 21, 2015
Tweet

Transcript

  1. 1.

    2D & 3D VISUALIZATIONS CROSS PLATFORM, TOUCH OPTIMIZED Christian Liebel,

    Christian Weyer, Manuel Rauber thinktecture.com
  2. 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
  3. 5.

    OVERVIEW Plain bitmap for the web Cross platform graphic manipulations

    High performance Mouse, touch & gamepad support Low energy consumpting animations
  4. 10.

    COORDINATE SYSTEM Cartesian: (0/0) bottom left Canvas: (0/0) top left

    From http://www.sitepoint.com/html5-canvas-tutorial-introduction/
  5. 11.

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

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

    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 ' ) ;
  8. 14.

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

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

    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
  11. 18.
  12. 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 ) ; }
  13. 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 ) ;
  14. 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
  15. 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/
  16. 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/
  17. 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/
  18. 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
  19. 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
  20. 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
  21. 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/
  22. 32.
  23. 38.

    PROVEN TECHNOLOGY Based on OpenGL for Embedded Systems Blender &

    Unity can export to WebGL ANGLE (Chrome/Firefox): Rendering on Direct3D
  24. 40.
  25. 44.

    A WORD ON TOUCH EVENTS… Pointer Events vs. Touch Events

    Browser support varies on desktop three.js controls only support Touch Events
  26. 48.

    SUMMARY Cross platform high-performance graphic manipulation 2D & 3D Hardware

    acceleration Supported by all major browsers Touch-enabled, gamepad-enabled
  27. 50.

    RESOURCES GitHub repository: Canvas browser support: Cordova: Ionic: Gulp: TypeScript:

    CanvasRenderingContext2D: WebGLRenderingContext: requestAnimationFrame: https://github.com/thinktecture/DotNetUserGroupKA2015 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