Are mobile HTML5 3D apps possible right now?

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. Focus on these platforms
   Based on market share
   iOS
   Safari
   Android
   Browser
   Android
   Chrome
   

   View Slide

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

   View Slide

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

   View Slide

7. It’s the ideal solution, but…
   

   View Slide

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
   

   View Slide

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)
   

   View Slide

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

    View Slide

11. What do we have left?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. translate3D
    

    View Slide

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

    View Slide

17. three.js
    WebGLRenderer
    CanvasRenderer
    CSS3DRenderer
    

    View Slide

18. http://bit.ly/democss3d
    

    View Slide

19. three.js CSS3DRenderer
    Scenes
    Cameras
    Meshes
    Tweens
    …
    

    View Slide

20. Other libraries
    

    View Slide

21. Sprite3D.js
    CSS3-3D specific 

    small library
    

    View Slide

22. photon
    CSS3-3D specific

    lighting engine
    

    View Slide

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

    View Slide

24. CSS3 FPS
    Advanced demo by
    Keith Clark. 

    Includes environment
    lighting, shadows and
    collisions
    

    View Slide

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/
    

    View Slide

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

    View Slide