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

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

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

F7dd7b43a0cc6c063f7d98ba23a1d359?s=128

久保田光則

February 22, 2017
Tweet

Transcript

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

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

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

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

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

  6. େྔͬͯͲΕ͙Β͍

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

  8. ࣮ྫ  (PPHMF4QSFBETIFFU

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

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

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

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

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

  15. ࢓૊Έ্͠ΐ͏͕ͳ͍  %0.ཁૉ͕૿͑Ε͹૿͑Δ΄Ͳ
 ϨϯμϦϯά͕ॏͨ͘ͳΔ  ΠϯλϥΫγϣϯͷࡍͷ࠶ϨϯμϦ ϯά΋ॏͨ͘ͳΔ

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

  17. ཁ݅Λมߋ͢Δ

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

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

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

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

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

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

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

  25. ίϯςϯπશମ

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

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

  28. ίϯςϯπશମ όʔνϟϧϨϯμϦϯά http:// ϒϥ΢βͷWJFXQPSU ίϯςϯπશମ ී௨ʹදࣔ

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

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

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

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

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

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

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

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

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

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

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

  40.  WJFXQPSUʹରԠ͢Δ%0.ཁૉͱҐஔΛ
 Ͳ͏΍ͬͯಛఆ͢Δͷ͔ http:// ϒϥ΢βͷWJFXQPSU ίϯςϯπશମ

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

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

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

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

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

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

    දࣔ͢Ε͹ྑ͍
  47. ཁૉͷେ͖͕͞Θ͔Βͳ͍৔߹  ֤ཁૉͷେ͖͞ΛԾͰ͓࣋ͬͯ͘  εΫϩʔϧൣғͷେ͖͞ΛԾͰܭࢉ͢Δ  ϨϯμϦϯά͔ͯ͠Βཁૉͷେ͖͞Λ HFU#PVOEJOH$MJFOU3FDU ͳͲΛ࢖ͬͯอଘ͓ͯ͘͠ 

    'PSDFE4ZODISPOPVT-BZPVUΛى͕ͪ͜͠  ࣮ࡍͷཁૉͷେ͖͕͞Θ͔ͬͨΒཁૉͷҐஔ΍εΫ ϩʔϧൣғ΍εΫϩʔϧҐஔΛߋ৽͢Δ
  48. ݁ߏ໘౗

  49. ՝୊

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

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

  52. ิ଍

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

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

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

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