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

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

Transcript

1. େྔͷཁૉΛߴ଎ʹදࣔ͢Δ
   όʔνϟϧϨϯμϦϯάೖ໳ "TQFDUJWF
   --$
   ٱอాޫଇ
   !BOBUPP
2. ࣗݾ঺հ ٱอాޫଇ
   "TQFDUJWF
   --$୅ද
   
   
   
   
   
   !BOBUPP
   
   
   
   
   
   HJUIVCDPNBOBUPP
3. ΞδΣϯμ  όʔνϟϧϨϯμϦϯάͱ͸
    ࢓૊Έͱ࣮૷
4. όʔνϟϧϨϯμϦϯάͱ͸
5. όʔνϟϧϨϯμϦϯάͱ͸  ύϑΥʔϚϯεͷͨΊͷςΫχοΫ
    ΢ΣϒϖʔδʹେྔͷཁૉΛߴ଎ʹ දࣔ͢ΔͨΊͷςΫχοΫ
6. େྔͬͯͲΕ͙Β͍
7. ਺ઍ͔Β਺ඦສͷཁૉ
8. ࣮ྫ  (PPHMF
   4QSFBETIFFU
10. ͳͥඞཁ  ී௨ʹ୔ࢁͷཁૉΛදࣔ͢ΔͱͲ͏ͳΔ͔
     ྫ͑͹%0.ཁૉΛ਺ेສݸ௥Ճ͢ΔͱͲ͏ ͳΔ͔ ϨϯμϦϯά͕ͱͯ΋ॏͨ͘ͳΔ
11. IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFSFOEFSJOH ϨϯμϦϯάͷྲྀΕ
12. શ%0.ཁૉͷ
    ελΠϧΛܭࢉ
13. શͯͷࢹ֮ཁૉͷ
    ϨΠΞ΢τΛܭࢉ
14. શͯͷࢹ֮ཁૉΛ
    ඳը͢ΔͨΊͷ໋ྩΛ
    ੜ੒ͯ͠ϥελϥΠζ
15. ࢓૊Έ্͠ΐ͏͕ͳ͍  %0.ཁૉ͕૿͑Ε͹૿͑Δ΄Ͳ
 ϨϯμϦϯά͕ॏͨ͘ͳΔ
     ΠϯλϥΫγϣϯͷࡍͷ࠶ϨϯμϦ ϯά΋ॏͨ͘ͳΔ
16. ͜Εʹର͢Δબ୒ࢶ  ཁ݅Λมߋ͢Δ
     ཁ݅Λม͑ͣʹٕज़Ͱղܾ͢Δ
17. ཁ݅Λมߋ͢Δ
18. ϖʔδૹΓΛ࠾༻͢Δ ੲͳ͕Βͷ΍Γํ
19. ϖʔδૹΓΛ࠾༻ͨ͘͠ͳ͍৔߹  41"ͰϦονͳମݧΛఏڙ͍ͨ͠
     $PSEPWBͰϞόΠϧΞϓϦͬΆ͍ͨ͘͠
     &MFDUSPOͰσεΫτοϓΞϓϦͬΆ͍ͨ͘͠
     (PPHMF
    4QSFBETIFFUͳͲΞϓϦέʔγϣϯͷ ಛੑ্ϖʔδૹΓͰ͖ͳ͍৔߹΋
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 ͳͲΛ࢖ͬͯอଘ͓ͯ͘͠
     'PSDFE
    4ZODISPOPVT
    -BZPVUΛى͕ͪ͜͠
     ࣮ࡍͷཁૉͷେ͖͕͞Θ͔ͬͨΒཁૉͷҐஔ΍εΫ ϩʔϧൣғ΍εΫϩʔϧҐஔΛߋ৽͢Δ
48. ݁ߏ໘౗
49. ՝୊
50. ՝୊  εΫϩʔϧͰ'14ग़͢ͷ͕೉͍͠
     εΫϩʔϧΠϕϯτΛิ଍ͯ͠ɺͱ ͍͏ܗʹͳΔͷͰͦͷ෼εΫϩʔϧ ͕ॏͨ͘ͳΔ
51. ՝୊ղܾ΁ͷΞϓϩʔν  1BTTJWF
    &WFOU
    -JTUFOFS
     *OUFSTFDUJPO
    0CTFSWFS
52. ิ଍
53. ิ଍
    طଘͷ࣮૷  0OTFO
    6*ͷPOTMB[ZMPBE
     3FBDUKT༻ͷSFBDUWJSUVBMJ[FE
     "OHVMBS༻ͷBOHVMBSWJSUVBMMJTU
     ౳ͳͲ
54. ิ଍
    ແݶεΫϩʔϧͱͷҧ͍  ແݶεΫϩʔϧͰ͸ɺ%0.ཁૉͷ ਺͸ͲΜͲΜ૿͍͑ͯ͘ɻݮΒͳ͍
     όʔνϟϧϨϯμϦϯάͱซ༻͞Ε Δ͜ͱ΋͋Γ
55. ·ͱΊ  %0.ཁૉ਺͕૿͑Δͱॏͨ͘ͳΔ
     ಈతʹ%0.ཁૉͷ਺Λௐ੔͢Δͷ ͕όʔνϟϧϨϯμϦϯά
     ࣮ࡍʹදࣔ͞ΕΔ%0.ཁૉʹண໨
56. ͝ਗ਼ௌ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠ɻ