HTML5でモバイル3Dゲームの開発は可能?!

Summit
Developers
Developers Summit 2013 Action !
HTML5ͰϞόΠϧ3DήʔϜͷ։ൃ͸Մೳʁʂ
Մೳʹ͢Δ伴ͱͳΔٕज़͸͜͜ʹ͋Δͷ͔ʁʂ
ϒϧϯφʔɾάϯλ
アメーバ事業本部
フロンティアゲーム事業部
14-C-4
#devsumiC
Gunther Brunner
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
HTML5Ͱͷඳըٕज़
ɾҊ݅঺հ
ɾεϚϗࠃ಺ϒϥ΢βγΣΞ
ɾHTML5Ͱͷඳըٕज़঺հ
ɾϦΞϦςΟνΣοΫ
ɾ3DσϞ
Ξ δ Σ ϯ μ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ࣗݾ঺հ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ࣗݾ঺հ
໊લɿKARL GUNTHER ALAN BRUNNER ʢάϯλʣ
ݴޠɿJAVASCRIPT, PHP, C++, ASM, ӳޠ, εϖΠϯޠ, ೔ຊޠ
࢓ࣄɿαΠόʔΤʔδΣϯτ(ג)ϑϩϯτΤϯυΤϯδχΞ
TWITTER:
@GUNTA85
BLOG:
HTTP://AMEBLO.JP/GUNTA85/
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ࣗݾ঺հ
ΦοτΫϥ΢θઐ໳ֶߍ
ిࢠՊ
ϒΤϊεΞΠϨεେֶ
৘ใՊ
೔ຊ޻ֶӃ
άϥϑΟοΫσβΠϯՊ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ࠓؔΘ͍ͬͯΔҊ݅
http://battleslot.jp
ό τ ϧ ε ϩ ο τ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ࠓؔΘ͍ͬͯΔҊ݅
ό τ ϧ ε ϩ ο τ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
HTML5Ͱͷඳըٕज़
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
HTML5Ͱͷඳըٕज़
ɾDOM
ɾCSS3
ɾCSS3 3D
ɾCSS3 FILTERS
ɾCANVAS
ɾWEBGL
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
HTML5Ͱͷඳըٕज़
·ͣɺϦΞϦςΟνΣοΫɻ
“εϚʔτϑΥϯͰHTML5ͷ3DήʔϜ։ൃΛՌͨͯ͠
Մೳʹ͢Δ伴ͱͳΔٕज़͸͜͜ʹ͋Δͷ͔ʁʂ”
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ࠃ಺εϚϗOSγΣΞ
52%
46%
1%
1%
iOS Android Nintendo 3DS ͦͷଞ
STATSCOUNTER GLOBALSTATSௐ΂ɻ2013೥3݄14೔ʢݱࡏʣ
ϦΞϦςΟ
νΣοΫ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ࠃ಺εϚϗOSγΣΞ
STATSCOUNTER GLOBALSTATSௐ΂ɻ2013೥3݄14೔ʢݱࡏʣ
IOS+ANDROID = 98%
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ࠃ಺εϚϗϒϥ΢βγΣΞ
ϦΞϦςΟ
νΣοΫ
IOS
SAFARI
ANDROID
BROWSER
ANDROID
CHROME
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ࠃ಺εϚϗϒϥ΢βঢ়گ
WEBKIT͕ࣄ্࣮ඪ४ͷϨϯμϦϯά
Τϯδϯʹͳ͍ͬͯΔঢ়گɻ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
WEBKITͱ͸͍͑ɺ
IOSɺANDROIDɺCHROME͸શ͘ҟͳΔɻ
ɾWEBKITͷ࣮૷
ɾόʔδϣϯҧ͍
ɾෆ໌ͳͱ͜Ζ
ɾόά
ɾJSΤϯδϯ
ɾσόΠεͷҧ͍
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
͔͠͠ɺ
ɾඳըٕज़ʢCANVAS, CSS3,...ʣ
ɾσόΠεʢIPHONE, ANDROIDʣ
ɾOSόʔδϣϯʢIOS4VS
6, ANDROID 2VS
4ʣ
ɾϒϥ΢βόάʢಛʹANDROIDʣ
ύϑΥʔϚϯεɺϢʔβମײ͕શ͘ҟͳΔɻ
ϦΞϦςΟ
νΣοΫ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
“ήʔϜͰ͸ඳըͷύϑΥʔϚϯε͕େࣄ”
ཧ૝: 60fps
࠷ѱ: 20fps
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
εϚϗϒϥ΢βͷόάɺόά
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
HTML5Ͱͷඳըٕज़
ɾDOM
ɾCSS3
ɾCSS3 3D
ɾCSS3 FILTERS
ɾCANVAS
ɾWEBGL
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
DOM
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
DOM CSS2Ͱඳը
̎೥લ·ͰͷPCαΠτͰͷJSΞχϝʔγϣϯ͸ɺ
DOMͷCSS2Ͱ࣮૷͞Ε͍ͯͨɻ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
DOM CSS2Ͱඳը
ϚʔδϯϨϑτͰಈ͔͢
IOS: GPUແޮɻ஗͍ɻ
ANDROID: ஗͍ɻएׯ҆ఆɻ
݁࿦ɿNGɻ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
DOM CSS2Ͱඳը
ϨϑτͰಈ͔͢
IOS: GPUແޮɻ஗͍ɻ
ANDROID: ஗͍ɻएׯ҆ఆɻ
݁࿦ɿNGɻ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
CSS3
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
DOM CSS3Ͱඳը
CSS3͕ఆ࣮ٛ૷͞ΕɺGPUΞΫηϥϨʔγϣϯͷޮ͍ͨJS
Ξχϝʔγϣϯ͕Ͱ͖ΔΑ͏ʹͳͬͨɻ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
DOM CSS3Ͱඳը
TRANSLATEXͰಈ͔͢
IOS: IOS>4ɺGPU༗ޮɻૣ͍ɻ
ANDROID: ػछʹΑͬͯෆ҆ఆɻ
݁࿦ɿ༗ΓʢಛʹIOSʣ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
DOM CSS3 3DͰඳը
TRANSLATE3DͰಈ͔͢
IOS: GPU༗ޮɻҰ൪ૣ͍ɻ
ANDROID: ෆ҆ఆɺඳը͞Εͳ͍ɻ
CHROME: ৔߹ʹΑΔɻ
݁࿦ɿ༗ΓʢIOSͷΈʣ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
GPU͸༗ޮʁ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
GPUΛՄࢹԽ͢Δ
IOS SIMULATOR
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
GPUΛՄࢹԽ͢Δ
MIHTOOL
IPHONEΞϓϦʢແྉʣ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
GPU࢖༻࣌ͷ஫ҙ఺
GPU͸ϚδοΫϒϥοΫϘοΫεɻ
ɾόοϑΝʔαΠζ͕ෆ໌
ɾϦιʔεͷ্ݶ͕ෆ໌
ɾΦϒδΣΫτͷΧ΢ϯτ͕ෆՄ
ɾΫϥογϡͷݪҼ͕ಛఆෆՄ
ϦΞϦςΟ
νΣοΫ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
GPU࢖༻࣌ͷ஫ҙ఺
͕ͩɺϋʔυ΢ΣΞʹΑΔߴ଎ͳඳըΛ࣮ݱ͢ΔͨΊʹ
GPUʹґଘͤ͟ΔΛಘͳ͍ɻ
ϦΞϦςΟ
νΣοΫ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
CSS3 FILTERS
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
CSS3 FILTERSͰޮՌ
ɾάϨʔεέʔϧɿGRAYSCALE
ɾ৭૬ɿHUE-ROTATE
ɾ໌౓ɿBRIGHTNESS
ɾ࠼౓ɿSATURATE
ɾηϐΞɿSEPIA
ɾಁ໌౓ɿOPACITY
ɾ֊ௐͷ൓సɿINVERT
ɾίϯτϥετɿCONTRAST
ɾ΅͔͠ɿBLUR
ɾυϩοϓγϟυ΢ɿDROP-SHADOW
CSS3 FILTERSͰඳը
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
CSS3 FILTERSͰඳը
CSS3 FILTERSͰޮՌ
IOS: IOS6ΑΓ࣮૷ɻGPU༗ޮɻ΅͔͠Ҏ֎͸ૣ͍ɻ
ANDROID: ະ࣮૷ɻCHROMEͰ·ͩෆ҆ఆɻ
݁࿦ɿ༗ΓʢIOSͷΈʣ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
CSS3 CUSTOM FILTERS
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
CSS3 CUSTOM FILTERSͰඳը
CSS3 CUSTOM FILTERSͰޮՌ
γΣʔμʔ͸OPENGLγΣʔσΟϯάݴޠʢGLSLʣͰ
هड़͞ΕΔɻ
ɾPS: ϐΫηϧγΣʔμ
ɾVS: όʔςοΫεγΣʔμ
DOMͷཁૉʹରͯ͠ద༻Ͱ͖Δɻ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
CSS3 CUSTOM FILTERSͰඳը
CSS3 CUSTOM FILTERSͰޮՌ
IOS: ະ࣮૷ɻIOS>7ʹظ଴ɻ
ANDROID: ະ࣮૷ɻOS>4.3ͷCHROMEʹظ଴ɻ
݁࿦ɿࠓޙ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
CANVAS
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
CANVASͰඳը
CANVAS
CANVAS͸ࣗ༝౓͕ߴ͍Ұํɺ
DOMଆͰ࣮૷͞Ε͍ͯͨػೳ͕࢖༻Ͱ͖ͳ͘ͳΔɻ
ɾςΩετϨΠΞ΢τ
ɾCSSޮՌɿSHADOW, FILTERS
ɾςΩετϋΠϥΠτʢΞΫηγϏϦςΟ΋ແ͠ʣ
ɾϘλϯ΍ϑΥʔϜཁૉ
ɾҐஔ΍पΓͷΦϒδΣΫτͷ৘ใऔಘ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
CANVASͰඳը
CANVASͷඳըͷશͯ͸ࣗ෼Ͱ΍Βͳ͍ͱ͍͚ͳ͍
ύϑΥʔϚϯεTIPS
ɾঢ়ଶૢ࡞Λඞཁ࠷খݶʹ͢Δ
ɾෳ਺ͷCANVASཁૉΛ࢖ͬͯϓϨϨϯμϦϯά΍
ϨΠϠʔΛݕ౼͢Δ
ɾࠩ෼ͷΈϨϯμϦϯά͢Δ
ɾුಈখ਺఺࠲ඪΛ੔਺ʹม׵͢Δ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
CANVASͰඳը
CANVASͰಈ͔͢
IOS: IOS>5ϐΫηϧͷඳըͷΈGPUࢧԉɻ
ANDROID: ৔߹ʹΑͬͯ҆ఆɻ
݁࿦ɿ༗Γ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
WEBGL
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
WEBGLͰඳը
WEBGL
PC൛ͷCHROMEͰ͸طʹ੝Γ্͕͍ͬͯΔ༷ࢠɻ
HTML5Ͱͷඳըͷ࠷ઌ୺ٕज़ɻ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
WEBGLͰඳը
THREE.JSͰಈ͔͢
IOS: ࣮૷͞Ε͍ͯΔ͕ɺඇެ։ɻIADͷΈڐՄɻ
ANDROID: OS>4.2ͷCHROME(Β)ΑΓ༗ޮɻݱঢ়ෆ҆ఆɻ
݁࿦ɿࠓޙ༗Γ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
εϚϗͰ࢖͑Δ3Dٕज़
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ݱঢ়
IOS: CSS3 3DɺIOS4͔Β҆ఆʹ࣮૷ࡁΈɻ
ANDROID: CANVAS 2DͰ3DΛγϛϡϨʔγϣϯɻ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ࠓޙ
IOS: CSS3 3D΋มΘΒͣɻIOS7~8ΑΓWEBGLڐՄʹظ଴ɻ
ANDROID: OS>4.2ͷCHROMEΑΓWEBGL͕࣮૷͞ΕΔɻ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
CSS3 3D༻ͷϥΠϒϥϦ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ݱࡏҰ൪ػೳͱਓؾͷ͋ΔϥΠϒϥϦɻ
ɾWEBGLϨϯμʔ
ɾCSS3 3DϨϯμʔ
ɾCANVASϨϯμʔ
ɾCPUϨϯμʔ
THREE.JS
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
CSS3-3Dઐ༻ͷܰྔϥΠϒϥϦɻ
SPRITE3D.JS
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
CSS3-3Dઐ༻ͷϥΠτχϯάΤϯδϯɻ
PHOTON
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ถاۀʹΑΔCSS3-3Dઐ༻ͷΤϯδϯΛ։ൃதɻ
FAMO.US
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
දݱྗ͸ϒϥ΢βʹΑͬͯશ͘ҟͳΔ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ϒϥ΢βʹΑͬͯͷදݱྗ
εϚϗϒϥ΢βͷදݱྗͷঢ়گ͸
ੲͷίϯγϡʔϚʔ޲͚ήʔϜػઓ૪ͱ
ࣅͨΑ͏ͳঢ়گɻ
ϦΞϦςΟ
νΣοΫ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ϒϥ΢βͷॾʑόάʹΑͬͯɺ࣮ࡍʹ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
=
=
= ~
PS2
SNES
N64 PS3
ϦΞϦςΟ
νΣοΫ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ίϯγϡʔϚʔ޲͚ήʔϜػͱಉ༷ѻ͍ɿ
3Dදݱ͸ಛఆͷϓϥοτϗʔϜʹߜΔɻ
ݹ͍ϒϥ΢β͸௨ৗͷ2DͰϨϯμϦϯάɻ
ϦΞϦςΟ
νΣοΫ
ߟ͑ΒΕΔϙϦγʔ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
I suggest your Next AcEon!
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
࠷ޙʹɺTHREE.JSͰσϞΛ࡞Ζ͏
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
࠷ޙʹThree.jsͰσϞΛ࡞Ζ͏
WEBGLͱCSS3 3DΛѻ͍΍͘͢͢ΔTHREE.JSΛ࠾༻ɻ
ɾSCENEࢧԉ
ɾCAMERAࢧԉ
ɾMESHࢧԉ
ɾTWEENSࢧԉ
ɾ౳ʑ
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
It’s your turn.
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ϦϯΫू
঺հ
BATTLESLOT
HTTP://BATTLESLOT.JP
@GUNTA85ͷϒϩά
HTTP://AMEBLO.JP/GUNTA85/PAGE-2.HTML
@GUNTA85ͷσβΠϯϙʔτϑΥϦΦ
HTTP://GUNTA.ORG/DESIGN/
σϞ
@GUNTA85ͷTHREE.JS CSS3 3DσϞ
HTTP://BIT.LY/DEMOCSS3D
SPRITE3D.JS
HTTP://SPRITE3D.MINIMAL.BE/
CSS3 CUSTOM FILTERS
HTTP://ALTEREDQUALIA.COM/CSS-SHADERS/SPHERE.HTML
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ϦϯΫू
πʔϧ
IOS SIMULATOR
HTTPS://DEVELOPER.APPLE.COM/DEVCENTER/IOS/INDEX.ACTION
MIHTOOL
HTTP://WWW.IUNBUG.COM/MIHTOOL
CSS FILTERLAB
HTTP://HTML.ADOBE.COM/WEBSTANDARDS/CSSCUSTOMFILTERS/CSSFILTERLAB/
ϥΠϒϥϦ
SPRITE3D.JS
HTTP://MINIMAL.BE/LAB/SPRITE3D/
THREE.JS
HTTP://MRDOOB.GITHUB.COM/THREE.JS/
PHOTON CSS3D LIGHTNING
HTTP://PHOTON.ATTASI.COM/
FAMO.US
HTTP://FAMO.US/
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ϦϯΫू
HTML5ඳըؔ࿈ͷϓϨθϯ
HOT SUMMER PICKS FROM HTML5 BY GOOGLE
HTTPS://HOTSUMMERPICKS.APPSPOT.COM/#1
HTML5 DEVCONF OCT 2012: FAMO.US
HTTP://WWW.SLIDESHARE.NET/BEFAMOUS/HTML5-DEVCONF-OCT-2012-TECH-TALK
CSS3 3DରCSS2هࣄ
WHY MOVING ELEMENTS WITH TRANSLATE() IS BETTER THAN POS:ABS TOP/LEFT
HTTP://PAULIRISH.COM/2012/WHY-MOVING-ELEMENTS-WITH-TRANSLATE-IS-BETTER-THAN-POSABS-TOPLEFT/
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ϦϯΫू
CANVASରCSS3هࣄ
ॾʑҟͳΔҙݟͱݕূ݁Ռɻ
TO CANVAS, OR NOT TO CANVAS, WHEN BUILDING BROWSER-BASED GAMES?
HTTP://GAMEDEV.STACKEXCHANGE.COM/QUESTIONS/23023/TO-CANVAS-OR-NOT-TO-CANVAS-WHEN-BUILDING-BROWSER-BASED-GAMES
DOM SPRITES: A VIABLE ALTERNATIVE TO CANVAS
HTTP://BUILDNEWGAMES.COM/DOM-SPRITES/
MADE A MATCH-THREE GAME WITH HTML5
HTTP://VINCENTPETRY.NET/BLOG/?P=225
TIZEN: HTML5 CANVAS VS CSS3
HTTP://DOWNLOAD.TIZEN.ORG/MISC/MEDIA/CONFERENCE2012/WEDNESDAY/BALLROOM-A/2012-05-09_0945-1025-HTML5_CANVAS_VS._CSS3.PDF
HTML5ͷDOMͱCANVASͷඳըੑೳ
HTTP://BLOGS.DION.NE.JP/KOTEMARU/ARCHIVES/10750190.HTML
CANVAS VS. DOM MANIPULATION
HTTP://BLOG.FRONTEND.FI/CANVAS-VS-DOM-MANIPULATION/
13೥2݄14೔໦༵೔

View Slide

Summit
Developers
ϦϯΫू
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
13೥2݄14೔໦༵೔

View Slide

HTML5でモバイル3Dゲームの開発は可能?!

HTML5でモバイル3Dゲームの開発は可能?!

Gunther Brunner

More Decks by Gunther Brunner

Other Decks in Programming

Featured

Transcript