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
130
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
1k
OpenSaaS Studio - 強いSaaSを作り続けるOpenSaaS Studioの挑戦
gunta
2
2.7k
OpenSTF @ Test Engineers' Meetup #3
gunta
1
1.1k
Android Testing Bootcamp #2: OpenSTF
gunta
1
1.3k
Chrome Tech Night 8 - STF
gunta
0
120
CAOS 2015 Summer: Introducing Hayabusa
gunta
0
930
CAOS 2015 Summer: Introducing STF (Smartphone Test Farm)
gunta
1
1.5k
CAOS 2015 Summer: Hayabusa Internals
gunta
0
750
画像変換Night「ImageHayabusa」デザイン作業効率化
gunta
6
12k
Other Decks in Programming
See All in Programming
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
3
420
ペパボOpenTelemetry革命
pyama86
2
810
株式会社ゼネテック
genetec
0
120
Docker_OSS_ホスティング入門
satokoki645
0
140
JavaScript Closure
asoluka
0
2k
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
3
610
Deep Dive into React Stream/Serialize
mugi_uno
4
860
TypeScriptで使いやすいOpenAPIの書き方
yukimochi_dwango
1
590
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
620
Timeline エディター拡張入門
yucchiy
0
450
RubyGems on ruby.wasm
kateinoigakukun
0
110
PHPコードの実行モデルを理解する / Understanding-the-PHP-Execution-Model
shin1x1
0
1k
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
306
41k
Navigating Team Friction
lara
179
13k
Code Reviewing Like a Champion
maltzj
515
39k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Producing Creativity
orderedlist
PRO
338
39k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
GraphQLとの向き合い方2022年版
quramy
33
13k
A designer walks into a library…
pauljervisheath
201
23k
Side Projects
sachag
451
41k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
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