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
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
Ruby on cygwin 2025-02
fd0
0
140
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
Introduction to kotlinx.rpc
arawn
0
630
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
『品質』という言葉が嫌いな理由
korimu
0
160
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
テストをしないQAエンジニアは何をしているか?
nealle
0
130
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
Writing documentation can be fun with plugin system
okuramasafumi
0
120
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Embracing the Ebb and Flow
colly
84
4.6k
The World Runs on Bad Software
bkeepers
PRO
67
11k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Typedesign – Prime Four
hannesfritz
40
2.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
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