$30 off During Our Annual Pro Sale. View Details »

大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction

大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction

第68回HTML5とか勉強会の資料です。

久保田光則

February 22, 2017
Tweet

More Decks by 久保田光則

Other Decks in Technology

Transcript

  1. େྔͷཁૉΛߴ଎ʹදࣔ͢Δ
    όʔνϟϧϨϯμϦϯάೖ໳
    "TQFDUJWF--$ٱอాޫଇ!BOBUPP

    View Slide

  2. ࣗݾ঺հ
    ٱอాޫଇ
    "TQFDUJWF--$୅ද
    !BOBUPP
    HJUIVCDPNBOBUPP

    View Slide

  3. ΞδΣϯμ
    όʔνϟϧϨϯμϦϯάͱ͸
    ࢓૊Έͱ࣮૷

    View Slide

  4. όʔνϟϧϨϯμϦϯάͱ͸

    View Slide

  5. όʔνϟϧϨϯμϦϯάͱ͸
    ύϑΥʔϚϯεͷͨΊͷςΫχοΫ
    ΢ΣϒϖʔδʹେྔͷཁૉΛߴ଎ʹ
    දࣔ͢ΔͨΊͷςΫχοΫ

    View Slide

  6. େྔͬͯͲΕ͙Β͍

    View Slide

  7. ਺ઍ͔Β਺ඦສͷཁૉ

    View Slide

  8. ࣮ྫ
    (PPHMF4QSFBETIFFU

    View Slide

  9. View Slide

  10. ͳͥඞཁ
    ී௨ʹ୔ࢁͷཁૉΛදࣔ͢ΔͱͲ͏ͳΔ͔
    ྫ͑͹%0.ཁૉΛ਺ेສݸ௥Ճ͢ΔͱͲ͏
    ͳΔ͔
    ϨϯμϦϯά͕ͱͯ΋ॏͨ͘ͳΔ

    View Slide

  11. IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFSFOEFSJOH
    ϨϯμϦϯάͷྲྀΕ

    View Slide

  12. શ%0.ཁૉͷ
    ελΠϧΛܭࢉ

    View Slide

  13. શͯͷࢹ֮ཁૉͷ
    ϨΠΞ΢τΛܭࢉ

    View Slide

  14. શͯͷࢹ֮ཁૉΛ
    ඳը͢ΔͨΊͷ໋ྩΛ
    ੜ੒ͯ͠ϥελϥΠζ

    View Slide

  15. ࢓૊Έ্͠ΐ͏͕ͳ͍
    %0.ཁૉ͕૿͑Ε͹૿͑Δ΄Ͳ

    ϨϯμϦϯά͕ॏͨ͘ͳΔ
    ΠϯλϥΫγϣϯͷࡍͷ࠶ϨϯμϦ
    ϯά΋ॏͨ͘ͳΔ

    View Slide

  16. ͜Εʹର͢Δબ୒ࢶ
    ཁ݅Λมߋ͢Δ
    ཁ݅Λม͑ͣʹٕज़Ͱղܾ͢Δ

    View Slide

  17. ཁ݅Λมߋ͢Δ

    View Slide

  18. ϖʔδૹΓΛ࠾༻͢Δ
    ੲͳ͕Βͷ΍Γํ

    View Slide

  19. ϖʔδૹΓΛ࠾༻ͨ͘͠ͳ͍৔߹
    41"ͰϦονͳମݧΛఏڙ͍ͨ͠
    $PSEPWBͰϞόΠϧΞϓϦͬΆ͍ͨ͘͠
    &MFDUSPOͰσεΫτοϓΞϓϦͬΆ͍ͨ͘͠
    (PPHMF4QSFBETIFFUͳͲΞϓϦέʔγϣϯͷ
    ಛੑ্ϖʔδૹΓͰ͖ͳ͍৔߹΋

    View Slide

  20. ཁ݅Λม͑ͣʹόʔνϟϧ
    ϨϯμϦϯάͰղܾ͢Δ

    View Slide

  21. όʔνϟϧϨϯμϦϯά
    ࣮࣭తඳը
    %0.ཁૉ਺Λಈతʹ؅ཧ͢Δ࢓૊Έ

    View Slide

  22. جຊతͳΞΠσΞ
    ຊ౰ʹඞཁͳ%0.ཁૉ͚ͩΛϩʔυ
    ඞཁͳ͘ͳͬͨΒΞϯϩʔυ͢Δ
    %0.ཁૉ਺Λ཈͑Δ

    View Slide

  23. ຊ౰ʹඞཁͳ%0.ཁૉͱ͸

    View Slide

  24. http://
    ϒϥ΢βͷWJFXQPSU

    View Slide

  25. ίϯςϯπશମ

    View Slide

  26. http://
    ϒϥ΢βͷWJFXQPSU
    ίϯςϯπશମ

    View Slide

  27. WJFXQPSU͔Β֎Εͨཁૉ͸ඳը
    ͠ͳͯ͘΋ྑ͍ͷͰ͸

    View Slide

  28. ίϯςϯπશମ
    όʔνϟϧϨϯμϦϯά

    http://
    ϒϥ΢βͷWJFXQPSU
    ίϯςϯπશମ
    ී௨ʹදࣔ

    View Slide

  29. ݟ͑ͳ͍෦෼ͷඳըΛαϘΔ

    View Slide

  30. ΞϧΰϦζϜͷྲྀΕ

    View Slide

  31. εΫϩʔϧྖҬͷ֬อ
    %0.ཁૉͷϩʔυɾΞϯϩʔυ
    εΫϩʔϧΛิ଍ͯ͠ʹ໭Δ

    View Slide

  32. εΫϩʔϧྖҬͷ֬อ
    εΫϩʔϧྖҬΛܭࢉ͢Δ
    ۭͷ%*7Λ࡞ͬͯεΫϩʔϧྖҬΛ
    ֬อ͢Δ

    View Slide

  33. http://
    ϒϥ΢βͷWJFXQPSU
    ίϯςϯπશମ

    View Slide

  34. %0.ཁૉͷϩʔυͱΞϯϩʔυ
    WJFXQPSU಺ʹԿ͕ϨϯμϦϯά͞ΕΔ
    ͷ͔Λܭࢉͯ͠%0.ཁૉΛϩʔυ͢Δ
    WJFXQPSU͔Β֎Εͨ%0.ཁૉΛΞϯ
    ϩʔυ͢Δ

    View Slide

  35. http://
    ϒϥ΢βͷWJFXQPSU
    ίϯςϯπશମ
    ϩʔυ

    View Slide

  36. εΫϩʔϧΛݕ஌͢Δ
    εΫϩʔϧ͕͋ΔͱWJFXQPSUͷҐஔ
    ΋มΘΔͷͰॲཧΛ΍Γ௚͢

    View Slide

  37. http://
    ϒϥ΢βͷWJFXQPSU
    ίϯςϯπશମ
    εΫϩʔϧ

    View Slide

  38. http://
    ϒϥ΢βͷWJFXQPSU
    ίϯςϯπશମ
    ϩʔυ
    Ξϯϩʔυ

    View Slide

  39. ઃܭ࣮૷࣌ͷ೰ΈͲ͜Ζ

    View Slide

  40. WJFXQPSUʹରԠ͢Δ%0.ཁૉͱҐஔΛ

    Ͳ͏΍ͬͯಛఆ͢Δͷ͔
    http://
    ϒϥ΢βͷWJFXQPSU
    ίϯςϯπશମ

    View Slide

  41. ֤ཁૉͷେ͖͕͞ݻఆͳΒ࿩͸؆୯

    View Slide

  42. http://
    ϒϥ΢βͷWJFXQPSU
    ίϯςϯπશମ Ծ૝తͳ
    ཁૉͷϦετ
    ^%0.πϦʔʹ
    ಡΈࠐΉ΂͖
    ཁૉ

    View Slide

  43. ֤ཁૉͷେ͖͕͞ෆఆͰ͋Δ৔߹

    View Slide

  44. http://
    ϒϥ΢βͷWJFXQPSU
    ίϯςϯπશମ Ծ૝తͳ
    ཁૉͷϦετ
    ^%0.πϦʔʹ
    ಡΈࠐΉ΂͖
    ཁૉ
    ͦΕͳΓʹܭࢉ͢Ε͹·͋େৎ෉

    View Slide

  45. ֤ཁૉͷେ͖͕͞ෆఆ͔ͭ
    େ͖͕͞ࣄલʹΘ͔Βͳ͍৔߹

    View Slide

  46. http://
    ϒϥ΢βͷWJFXQPSU
    ίϯςϯπશମ Ծ૝తͳ
    ཁૉͷϦετ
    %0.πϦʔʹ
    ಡΈࠐΉ΂͖
    ཁૉ͸ͲΕ
    ͲͷҐஔʹ
    %0.ཁૉΛ
    දࣔ͢Ε͹ྑ͍

    View Slide

  47. ཁૉͷେ͖͕͞Θ͔Βͳ͍৔߹
    ֤ཁૉͷେ͖͞ΛԾͰ͓࣋ͬͯ͘
    εΫϩʔϧൣғͷେ͖͞ΛԾͰܭࢉ͢Δ
    ϨϯμϦϯά͔ͯ͠Βཁૉͷେ͖͞Λ
    HFU#PVOEJOH$MJFOU3FDU
    ͳͲΛ࢖ͬͯอଘ͓ͯ͘͠
    'PSDFE4ZODISPOPVT-BZPVUΛى͕ͪ͜͠
    ࣮ࡍͷཁૉͷେ͖͕͞Θ͔ͬͨΒཁૉͷҐஔ΍εΫ
    ϩʔϧൣғ΍εΫϩʔϧҐஔΛߋ৽͢Δ

    View Slide

  48. ݁ߏ໘౗

    View Slide

  49. ՝୊

    View Slide

  50. ՝୊
    εΫϩʔϧͰ'14ग़͢ͷ͕೉͍͠
    εΫϩʔϧΠϕϯτΛิ଍ͯ͠ɺͱ
    ͍͏ܗʹͳΔͷͰͦͷ෼εΫϩʔϧ
    ͕ॏͨ͘ͳΔ

    View Slide

  51. ՝୊ղܾ΁ͷΞϓϩʔν
    1BTTJWF&WFOU-JTUFOFS
    *OUFSTFDUJPO0CTFSWFS

    View Slide

  52. ิ଍

    View Slide

  53. ิ଍طଘͷ࣮૷
    0OTFO6*ͷPOTMB[ZMPBE
    3FBDUKT༻ͷSFBDUWJSUVBMJ[FE
    "OHVMBS༻ͷBOHVMBSWJSUVBMMJTU
    ౳ͳͲ

    View Slide

  54. ิ଍ແݶεΫϩʔϧͱͷҧ͍
    ແݶεΫϩʔϧͰ͸ɺ%0.ཁૉͷ
    ਺͸ͲΜͲΜ૿͍͑ͯ͘ɻݮΒͳ͍
    όʔνϟϧϨϯμϦϯάͱซ༻͞Ε
    Δ͜ͱ΋͋Γ

    View Slide

  55. ·ͱΊ
    %0.ཁૉ਺͕૿͑Δͱॏͨ͘ͳΔ
    ಈతʹ%0.ཁૉͷ਺Λௐ੔͢Δͷ
    ͕όʔνϟϧϨϯμϦϯά
    ࣮ࡍʹදࣔ͞ΕΔ%0.ཁૉʹண໨

    View Slide

  56. ͝ਗ਼ௌ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠ɻ

    View Slide