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

可能にする鍵となる技術はここにあるのか?!
技術の紹介。
・DOM
・CSS3
・CSS3 3D
・CSS3 FILTERS
・CANVAS
・WEBGL

【iPhone用のCSS3 3Dサンプル】
http://bit.ly/democss3d

Transcript

1. Summit Developers Developers Summit 2013 Action ! HTML5ͰϞόΠϧ3DήʔϜͷ։ൃ͸Մೳʁʂ Մೳʹ͢Δ伴ͱͳΔٕज़͸͜͜ʹ͋Δͷ͔ʁʂ ϒϧϯφʔɾάϯλ アメーバ事業本部 フロンティアゲーム事業部 14-C-4 #devsumiC Gunther Brunner 13೥2݄14೔໦༵೔
2. Summit Developers Developers Summit 2013 Action ! HTML5Ͱͷඳըٕज़ ɾҊ݅঺հ ɾεϚϗࠃ಺ϒϥ΢βγΣΞ ɾHTML5Ͱͷඳըٕज़঺հ ɾϦΞϦςΟνΣοΫ ɾ3DσϞ Ξ δ Σ ϯ μ 13೥2݄14೔໦༵೔
3. Summit Developers Developers Summit 2013 Action ! ࣗݾ঺հ 13೥2݄14೔໦༵೔
4. Summit Developers Developers Summit 2013 Action ! ࣗݾ঺հ ໊લɿKARL GUNTHER ALAN BRUNNER ʢάϯλʣ ݴޠɿJAVASCRIPT, PHP, C++, ASM, ӳޠ, εϖΠϯޠ, ೔ຊޠ ࢓ࣄɿαΠόʔΤʔδΣϯτ(ג)ϑϩϯτΤϯυΤϯδχΞ TWITTER: @GUNTA85 BLOG: HTTP://AMEBLO.JP/GUNTA85/ 13೥2݄14೔໦༵೔
5. Summit Developers Developers Summit 2013 Action ! ࣗݾ঺հ ΦοτΫϥ΢θઐ໳ֶߍ ిࢠՊ ϒΤϊεΞΠϨεେֶ ৘ใՊ ೔ຊ޻ֶӃ άϥϑΟοΫσβΠϯՊ 13೥2݄14೔໦༵೔
6. Summit Developers Developers Summit 2013 Action ! ࠓؔΘ͍ͬͯΔҊ݅ http://battleslot.jp ό τ ϧ ε ϩ ο τ 13೥2݄14೔໦༵೔
7. Summit Developers Developers Summit 2013 Action ! ࠓؔΘ͍ͬͯΔҊ݅ ό τ ϧ ε ϩ ο τ 13೥2݄14೔໦༵೔
8. Summit Developers Developers Summit 2013 Action ! HTML5Ͱͷඳըٕज़ 13೥2݄14೔໦༵೔
9. Summit Developers Developers Summit 2013 Action ! HTML5Ͱͷඳըٕज़ ɾDOM ɾCSS3 ɾCSS3 3D ɾCSS3 FILTERS ɾCANVAS ɾWEBGL 13೥2݄14೔໦༵೔
10. Summit Developers Developers Summit 2013 Action ! HTML5Ͱͷඳըٕज़ ·ͣɺϦΞϦςΟνΣοΫɻ “εϚʔτϑΥϯͰHTML5ͷ3DήʔϜ։ൃΛՌͨͯ͠ Մೳʹ͢Δ伴ͱͳΔٕज़͸͜͜ʹ͋Δͷ͔ʁʂ” 13೥2݄14೔໦༵೔
11. Summit Developers Developers Summit 2013 Action ! ࠃ಺εϚϗOSγΣΞ 52% 46% 1% 1% iOS Android Nintendo 3DS ͦͷଞ STATSCOUNTER GLOBALSTATSௐ΂ɻ2013೥3݄14೔ʢݱࡏʣ ϦΞϦςΟ νΣοΫ 13೥2݄14೔໦༵೔
12. Summit Developers Developers Summit 2013 Action ! ࠃ಺εϚϗOSγΣΞ STATSCOUNTER GLOBALSTATSௐ΂ɻ2013೥3݄14೔ʢݱࡏʣ IOS+ANDROID = 98% 13೥2݄14೔໦༵೔
13. Summit Developers Developers Summit 2013 Action ! ࠃ಺εϚϗϒϥ΢βγΣΞ ϦΞϦςΟ νΣοΫ IOS SAFARI ANDROID BROWSER ANDROID CHROME 13೥2݄14೔໦༵೔
14. Summit Developers Developers Summit 2013 Action ! ࠃ಺εϚϗϒϥ΢βঢ়گ WEBKIT͕ࣄ্࣮ඪ४ͷϨϯμϦϯά Τϯδϯʹͳ͍ͬͯΔঢ়گɻ 13೥2݄14೔໦༵೔
15. Summit Developers Developers Summit 2013 Action ! ࠃ಺εϚϗϒϥ΢βঢ়گ WEBKITͱ͸͍͑ɺ IOSɺANDROIDɺCHROME͸શ͘ҟͳΔɻ ɾWEBKITͷ࣮૷ ɾόʔδϣϯҧ͍ ɾෆ໌ͳͱ͜Ζ ɾόά ɾJSΤϯδϯ ɾσόΠεͷҧ͍ 13೥2݄14೔໦༵೔
16. Summit Developers Developers Summit 2013 Action ! ࠃ಺εϚϗϒϥ΢βঢ়گ ͔͠͠ɺ ɾඳըٕज़ʢCANVAS, CSS3,...ʣ ɾσόΠεʢIPHONE, ANDROIDʣ ɾOSόʔδϣϯʢIOS4VS 6, ANDROID 2VS 4ʣ ɾϒϥ΢βόάʢಛʹANDROIDʣ ύϑΥʔϚϯεɺϢʔβମײ͕શ͘ҟͳΔɻ ϦΞϦςΟ νΣοΫ 13೥2݄14೔໦༵೔
17. Summit Developers Developers Summit 2013 Action ! ࠃ಺εϚϗϒϥ΢βঢ়گ “ήʔϜͰ͸ඳըͷύϑΥʔϚϯε͕େࣄ” ཧ૝:  60fps ࠷ѱ:  20fps 13೥2݄14೔໦༵೔
18. Summit Developers Developers Summit 2013 Action ! εϚϗϒϥ΢βͷόάɺόά 13೥2݄14೔໦༵೔
19. Summit Developers Developers Summit 2013 Action ! HTML5Ͱͷඳըٕज़ ɾDOM ɾCSS3 ɾCSS3 3D ɾCSS3 FILTERS ɾCANVAS ɾWEBGL 13೥2݄14೔໦༵೔
20. Summit Developers Developers Summit 2013 Action ! DOM 13೥2݄14೔໦༵೔
21. Summit Developers Developers Summit 2013 Action ! DOM  CSS2Ͱඳը ̎೥લ·ͰͷPCαΠτͰͷJSΞχϝʔγϣϯ͸ɺ DOMͷCSS2Ͱ࣮૷͞Ε͍ͯͨɻ 13೥2݄14೔໦༵೔
22. Summit Developers Developers Summit 2013 Action ! DOM  CSS2Ͱඳը ϚʔδϯϨϑτͰಈ͔͢ IOS: GPUແޮɻ஗͍ɻ ANDROID: ஗͍ɻएׯ҆ఆɻ ݁࿦ɿNGɻ 13೥2݄14೔໦༵೔
23. Summit Developers Developers Summit 2013 Action ! DOM  CSS2Ͱඳը ϨϑτͰಈ͔͢ IOS: GPUແޮɻ஗͍ɻ ANDROID: ஗͍ɻएׯ҆ఆɻ ݁࿦ɿNGɻ 13೥2݄14೔໦༵೔
24. Summit Developers Developers Summit 2013 Action ! CSS3 13೥2݄14೔໦༵೔
25. Summit Developers Developers Summit 2013 Action ! DOM  CSS3Ͱඳը CSS3͕ఆ࣮ٛ૷͞ΕɺGPUΞΫηϥϨʔγϣϯͷޮ͍ͨJS Ξχϝʔγϣϯ͕Ͱ͖ΔΑ͏ʹͳͬͨɻ 13೥2݄14೔໦༵೔
26. Summit Developers Developers Summit 2013 Action ! DOM  CSS3Ͱඳը TRANSLATEXͰಈ͔͢ IOS: IOS>4ɺGPU༗ޮɻૣ͍ɻ ANDROID: ػछʹΑͬͯෆ҆ఆɻ ݁࿦ɿ༗ΓʢಛʹIOSʣ 13೥2݄14೔໦༵೔
27. Summit Developers Developers Summit 2013 Action ! DOM  CSS3  3DͰඳը TRANSLATE3DͰಈ͔͢ IOS: GPU༗ޮɻҰ൪ૣ͍ɻ ANDROID: ෆ҆ఆɺඳը͞Εͳ͍ɻ CHROME: ৔߹ʹΑΔɻ ݁࿦ɿ༗ΓʢIOSͷΈʣ 13೥2݄14೔໦༵೔
28. Summit Developers Developers Summit 2013 Action ! GPU͸༗ޮʁ 13೥2݄14೔໦༵೔
29. Summit Developers Developers Summit 2013 Action ! GPUΛՄࢹԽ͢Δ IOS SIMULATOR 13೥2݄14೔໦༵೔
30. Summit Developers Developers Summit 2013 Action ! GPUΛՄࢹԽ͢Δ MIHTOOL IPHONEΞϓϦʢແྉʣ 13೥2݄14೔໦༵೔
31. Summit Developers Developers Summit 2013 Action ! GPU࢖༻࣌ͷ஫ҙ఺ GPU͸ϚδοΫϒϥοΫϘοΫεɻ ɾόοϑΝʔαΠζ͕ෆ໌ ɾϦιʔεͷ্ݶ͕ෆ໌ ɾΦϒδΣΫτͷΧ΢ϯτ͕ෆՄ ɾΫϥογϡͷݪҼ͕ಛఆෆՄ ϦΞϦςΟ νΣοΫ 13೥2݄14೔໦༵೔
32. Summit Developers Developers Summit 2013 Action ! GPU࢖༻࣌ͷ஫ҙ఺ ͕ͩɺϋʔυ΢ΣΞʹΑΔߴ଎ͳඳըΛ࣮ݱ͢ΔͨΊʹ GPUʹґଘͤ͟ΔΛಘͳ͍ɻ ϦΞϦςΟ νΣοΫ 13೥2݄14೔໦༵೔
33. Summit Developers Developers Summit 2013 Action ! CSS3  FILTERS 13೥2݄14೔໦༵೔
34. Summit Developers Developers Summit 2013 Action ! CSS3 FILTERSͰޮՌ ɾάϨʔεέʔϧɿGRAYSCALE ɾ৭૬ɿHUE-ROTATE ɾ໌౓ɿBRIGHTNESS ɾ࠼౓ɿSATURATE ɾηϐΞɿSEPIA ɾಁ໌౓ɿOPACITY ɾ֊ௐͷ൓సɿINVERT ɾίϯτϥετɿCONTRAST ɾ΅͔͠ɿBLUR ɾυϩοϓγϟυ΢ɿDROP-SHADOW CSS3  FILTERSͰඳը 13೥2݄14೔໦༵೔
35. Summit Developers Developers Summit 2013 Action ! CSS3  FILTERSͰඳը CSS3 FILTERSͰޮՌ IOS: IOS6ΑΓ࣮૷ɻGPU༗ޮɻ΅͔͠Ҏ֎͸ૣ͍ɻ ANDROID: ະ࣮૷ɻCHROMEͰ·ͩෆ҆ఆɻ ݁࿦ɿ༗ΓʢIOSͷΈʣ 13೥2݄14೔໦༵೔
36. Summit Developers Developers Summit 2013 Action ! CSS3  CUSTOM  FILTERS 13೥2݄14೔໦༵೔
37. Summit Developers Developers Summit 2013 Action ! CSS3  CUSTOM  FILTERSͰඳը CSS3 CUSTOM FILTERSͰޮՌ γΣʔμʔ͸OPENGLγΣʔσΟϯάݴޠʢGLSLʣͰ هड़͞ΕΔɻ ɾPS: ϐΫηϧγΣʔμ ɾVS: όʔςοΫεγΣʔμ DOMͷཁૉʹରͯ͠ద༻Ͱ͖Δɻ 13೥2݄14೔໦༵೔
38. Summit Developers Developers Summit 2013 Action ! CSS3  CUSTOM  FILTERSͰඳը CSS3 CUSTOM FILTERSͰޮՌ IOS: ະ࣮૷ɻIOS>7ʹظ଴ɻ ANDROID: ະ࣮૷ɻOS>4.3ͷCHROMEʹظ଴ɻ ݁࿦ɿࠓޙ 13೥2݄14೔໦༵೔
39. Summit Developers Developers Summit 2013 Action ! CANVAS 13೥2݄14೔໦༵೔
40. Summit Developers Developers Summit 2013 Action ! CANVASͰඳը CANVAS CANVAS͸ࣗ༝౓͕ߴ͍Ұํɺ DOMଆͰ࣮૷͞Ε͍ͯͨػೳ͕࢖༻Ͱ͖ͳ͘ͳΔɻ ɾςΩετϨΠΞ΢τ ɾCSSޮՌɿSHADOW, FILTERS ɾςΩετϋΠϥΠτʢΞΫηγϏϦςΟ΋ແ͠ʣ ɾϘλϯ΍ϑΥʔϜཁૉ ɾҐஔ΍पΓͷΦϒδΣΫτͷ৘ใऔಘ 13೥2݄14೔໦༵೔
41. Summit Developers Developers Summit 2013 Action ! CANVASͰඳը CANVASͷඳըͷશͯ͸ࣗ෼Ͱ΍Βͳ͍ͱ͍͚ͳ͍ ύϑΥʔϚϯεTIPS ɾঢ়ଶૢ࡞Λඞཁ࠷খݶʹ͢Δ ɾෳ਺ͷCANVASཁૉΛ࢖ͬͯϓϨϨϯμϦϯά΍ ϨΠϠʔΛݕ౼͢Δ ɾࠩ෼ͷΈϨϯμϦϯά͢Δ ɾුಈখ਺఺࠲ඪΛ੔਺ʹม׵͢Δ 13೥2݄14೔໦༵೔
42. Summit Developers Developers Summit 2013 Action ! CANVASͰඳը CANVASͰಈ͔͢ IOS: IOS>5ϐΫηϧͷඳըͷΈGPUࢧԉɻ ANDROID: ৔߹ʹΑͬͯ҆ఆɻ ݁࿦ɿ༗Γ 13೥2݄14೔໦༵೔
43. Summit Developers Developers Summit 2013 Action ! WEBGL 13೥2݄14೔໦༵೔
44. Summit Developers Developers Summit 2013 Action ! WEBGLͰඳը WEBGL PC൛ͷCHROMEͰ͸طʹ੝Γ্͕͍ͬͯΔ༷ࢠɻ HTML5Ͱͷඳըͷ࠷ઌ୺ٕज़ɻ 13೥2݄14೔໦༵೔
45. Summit Developers Developers Summit 2013 Action ! WEBGLͰඳը THREE.JSͰಈ͔͢ IOS: ࣮૷͞Ε͍ͯΔ͕ɺඇެ։ɻIADͷΈڐՄɻ ANDROID: OS>4.2ͷCHROME(Β)ΑΓ༗ޮɻݱঢ়ෆ҆ఆɻ ݁࿦ɿࠓޙ༗Γ 13೥2݄14೔໦༵೔
46. Summit Developers Developers Summit 2013 Action ! εϚϗͰ࢖͑Δ3Dٕज़ 13೥2݄14೔໦༵೔
47. Summit Developers Developers Summit 2013 Action ! εϚϗͰ࢖͑Δ3Dٕज़ ݱঢ় IOS: CSS3 3DɺIOS4͔Β҆ఆʹ࣮૷ࡁΈɻ ANDROID: CANVAS 2DͰ3DΛγϛϡϨʔγϣϯɻ 13೥2݄14೔໦༵೔
48. Summit Developers Developers Summit 2013 Action ! εϚϗͰ࢖͑Δ3Dٕज़ ࠓޙ IOS: CSS3 3D΋มΘΒͣɻIOS7~8ΑΓWEBGLڐՄʹظ଴ɻ ANDROID: OS>4.2ͷCHROMEΑΓWEBGL͕࣮૷͞ΕΔɻ 13೥2݄14೔໦༵೔
49. Summit Developers Developers Summit 2013 Action ! CSS3  3D༻ͷϥΠϒϥϦ 13೥2݄14೔໦༵೔
50. Summit Developers Developers Summit 2013 Action ! CSS3  3D༻ͷϥΠϒϥϦ ݱࡏҰ൪ػೳͱਓؾͷ͋ΔϥΠϒϥϦɻ ɾWEBGLϨϯμʔ ɾCSS3 3DϨϯμʔ ɾCANVASϨϯμʔ ɾCPUϨϯμʔ THREE.JS 13೥2݄14೔໦༵೔
51. Summit Developers Developers Summit 2013 Action ! CSS3  3D༻ͷϥΠϒϥϦ CSS3-3Dઐ༻ͷܰྔϥΠϒϥϦɻ SPRITE3D.JS 13೥2݄14೔໦༵೔
52. Summit Developers Developers Summit 2013 Action ! CSS3  3D༻ͷϥΠϒϥϦ CSS3-3Dઐ༻ͷϥΠτχϯάΤϯδϯɻ PHOTON 13೥2݄14೔໦༵೔
53. Summit Developers Developers Summit 2013 Action ! CSS3  3D༻ͷϥΠϒϥϦ ถاۀʹΑΔCSS3-3Dઐ༻ͷΤϯδϯΛ։ൃதɻ FAMO.US 13೥2݄14೔໦༵೔
54. Summit Developers Developers Summit 2013 Action ! 13೥2݄14೔໦༵೔
55. Summit Developers Developers Summit 2013 Action ! දݱྗ͸ϒϥ΢βʹΑͬͯશ͘ҟͳΔ 13೥2݄14೔໦༵೔
56. Summit Developers Developers Summit 2013 Action ! ϒϥ΢βʹΑͬͯͷදݱྗ εϚϗϒϥ΢βͷදݱྗͷঢ়گ͸ ੲͷίϯγϡʔϚʔ޲͚ήʔϜػઓ૪ͱ ࣅͨΑ͏ͳঢ়گɻ ϦΞϦςΟ νΣοΫ 13೥2݄14೔໦༵೔
57. Summit Developers Developers Summit 2013 Action ! ϒϥ΢βͷॾʑόάʹΑͬͯɺ࣮ࡍʹ 13೥2݄14೔໦༵೔
58. Summit Developers Developers Summit 2013 Action ! ϒϥ΢βʹΑͬͯͷදݱྗ = = = ~ PS2 SNES N64 PS3 ϦΞϦςΟ νΣοΫ 13೥2݄14೔໦༵೔
59. Summit Developers Developers Summit 2013 Action ! ϒϥ΢βʹΑͬͯͷදݱྗ ίϯγϡʔϚʔ޲͚ήʔϜػͱಉ༷ѻ͍ɿ 3Dදݱ͸ಛఆͷϓϥοτϗʔϜʹߜΔɻ ݹ͍ϒϥ΢β͸௨ৗͷ2DͰϨϯμϦϯάɻ ϦΞϦςΟ νΣοΫ ߟ͑ΒΕΔϙϦγʔ 13೥2݄14೔໦༵೔
60. Summit Developers Developers Summit 2013 Action ! I  suggest  your  Next  AcEon! 13೥2݄14೔໦༵೔
61. Summit Developers Developers Summit 2013 Action ! ࠷ޙʹɺTHREE.JSͰσϞΛ࡞Ζ͏ 13೥2݄14೔໦༵೔
62. Summit Developers Developers Summit 2013 Action ! ࠷ޙʹThree.jsͰσϞΛ࡞Ζ͏ WEBGLͱCSS3 3DΛѻ͍΍͘͢͢ΔTHREE.JSΛ࠾༻ɻ ɾSCENEࢧԉ ɾCAMERAࢧԉ ɾMESHࢧԉ ɾTWEENSࢧԉ ɾ౳ʑ 13೥2݄14೔໦༵೔
63. Summit Developers Developers Summit 2013 Action ! It’s  your  turn. 13೥2݄14೔໦༵೔
64. Summit Developers Developers Summit 2013 Action ! ϦϯΫू ঺հ 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೔໦༵೔
65. Summit Developers Developers Summit 2013 Action ! ϦϯΫू πʔϧ 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೔໦༵೔
66. Summit Developers Developers Summit 2013 Action ! ϦϯΫू 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೔໦༵೔
67. Summit Developers Developers Summit 2013 Action ! ϦϯΫू 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೔໦༵೔
68. Summit Developers Developers Summit 2013 Action ! ϦϯΫू ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ 13೥2݄14೔໦༵೔