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
150
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
3k
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
14
4.9k
Breaking Down Enterprise AI Tool Adoption Barriers in Japan: CyberAgent's Cursor Implementation Strategy
gunta
0
110
大手企業のAIツール導入の壁を越えて:サイバーエージェントのCursor活用戦略
gunta
44
29k
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
6
1.3k
Feature FlagsのDX/UXの 頂点「 DevCycle 」に 辿り着くまでの道のり
gunta
5
1.6k
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
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
960
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
730
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.3k
Honoアップデート 2025年夏
yusukebe
1
740
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
3
2.2k
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
210
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
110
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
12
2.7k
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
280
JetBrainsのAI機能の紹介 #jjug
yusuke
0
210
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
130
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
Practical Orchestrator
shlominoach
190
11k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Scaling GitHub
holman
462
140k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Building Applications with DynamoDB
mza
96
6.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Balancing Empowerment & Direction
lara
2
570
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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