$30 off During Our Annual Pro Sale. View Details »

Are mobile HTML5 3D apps possible right now?

Are mobile HTML5 3D apps possible right now?

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

Gunther Brunner

December 09, 2013
Tweet

More Decks by Gunther Brunner

Other Decks in Programming

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