Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Are mobile HTML5 3D apps possible right now?
Search
Gunther Brunner
December 09, 2013
Programming
0
140
Are mobile HTML5 3D apps possible right now?
3D in Smartphones: three.js and css3 3d
Gunther Brunner
December 09, 2013
Tweet
Share
More Decks by Gunther Brunner
See All by Gunther Brunner
Feature FlagsのDX/UXの 頂点「 DevCycle 」に 辿り着くまでの道のり
gunta
5
1.4k
OpenSaaS Studio - 強いSaaSを作り続けるOpenSaaS Studioの挑戦
gunta
3
2.9k
OpenSTF @ Test Engineers' Meetup #3
gunta
1
1.3k
Android Testing Bootcamp #2: OpenSTF
gunta
1
1.3k
Chrome Tech Night 8 - STF
gunta
0
140
CAOS 2015 Summer: Introducing Hayabusa
gunta
0
950
CAOS 2015 Summer: Introducing STF (Smartphone Test Farm)
gunta
1
1.6k
CAOS 2015 Summer: Hayabusa Internals
gunta
0
760
画像変換Night「ImageHayabusa」デザイン作業効率化
gunta
6
12k
Other Decks in Programming
See All in Programming
Conform を推す - Advocating for Conform
mizoguchicoji
3
700
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.1k
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
180
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
130
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
3
1.7k
時計仕掛けのCompose
mkeeda
1
310
バッチを作らなきゃとなったときに考えること
irof
0
370
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
190
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
140
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
130
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
420
Agile that works and the tools we love
rasmusluckow
328
21k
Fireside Chat
paigeccino
34
3.2k
Scaling GitHub
holman
459
140k
4 Signs Your Business is Dying
shpigford
182
22k
Side Projects
sachag
452
42k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
KATA
mclloyd
29
14k
Transcript
@gunta85 Günther Brunner άϯλɾϒϧϯφʔ CyberAgent Engineer
Are mobile HTML5 3D apps possible right now? 3D in
Smartphones
“In games and apps, drawing performance is very important” Ideal:
60 fps Minimum: 20 fps
Focus on these platforms Based on market share iOS Safari
Android Browser Android Chrome
Ways to draw 3D in HTML5 WebGL Canvas CSS3 3D
Ways to draw effects in HTML5 WebGL Shaders Canvas CSS3
Filters CSS3 Shaders
It’s the ideal solution, but…
WebGL: Technical and logistical problems iOS Safari: WebGL is OFF
iOS WebView: WebGL is OFF iOS iAd: WebGL is ON As of iOS 7
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)
–Most smartphones around “2014 is still not ready for WebGL”
What do we have left?
Ways to draw 3D in HTML5 WebGL Canvas CSS3 3D
Ways to draw effects in HTML5 WebGL Shaders Canvas CSS3
Filters CSS3 Shaders
CSS3 3D GPU Accelerated even on platforms where WebGL is
disabled
translate3D
CSS3 Filters GRAYSCALE HUE-ROTATE BRIGHTNESS SATURATE SEPIA OPACITY INVERT CONTRAST
BLUR DROP-SHADOW
three.js WebGLRenderer CanvasRenderer CSS3DRenderer
http://bit.ly/democss3d
three.js CSS3DRenderer Scenes Cameras Meshes Tweens …
Other libraries
Sprite3D.js CSS3-3D specific small library
photon CSS3-3D specific lighting engine
famo.us Startup & library focused on CSS3-3D
CSS3 FPS Advanced demo by Keith Clark. Includes environment
lighting, shadows and collisions
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/
@gunta85 Günther Brunner άϯλɾϒϧϯφʔ CyberAgent Engineer