Are mobile HTML5 3D apps possible right now?

3D in Smartphones: three.js and css3 3d

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