Grenzenlose Grafik: 2D, 3D und Gamepad für alle Plattformen und Devices

Im Browser geht weitaus mehr als die meisten sich vorstellen können: Dank dem Canvas-Element, WebGL und der HTML5 Gamepad API machen attraktive 2D- und 3D-Visualisierungen und auch deren Steuerung mithilfe eines Gamepad selbst vor Mobilplattformen nicht halt. Dieser Talk zeigt die Grundlagen schneller, dynamische Grafiken und Animationen mit JavaScript anhand einiger Beispiele sowie deren Steuerung mithilfe eines handelsüblichen Gamepad.

Repository: https://github.com/thinktecture/2d-3d-gamepad

Transcript

1. Grenzenlose Grafik 2D, 3D und Gamepad für alle Plattformen und Devices Christian Liebel Thinktecture AG
2. Kontakt Christian Liebel Thinktecture AG christian.liebel@thinktecture.com @chris_liebel
3. Agenda 2D 3D Gamepad
4. Real Cross‐Platform The web is the platform HTML5, CSS3, JavaScript One codebase, maximum code sharing Works on virtually any platform
5. 2D HTML5 Canvas for the win
6. < c a n v a s > Generating fast, dynamic graphics using JavaScript Plain bitmap for the web Drawing tools are provided by contexts Hi‐DPI support High performance, low energy consumption r e q u e s t A n i m a t i o n F r a m e
7. Contexts c a n v a s . g e t C o n t e x t Provide tools to draw on the canvas 2D context: 2 d ﴾CanvasRenderingContext2D﴿ 3D context: w e b g l ﴾WebGLRenderingContext﴿
8. d e v i c e P i x e l R a t i o Device pixels vs. CSS pixels “Retina” ﴾Hi‐DPI﴿ support w i n d o w . d e v i c e P i x e l R a t i o
9. r e q u e s t A n i m a t i o n F r a m e Just in time ﴾matches screen refresh rate﴿ Does not execute when window is minimized or tab in the background Does not execute when browser is busy No stacking/queueing
10. Browser Support From http://caniuse.com/#search=canvas
11. Performance From http://jsperf.com/html‐vs‐svg‐vs‐canvas/31
12. Coordinate System Inverted From http://www.sitepoint.com/html5‐canvas‐tutorial‐introduction/
13. Touch‐Enabled Graphs https://zoomcharts.com/en/gallery/all:network‐graph‐company‐network‐icons
14. Real‐Time Video Manipulation http://www.craftymind.com/factory/html5video/CanvasVideo.html
15. Charting Libraries SVG‐based D3.js ﴾open source﴿ HighCharts ﴾commercial﴿ Canvas‐based Chart.js ﴾open source﴿ ZoomCharts ﴾commercial﴿
16. Game Engines melonJS Quintus EaselJS
17. 3D dimension++;
18. 3D Content in a 3D world with 2D screens scenes, cameras, rendering
19. Coordinate System Right‐handed From https://msdn.microsoft.com/library/dn479430﴾v=vs.85﴿.aspx
20. Camera Frustum From https://msdn.microsoft.com/library/dn479430﴾v=vs.85﴿.aspx
21. WebGL Web Graphics Library Hardware accelerated ﴾GPU﴿ New canvas rendering context w e b g l
22. Proven Technology Based on OpenGL for Embedded Systems Blender & Unity can export to WebGL ANGLE ﴾Chrome/Firefox﴿: Rendering on Direct3D
23. three.js Native WebGL is complex Open‐source JavaScript library High‐level API abstracting WebGL ﴾and more﴿
24. Structure Geometry: shape ﴾cube, sphere, …﴿ Material: color, texture, light reflection Mesh: 3D object ﴾geometry + material﴿
25. Browser support From http://caniuse.com/#search=webgl
26. Mobile Platform Support iOS 8+ Android WebView 36+ Crosswalk Windows ﴾Phone﴿ 8.1+
27. Controls Mouse/Keyboard Touch Gamepad
28. The Creation of the World
29. Even more samples… Flight Arcade Physijs three.js samples
30. Gamepad Fun it up!
31. HTML5 Gamepad API Polling Access to a set of connected gamepads Access to the gamepad’s button and axis states Gamepads appear as soon as the first button was pressed
32. Browser Support From http://caniuse.com/#search=gamepad
33. Gamepad Mapping Standard Layout From https://w3c.github.io/gamepad/#remapping
34. Summary Cross platform high‐performance graphic manipulation 2D & 3D Hardware acceleration Supported by all major browsers Touch‐enabled, gamepad‐enabled
35. Thank you! GitHub repository: https://github.com/thinktecture/2d‐3d‐gamepad thinktecture.com