No content

INTRODUCTION Christian Liebel Manuel Rauber [email protected] @chris_liebel [email protected] @manuelrauber https://christianliebel.com https://manuel-rauber.com 

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

2D VISUALIZATION HTML5 CANVAS Manuel Rauber @manuelrauber 

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 

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

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

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

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

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

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

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 > 

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 > 

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 ' ) ; 

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 

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 

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 

RETINA SUPPORT 

No content

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 ) ; } 

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

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 

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/ 

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/ 

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/ 

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 

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 

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 

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/ 

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

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

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

LIVE DEMO 

3D VISUALIZATION Christian Liebel @chris_liebel 

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

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

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

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

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

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

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

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

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

CONTROLS Mouse/Keyboard Touch Gamepad 

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

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

THE CREATION OF THE WORLD 

EVEN MORE SAMPLES… Flight Arcade Physijs three.js samples 

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

CHANNEL9 Cross-Platform Development https://channel9.msdn.com/Series/Thementag-Cross- Plattform-Entwicklung-mit-HTML5--Javascript 

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

RESOURCES GitHub repository: Canvas browser support: Cordova: Ionic: Gulp: TypeScript: CanvasRenderingContext2D: WebGLRenderingContext: requestAnimationFrame: https://github.com/thinktecture/basta-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