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
160
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
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
3.3k
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
15
5.8k
Breaking Down Enterprise AI Tool Adoption Barriers in Japan: CyberAgent's Cursor Implementation Strategy
gunta
0
120
大手企業のAIツール導入の壁を越えて:サイバーエージェントのCursor活用戦略
gunta
45
31k
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
6
1.3k
Feature FlagsのDX/UXの 頂点「 DevCycle 」に 辿り着くまでの道のり
gunta
5
1.7k
OpenSaaS Studio - 強いSaaSを作り続けるOpenSaaS Studioの挑戦
gunta
3
3.1k
OpenSTF @ Test Engineers' Meetup #3
gunta
1
1.4k
Android Testing Bootcamp #2: OpenSTF
gunta
1
1.4k
Other Decks in Programming
See All in Programming
TokyoR#119 bignners session2 Visualization
kotatyamtema
0
130
麻雀点数計算問題生成タスクから学ぶ Single Agentの限界と Agentic Workflowの底力
po3rin
5
2k
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
150
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
3
930
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
2.5k
AIを活用したレシート読み取り機能の開発から得られた実践知 / AI Receipt Scan Practice
rockname
2
1.5k
Let's Write a Train Tracking Algorithm
twocentstudios
0
220
Current States of Java Web Frameworks at JCConf 2025
kishida
0
490
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
140
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
320
Model Pollution
hschwentner
1
180
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
430
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
BBQ
matthewcrist
89
9.8k
Done Done
chrislema
185
16k
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