Emscriptenを使ってブラウザ上でレイトレーシングする

Emscriptenを使ってブラウザ上でレイトレーシングしました
EmscriptenでOpenGLのプロジェクトを移植する方法やレイトレーシングとは何か知っていただければ幸いです。

Qiitaの記事のプレゼンテーション版です。
http://qiita.com/gam0022/items/6a1fb3e6946da1a3d7e5

Transcript

1. EmscriptenΛ࢖ͬͯ
   ϒϥ΢β্ͰϨΠτϨʔγϯά͢Δ
   Sho Hosoda / @gam0022
   

   View Slide

2. WebGL͸Ψν੎Ͱ͕͢ɺEmscripten͸ૉਓͰ͢
   ΄ͦͩɹɹ͠ΐ͏
   ࡉాɹᠳ
   ,-BCגࣜձࣾΤϯδχΞ
   !HBNʢ͕Ήʣ
   HBNOFU
   

   View Slide

3. ϨΠτϨʔγϯάͱ͸
   &NTDSJQUFOͰ$ͷϨΠτϨʔαΛಈ͔͢
   0QFO(-(-'8Ͱը໘ग़ྗ
   (16ʹΑΔϨΠτϨʔγϯάͷ঺հ
   Outline
   

   View Slide

4. ϨΠτϨʔγϯάͱ͸
   &NTDSJQUFOͰ$ͷϨΠτϨʔαΛಈ͔͢
   0QFO(-(-'8Ͱը໘ग़ྗ
   (16ʹΑΔϨΠτϨʔγϯάͷ঺հ
   Outline
   

   View Slide

5. ͦ΋ͦ΋
   ϨΠτϨʔγϯά
   ͬͯԿʁ
   

   View Slide

6. ϥελϥΠζ๏
   ϨΠτϨʔγϯά๏ʢϨΠτϨʣ
   3DCGͷඳըํ๏
   ϨΠτϨ%$(ඳըͷख๏
   

   View Slide

7. w ܗঢ়ΛϙϦΰϯʢࡾ֯ܗʣͷू߹Ͱදݱ
   w %ͷ௖఺Λ%ʹ౤Өͯ͠ඳը
   ϥελϥΠζ๏
   

   View Slide

8. w Χϝϥʹಧ͘ޫઢʢϨΠʣΛ

   શϐΫηϧ਺෼γϛϡϨʔγϣϯ
   ྫ
   ղ૾౓Y‎ສճͷγϛϡϨʔγϣϯ
   w ܭࢉίετ͕ॏ͍
   ϨΠτϨʔγϯά๏
   ʲը૾ग़యʳhttps://www.vcl.jp/~kanazawa/raytracing/?page_id=1154
   

   View Slide

9. ͦΕͧΕͷඳըํ๏ͷಛ௃
   http://gam0022.net/webgl/#pathtracing_sandbox
   https://threejs.org/examples/#webgl_loader_mmd
   w ϥελϥΠζ๏
   ߴ଎ʹඳըͰ͖Δ
   ϦΞϧλΠϜϨϯμϦϯά޲͖
   ήʔϜͳͲʹར༻
   w ϨΠτϨʔγϯά๏
   ޫͷ൓ࣹ΍۶ંͳͲͷ

   ޫֶతͳݱ৅Λѻ͏ͷ͕ಘҙ
   ࣌ؒΛ͔͚ͯߴ඼࣭ʹඳը͢Δ

   ΦϑϥΠϯϨϯμϦϯά޲͖
   өըͳͲʹར༻
   

   View Slide

10. ϨΠτϨʔγϯάͱ͸
    &NTDSJQUFOͰ$ͷϨΠτϨʔαΛಈ͔͢
    0QFO(-(-'8Ͱը໘ग़ྗ
    (16ʹΑΔϨΠτϨʔγϯάͷ঺հ
    Outline
    

    View Slide

11. w $$ͷίʔυΛBTNKTʹม׵͢Δ͜ͱͰ

    ϒϥ΢β্Ͱͷ࣮ߦΛՄೳʹ͢ΔίϯύΠϥ
    w &NTDSJQUFO͔Βੜ੒͞ΕͨBTNKT͸

    खॻ͖ͷ+BWB4DSJQUΑΓ΋ߴύϑΥʔϚϯε
    Emscriptenͱ͸
    C/C++ LLVM asm.js
    Clang
    

    View Slide

12. wϨΠτϨʔγϯά͸ܭࢉίετ͕ߴ͍ͷͰɺ

    ͳΔ΂͘ߴ଎Խ͍ͨ͠
    wϨΠτϨʔγϯάΛ$Ͱ࣮૷͠ɺ

    &NTDSJQUFOͰBTNKTʹม׵͢Δ͜ͱͰɺ

    ΑΓߴ଎ʹϒϥ΢β্Ͱ࣮ߦͰ͖ͦ͏ʂ
    ϨΠτϨʔγϯάΛEmscripten͢ΔϞνϕʔγϣϯ
    

    View Slide

13. w ϨΠτϨʔαϨΠτϨʔγϯάͷϓϩάϥϜ
    w ࣗ࡞ϨΠτϨʔαʮUTVLJIJʯ
    IUUQTHJUIVCDPNHBNUTVLJIJ
    7JTVBM4UVEJP WJTVBM$
    Ͱ։ൃɺ8JOEPXTͷΈಈ࡞
    ݁ՌΛ1/(ը૾ͱͯ͠ग़ྗ͢Δ$6*ΞϓϦ
    Ҡ২ͨ͠ϨΠτϨʔα
    

    View Slide

14. $MBOHͰϏϧυͰ͖ΔΑ͏ʹमਖ਼
    &NTDSJQUFOͰϏϧυͰ͖ΔΑ͏ʹमਖ਼
    EmscriptenͰC++ͷίʔυΛҠ২͢Δखॱ
    εςοϓ
    

    View Slide

15. w 7JTVBM4UEVJPͰ։ൃͨ͠ͷͰɺ$MBOHͰϏϧυͰ͖ͳ͍
    w --7.ͷόΠτίʔυΛಘΔͨΊʹɺ

    $MBOHͰϏϧυͰ͖ΔΑ͏ʹमਖ਼͢Δඞཁ͕͋Δ
    GPQFO@TͷΑ͏ͳ7$ͷಠࣗͷؔ਺Λॻ͖׵͑ͨ
    ฒྻॲཧͷͨΊͷ0QFO.1ΛແޮԽ
    1/(ग़ྗͷͨΊͷTUC@JNBHF͸໰୊ͳ͠
    w ͜ΕͰ$MBOHͰϏϧυͰ͖ΔΑ͏ʹमਖ਼Ͱ͖ͨʂ
    ·ͣ͸ClangͰϏϧυ͢Δ
    

    View Slide

16. w FNDDίϚϯυ
    $͔ΒBTNKTͷม׵Λߦ͏͜ͱͰɺϒϥ΢β্Ͱಈ࡞͢Δ
    )5.-΍OPEFKTΛग़ྗ͢ΔίϯύΠϥ
    w $MBOHͰϏϧυͰ͖Δঢ়ଶʹ͢Δ͜ͱͰɺ

    FNDDʹΑΔϏϧυ͕Ͱ͖ͨ
    DMBOHΛFNDDʹ͚ͨͩ͠
    ֎෦"1*΋04ػೳ΋ະ࢖༻ͩͬͨͷͰɺ

    ͋ͬ͞ΓͱҠ২Ͱ͖ͨ
    emccͰϏϧυ͢Δ
    

    View Slide

17. w ࣗ࡞ϨΠτϨʔα͸$6*ΞϓϦέʔγϣϯͳͷͰɺ

    ݁ՌΛϒϥ΢βͰ֬ೝͰ͖ͳ͍஍ຯ͗͢Δʜ
    w ͦ͏ͩʂ8FC(-Ͱը໘ग़ྗ͠Α͏ʂ
    ݁Ռͷ֬ೝ
    

    View Slide

18. ϨΠτϨʔγϯάͱ͸
    &NTDSJQUFOͰ$ͷϨΠτϨʔαΛಈ͔͢
    0QFO(-(-'8Ͱը໘ग़ྗ
    (16ʹΑΔϨΠτϨʔγϯάͷ঺հ
    Outline
    

    View Slide

19. w ϒϥ΢β্͔Βɺ0QFO(-ʢάϥϑΟοΫ"1*ʣΛ

    ୟ͚Δඪ४࢓༷
    8FC(-͸0QFO(-&4ͱ͍͏ϞόΠϧ޲͚ͷ"1*૬౰
    σεΫτοϓ޲͚ͷ0QFO(-ΑΓػೳ͸࡟ΒΕ͍ͯΔ
    ϋʔυ΢ΣΞͰΞΫηϥϨʔτ͞ΕΔͷͰߴύϑΥʔϚϯε
    w &NTDSJQUFO͸ɺ0QFO(-ͷίʔυ͔Β8FC(-΁ͷ
    ม׵΋ඪ४Ͱαϙʔτ͍ͯ͠Δ
    WebGLͱ͸
    

    View Slide

20. w 0QFO(-ΛFNDDͰϏϧυ͢ΔͨΊʹɺ

    ఆ਺Λએݴͨ͠ΓϔομΛՃ͑Δඞཁ͕͋ͬͨ
    w ެࣜαΠτʹ৘ใ͕ͳ͘ɺݸਓαΠτ͔Β৘ใΛಘͨ
    IUUQEIBUFOBOFKQTJNQH
    OpenGLΛEmscriptenͰϏϧυ͢Δ
    #ifdef EMSCRIPTEN
    #include
    #define GL_GLEXT_PROTOTYPES
    #define EGL_EGLEXT_PROTOTYPES
    #endif
    ඞཁͳఆ਺ͷએݴͱϔομͷΠϯΫϧʔυ
    

    View Slide

21. w (-'8͸ɺ0QFO(-ͷར༻Λαϙʔτ͢ΔπʔϧΩοτ
    ϚϧνϓϥοτϑΥʔϜ 8JOEPXT.BD-JOVY
    
    ΢Οϯυ΢ͷ࡞੒΍ΩʔϘʔυͷೖྗʹ(-'8Λར༻͢Δͱ

    ಉ͡ίʔυͰ༷ʑͳ؀ڥʹରԠͰ͖Δ
    w &NTDSJQUFO͸࠷৽ͷ(-'8΋αϙʔτ
    w FNDDͷΦϓγϣϯʹT64&@(-'8Λ͚ͭΔͱ
    (-'8Λར༻ͨ͠$ͷίʔυΛϏϧυͰ͖Δ
    GLFW3ΛEmscriptenͰϏϧυ͢Δ
    

    View Slide

22. w 0QFO(-ʹ͸ɺ#.1Λը໘ग़ྗ͢Δ

    HM%SBX1JYFMTͱ͍͏"1*͕͋Δ
    8FC(-Ͱ͸ଘࡏ͠ͳ͍"1*͕ͩͬͨɺ΋͔ͯ͠͠ม׵͞ΕΔ͔΋ʁ
    ˠ΍͸Γ࢖͑ͳ͔ͬͨ
    ʢ·͋౰વͰ͕͆͢ʣ
    w ୅ସ࣮૷
    ը໘શମΛ෴͏൘ϙϦΛ഑ஔͯ͠ςΫενϟΛઃఆ
    HM5FY4VC*NBHF%Λ࢖ͬͯɺςΫενϟը૾Λ

    ϨΠτϨͷ݁Ռը૾ʹಈతʹΞοϓσʔτ
    w ͜ΕͳΒ͏·͘ಈ͍ͨ
    glDrawPixelsͷ୅ସ࣮૷
    

    View Slide

23. w IUUQHBNOFUXFCHMFNTDSJQUFO@UTVLJIJ
    ׬੒ͨ͠΋ͷ
    

    View Slide

24. w .BD#PPL"JSΠϯν.JEϞσϧͰ࣮ߦ
    w ωΠςΟϒͱൺֱͯ͠ഒ͘Β͍஗͘ͳͬͨ
    ύϑΥʔϚϯεൺֱ
    ࣮ߦ࣌ؒʢsecʣ ࣮ߦ࣌ؒʢൺ཰ʣ
    ωΠςΟϒ 4.54495 1
    Emscripten 30.752 6.766
    

    View Slide

25. w 04΍֎෦ͷ"1*ͷґଘ͕গͳ͍ϓϩάϥϜͳΒ

    &NTDSJQUFOͰͷϙʔτ͸؆୯ͩͱײͨ͡
    w 0QFO(-(-'8ͷඪ४αϙʔτ΋خ͍͠
    w 0QFO(-Λαϙʔτ͍ͯ͠Δ͕ɺ

    8FC(-ʹଘࡏ͠ͳ͍"1*͸

    ࣗྗͰ୅ସ࣮૷͢Δඞཁ͕͋Δ
    EmscriptenͰϨΠτϨͷ·ͱΊ
    

    View Slide

26. ϨΠτϨʔγϯάͱ͸
    &NTDSJQUFOͰ$ͷϨΠτϨʔαΛಈ͔͢
    0QFO(-(-'8Ͱը໘ग़ྗ
    (16ʹΑΔϨΠτϨʔγϯάͷ঺հ
    Outline
    

    View Slide

27. w 8FC(-ͷϑϥάϝϯτγΣʔμΛར༻͢Ε͹

    (16Λ༻͍ͨϨΠτϨʔγϯά͕Մೳ
    w GQTͷϦΞϧλΠϜͷύϑΥʔϚϯε͕ग़ͤΔ
    w ͔͠΋ϒϥ΢β্Ͱʂʂ
    GPUʹΑΔϨΠτϨʔγϯά
    

    View Slide

28. ϨΠτϨʔγϯάͷ8FC(-ϑϥάϝϯτγΣʔμ࣮૷
    IUUQHBNOFUXFCHM
    ϒϥ΢β্ͷGPUͰͷϨΠτϨʔγϯά
    

    View Slide

29. ϨΠτϨʔγϯάͷ8FC(-ϑϥάϝϯτγΣʔμ࣮૷
    IUUQHBNOFUXFCHM
    ϒϥ΢β্ͷGPUͰͷϨΠτϨʔγϯά
    

    View Slide

30. w ৄ͘͠஌Γ͍ͨਓ΁
    γΣʔμ͚ͩͰੈքΛ૑ΔʂUISFFKTʹΑΔϨΠϚʔνϯά

    4IJEF4IBSF
    
    +BWB4DSJQUPPO ిࢠॻ੶
    
    IUUQTXHMEPSHEHMTM EPYBTࢯͷαΠτ
    
    GPUʹΑΔϨΠτϨʔγϯά
    

    View Slide

31. w ύϑΥʔϚϯε໘Ͱ͸(16͸ѹউ
    w ͱ͸͍͑(16΋ສೳͰ͸ͳ͍ʜ
    (16ͩͱෳࡶͳΞϧΰϦζϜͷ࣮૷͕େม
    ࣮༻తͳϨϯμϥʔΛ࡞Ζ͏ͱࢥ͏ͱɺ

    $16ͱ(16ͷσʔλͷ΍ΓͱΓͷ࣮૷͕େม
    w ৭ʑͳํ๏Λ໛ࡧ͢Δ͏ͪʹɺ&NTDSJQUFO΋ࢼͨ͠
    ͳͥCPU΁ճؼ͔ͨ͠ʁ
    

    View Slide

32. 0QFO(-(-'8ͷίʔυΛ
    &NTDSJQUFOͰҠ২͢Δํ๏
    ͷࢀߟʹͳͬͨʂ
    ϨΠτϨʔγϯάͬͯ

    ͜͏͍͏΋ͷͩͬͨΜͩʜʂ
    ʜͱײ͍͚ͯͨͩ͡Ε͹خ͍͠Ͱ͢
    

    View Slide

33. 5IBOLT
    

    View Slide

34. ެࣜαΠτͷ௨ΓʹΠϯετʔϧͰ͖ͨ
    IUUQLSJQLFOHJUIVCJPFNTDSJQUFOTJUFEPDT
    HFUUJOH@TUBSUFEEPXOMPBETIUNM
    l1PSUBCMF&NTDSJQUFO4%,GPS-JOVYBOE049zΛ

    μ΢ϯϩʔυʴղౚ
    ίϚϯυΛ࣮ͭߦ
    FNTELVQEBUF
    FNTELJOTUBMMMBUFTU
    FNTELBDUJWBUFMBUFTU
    EmscriptenͷΠϯετʔϧ(Macฤ)
    

    View Slide

35. w 1ZUIPOܥͩͱFNTELVQEBUFʹࣦഊͨ͠
    ɹˠ1ZUIPOܥʹ੾Γସ͑ͯରॲ
    w ࠷৽ͷެࣜαΠτͷํ๏ͰτϥΠ͠Α͏ʂ
    ͜ͷεϥΠυͷํ๏΋ݹ͘ͳΔՄೳੑ͕͋Δ
    .BDҎ֎ͷ؀ڥͰ΋ެࣜαΠτ௨Γʹ͍͚Δ͸ͣ
    EmscriptenͷΠϯετʔϧ(Macฤ)
    

    View Slide