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
980
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
110
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
パフォーマンスを求めてDBに機能を寄せる戦略
aoyagikouhei
0
110
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
480
新宿ダンジョンを可視化してみた
satoshi7190
3
420
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
930
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
850
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
190
使ってみよう Azure AI Document Intelligence
kosmosebi
2
370
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
3
350
Git Rebase
bkuhlmann
11
1.6k
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
1.1k
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
110
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
226
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Why Our Code Smells
bkeepers
PRO
331
56k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Docker and Python
trallard
35
2.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Producing Creativity
orderedlist
PRO
338
39k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
KATA
mclloyd
16
12k
Embracing the Ebb and Flow
colly
80
4.2k
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