Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Gunther Brunner

February 14, 2013
Tweet

More Decks by Gunther Brunner

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

  3. Summit
    Developers
    Developers Summit 2013 Action !
    ࣗݾ঺հ
    13೥2݄14೔໦༵೔

    View Slide

  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೔໦༵೔

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. Summit
    Developers
    Developers Summit 2013 Action !
    HTML5Ͱͷඳըٕज़
    13೥2݄14೔໦༵೔

    View Slide

  9. Summit
    Developers
    Developers Summit 2013 Action !
    HTML5Ͱͷඳըٕज़
    ɾDOM
    ɾCSS3
    ɾCSS3 3D
    ɾCSS3 FILTERS
    ɾCANVAS
    ɾWEBGL
    13೥2݄14೔໦༵೔

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. Summit
    Developers
    Developers Summit 2013 Action !
    ࠃ಺εϚϗϒϥ΢βঢ়گ
    WEBKITͱ͸͍͑ɺ
    IOSɺANDROIDɺCHROME͸શ͘ҟͳΔɻ
    ɾWEBKITͷ࣮૷
    ɾόʔδϣϯҧ͍
    ɾෆ໌ͳͱ͜Ζ
    ɾόά
    ɾJSΤϯδϯ
    ɾσόΠεͷҧ͍
    13೥2݄14೔໦༵೔

    View Slide

  16. Summit
    Developers
    Developers Summit 2013 Action !
    ࠃ಺εϚϗϒϥ΢βঢ়گ
    ͔͠͠ɺ
    ɾඳըٕज़ʢCANVAS, CSS3,...ʣ
    ɾσόΠεʢIPHONE, ANDROIDʣ
    ɾOSόʔδϣϯʢIOS4VS
    6, ANDROID 2VS

    ɾϒϥ΢βόάʢಛʹANDROIDʣ
    ύϑΥʔϚϯεɺϢʔβମײ͕શ͘ҟͳΔɻ
    ϦΞϦςΟ
    νΣοΫ
    13೥2݄14೔໦༵೔

    View Slide

  17. Summit
    Developers
    Developers Summit 2013 Action !
    ࠃ಺εϚϗϒϥ΢βঢ়گ
    “ήʔϜͰ͸ඳըͷύϑΥʔϚϯε͕େࣄ”
    ཧ૝:  60fps
    ࠷ѱ:  20fps
    13೥2݄14೔໦༵೔

    View Slide

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

    View Slide

  19. Summit
    Developers
    Developers Summit 2013 Action !
    HTML5Ͱͷඳըٕज़
    ɾDOM
    ɾCSS3
    ɾCSS3 3D
    ɾCSS3 FILTERS
    ɾCANVAS
    ɾWEBGL
    13೥2݄14೔໦༵೔

    View Slide

  20. Summit
    Developers
    Developers Summit 2013 Action !
    DOM
    13೥2݄14೔໦༵೔

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. Summit
    Developers
    Developers Summit 2013 Action !
    CSS3
    13೥2݄14೔໦༵೔

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. Summit
    Developers
    Developers Summit 2013 Action !
    GPU͸༗ޮʁ
    13೥2݄14೔໦༵೔

    View Slide

  29. Summit
    Developers
    Developers Summit 2013 Action !
    GPUΛՄࢹԽ͢Δ
    IOS SIMULATOR
    13೥2݄14೔໦༵೔

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. Summit
    Developers
    Developers Summit 2013 Action !
    CSS3  FILTERS
    13೥2݄14೔໦༵೔

    View Slide

  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೔໦༵೔

    View Slide

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

    View Slide

  36. Summit
    Developers
    Developers Summit 2013 Action !
    CSS3  CUSTOM  FILTERS
    13೥2݄14೔໦༵೔

    View Slide

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

    View Slide

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

    View Slide

  39. Summit
    Developers
    Developers Summit 2013 Action !
    CANVAS
    13೥2݄14೔໦༵೔

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  43. Summit
    Developers
    Developers Summit 2013 Action !
    WEBGL
    13೥2݄14೔໦༵೔

    View Slide

  44. Summit
    Developers
    Developers Summit 2013 Action !
    WEBGLͰඳը
    WEBGL
    PC൛ͷCHROMEͰ͸طʹ੝Γ্͕͍ͬͯΔ༷ࢠɻ
    HTML5Ͱͷඳըͷ࠷ઌ୺ٕज़ɻ
    13೥2݄14೔໦༵೔

    View Slide

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

    View Slide

  46. Summit
    Developers
    Developers Summit 2013 Action !
    εϚϗͰ࢖͑Δ3Dٕज़
    13೥2݄14೔໦༵೔

    View Slide

  47. Summit
    Developers
    Developers Summit 2013 Action !
    εϚϗͰ࢖͑Δ3Dٕज़
    ݱঢ়
    IOS: CSS3 3DɺIOS4͔Β҆ఆʹ࣮૷ࡁΈɻ
    ANDROID: CANVAS 2DͰ3DΛγϛϡϨʔγϣϯɻ
    13೥2݄14೔໦༵೔

    View Slide

  48. Summit
    Developers
    Developers Summit 2013 Action !
    εϚϗͰ࢖͑Δ3Dٕज़
    ࠓޙ
    IOS: CSS3 3D΋มΘΒͣɻIOS7~8ΑΓWEBGLڐՄʹظ଴ɻ
    ANDROID: OS>4.2ͷCHROMEΑΓWEBGL͕࣮૷͞ΕΔɻ
    13೥2݄14೔໦༵೔

    View Slide

  49. Summit
    Developers
    Developers Summit 2013 Action !
    CSS3  3D༻ͷϥΠϒϥϦ
    13೥2݄14೔໦༵೔

    View Slide

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

    View Slide

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

    View Slide

  52. Summit
    Developers
    Developers Summit 2013 Action !
    CSS3  3D༻ͷϥΠϒϥϦ
    CSS3-3Dઐ༻ͷϥΠτχϯάΤϯδϯɻ
    PHOTON
    13೥2݄14೔໦༵೔

    View Slide

  53. Summit
    Developers
    Developers Summit 2013 Action !
    CSS3  3D༻ͷϥΠϒϥϦ
    ถاۀʹΑΔCSS3-3Dઐ༻ͷΤϯδϯΛ։ൃதɻ
    FAMO.US
    13೥2݄14೔໦༵೔

    View Slide

  54. Summit
    Developers
    Developers Summit 2013 Action !
    13೥2݄14೔໦༵೔

    View Slide

  55. Summit
    Developers
    Developers Summit 2013 Action !
    දݱྗ͸ϒϥ΢βʹΑͬͯશ͘ҟͳΔ
    13೥2݄14೔໦༵೔

    View Slide

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

    View Slide

  57. Summit
    Developers
    Developers Summit 2013 Action !
    ϒϥ΢βͷॾʑόάʹΑͬͯɺ࣮ࡍʹ
    13೥2݄14೔໦༵೔

    View Slide

  58. Summit
    Developers
    Developers Summit 2013 Action !
    ϒϥ΢βʹΑͬͯͷදݱྗ
    =
    =
    = ~
    PS2
    SNES
    N64 PS3
    ϦΞϦςΟ
    νΣοΫ
    13೥2݄14೔໦༵೔

    View Slide

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

    View Slide

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

    View Slide

  61. Summit
    Developers
    Developers Summit 2013 Action !
    ࠷ޙʹɺTHREE.JSͰσϞΛ࡞Ζ͏
    13೥2݄14೔໦༵೔

    View Slide

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

    View Slide

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

    View Slide

  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೔໦༵೔

    View Slide

  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೔໦༵೔

    View Slide

  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೔໦༵೔

    View Slide

  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೔໦༵೔

    View Slide

  68. Summit
    Developers
    Developers Summit 2013 Action !
    ϦϯΫू
    ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    13೥2݄14೔໦༵೔

    View Slide