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
1.2k
OpenSaaS Studio - 強いSaaSを作り続けるOpenSaaS Studioの挑戦
gunta
2
2.8k
OpenSTF @ Test Engineers' Meetup #3
gunta
1
1.2k
Android Testing Bootcamp #2: OpenSTF
gunta
1
1.3k
Chrome Tech Night 8 - STF
gunta
0
130
CAOS 2015 Summer: Introducing Hayabusa
gunta
0
940
CAOS 2015 Summer: Introducing STF (Smartphone Test Farm)
gunta
1
1.6k
CAOS 2015 Summer: Hayabusa Internals
gunta
0
750
画像変換Night「ImageHayabusa」デザイン作業効率化
gunta
6
12k
Other Decks in Programming
See All in Programming
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
250
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
430
Kotlin 2.0 and Beyond
antonarhipov
2
150
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
What is Parser
yui_knk
9
4.1k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
390
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
4
90k
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
150
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
210
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
150
Crafting Cross-Platform Adventures: Building a Game Engine with Kotlin Multiplatform
dwursteisen
0
120
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
Featured
See All Featured
Practical Orchestrator
shlominoach
185
10k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Cost Of JavaScript in 2023
addyosmani
42
5.7k
Raft: Consensus for Rubyists
vanstee
135
6.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
We Have a Design System, Now What?
morganepeng
48
7.1k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
48
2.8k
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