Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Are mobile HTML5 3D apps possible right now?

Are mobile HTML5 3D apps possible right now?

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

62a74a5cefb3f6f50cdcb5ed863fd73b?s=128

Gunther Brunner

December 09, 2013
Tweet

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