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

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

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