3D in Smartphones: three.js and css3 3d
@gunta85Günther BrunnerάϯλɾϒϧϯφʔCyberAgentEngineer
View Slide
Are mobile HTML5 3D appspossible right now?3D in Smartphones
“In games and apps,drawing performance is very important”Ideal: 60 fpsMinimum: 20 fps
Focus on these platformsBased on market shareiOSSafariAndroidBrowserAndroidChrome
Ways to draw 3D in HTML5WebGLCanvasCSS3 3D
Ways to draw effects inHTML5WebGL ShadersCanvasCSS3 FiltersCSS3 Shaders
It’s the ideal solution, but…
WebGL: Technical andlogistical problemsiOS Safari: WebGL is OFFiOS WebView: WebGL is OFFiOS iAd: WebGL is ONAs of iOS 7
WebGL: Technical andlogistical problemsAndroid Browser: WebGL is N/A.Android Browser (Samsung): WebGL is ONAndroid Chrome: WebGL is ONAndroid WebView: WebGL is OFFAs of Android 4.4 (KitKat)
–Most smartphones around“2014 is still not ready for WebGL”
What do we have left?
CSS3 3DGPU Accelerated evenon platforms whereWebGL is disabled
translate3D
CSS3 FiltersGRAYSCALE HUE-ROTATE BRIGHTNESS SATURATE SEPIAOPACITY INVERT CONTRAST BLUR DROP-SHADOW
three.jsWebGLRendererCanvasRendererCSS3DRenderer
http://bit.ly/democss3d
three.js CSS3DRendererScenesCamerasMeshesTweens…
Other libraries
Sprite3D.jsCSS3-3D specific small library
photonCSS3-3D specific lighting engine
famo.usStartup & libraryfocused on CSS3-3D
CSS3 FPSAdvanced demo byKeith Clark. Includes environmentlighting, shadows andcollisions
Linkshttp://bit.ly/democss3dhttps://plus.google.com/+RicardoCabello/posts/QcFk5HrWranhttp://www.keithclark.co.uk/labs/css3-fps-new/http://photon.attasi.com/http://sprite3d.minimal.be/http://famo.us/