Are mobile HTML5 3D apps possible right now?

Transcript

1. @gunta85 Günther Brunner άϯλɾϒϧϯφʔ CyberAgent Engineer

2. Are mobile HTML5 3D apps possible right now? 3D in

   Smartphones

3. “In games and apps, drawing performance is very important” Ideal:

   60 fps Minimum: 20 fps

4. Focus on these platforms Based on market share iOS Safari

   Android Browser Android Chrome

5. Ways to draw 3D in HTML5 WebGL Canvas CSS3 3D

6. Ways to draw effects in HTML5 WebGL Shaders Canvas CSS3

   Filters CSS3 Shaders

7. It’s the ideal solution, but…

8. WebGL: Technical and logistical problems iOS Safari: WebGL is OFF

   iOS WebView: WebGL is OFF iOS iAd: WebGL is ON As of iOS 7

9. WebGL: Technical and logistical problems Android Browser: WebGL is N/A.

   Android Browser (Samsung): WebGL is ON Android Chrome: WebGL is ON Android WebView: WebGL is OFF As of Android 4.4 (KitKat)

10. –Most smartphones around “2014 is still not ready for WebGL”

11. What do we have left?

12. Ways to draw 3D in HTML5 WebGL Canvas CSS3 3D

13. Ways to draw effects in HTML5 WebGL Shaders Canvas CSS3

    Filters CSS3 Shaders

14. CSS3 3D GPU Accelerated even on platforms where WebGL is

    disabled

15. translate3D

16. CSS3 Filters GRAYSCALE HUE-ROTATE BRIGHTNESS SATURATE SEPIA OPACITY INVERT CONTRAST

    BLUR DROP-SHADOW

17. three.js WebGLRenderer CanvasRenderer CSS3DRenderer

18. http://bit.ly/democss3d

19. three.js CSS3DRenderer Scenes Cameras Meshes Tweens …

20. Other libraries

21. Sprite3D.js CSS3-3D specific 
 small library

22. photon CSS3-3D specific
 lighting engine

23. famo.us Startup & library focused on CSS3-3D

24. CSS3 FPS Advanced demo by Keith Clark. 
 Includes environment

    lighting, shadows and collisions

25. Links http://bit.ly/democss3d https://plus.google.com/+RicardoCabello/posts/ QcFk5HrWran http://www.keithclark.co.uk/labs/css3-fps-new/ http://photon.attasi.com/ http://sprite3d.minimal.be/ http://famo.us/

26. @gunta85 Günther Brunner άϯλɾϒϧϯφʔ CyberAgent Engineer