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

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

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

Transcript

1. EmscriptenΛ࢖ͬͯ ϒϥ΢β্ͰϨΠτϨʔγϯά͢Δ Sho Hosoda / @gam0022
2. WebGL͸Ψν੎Ͱ͕͢ɺEmscripten͸ૉਓͰ͢
   ΄ͦͩ
   ɹɹ͠ΐ͏
   ࡉాɹᠳ
   ,-BCגࣜձࣾ
   ΤϯδχΞ
   !HBN
   ʢ͕Ήʣ
   HBNOFU
   
3. ϨΠτϨʔγϯάͱ͸
   &NTDSJQUFOͰ$ ͷϨΠτϨʔαΛಈ͔͢
   0QFO(- (-'8Ͱը໘ग़ྗ
   (16ʹΑΔϨΠτϨʔγϯάͷ঺հ Outline
4. ϨΠτϨʔγϯάͱ͸
   &NTDSJQUFOͰ$ ͷϨΠτϨʔαΛಈ͔͢
   0QFO(- (-'8Ͱը໘ग़ྗ
   (16ʹΑΔϨΠτϨʔγϯάͷ঺հ Outline
5. ͦ΋ͦ΋
   ϨΠτϨʔγϯά
   ͬͯԿʁ
6.  ϥελϥΠζ๏
    ϨΠτϨʔγϯά๏ʢϨΠτϨʣ 3DCGͷඳըํ๏ ϨΠτϨ
   
   %$(ඳըͷख๏
7. w ܗঢ়ΛϙϦΰϯʢࡾ֯ܗʣͷू߹Ͱදݱ
   w %ͷ௖఺Λ%ʹ౤Өͯ͠ඳը ϥελϥΠζ๏
8. w Χϝϥʹಧ͘ޫઢʢϨΠʣΛ
 શϐΫηϧ਺෼γϛϡϨʔγϣϯ
    ྫ
   ղ૾౓Y
   ‎
   ສճͷγϛϡϨʔγϣϯ
   w ܭࢉίετ͕ॏ͍ ϨΠτϨʔγϯά๏ ʲը૾ग़యʳhttps://www.vcl.jp/~kanazawa/raytracing/?page_id=1154
9. ͦΕͧΕͷඳըํ๏ͷಛ௃ http://gam0022.net/webgl/#pathtracing_sandbox https://threejs.org/examples/#webgl_loader_mmd w ϥελϥΠζ๏
    ߴ଎ʹඳըͰ͖Δ
    ϦΞϧλΠϜϨϯμϦϯά޲͖
    ήʔϜͳͲʹར༻ w ϨΠτϨʔγϯά๏
    ޫͷ൓ࣹ΍۶ંͳͲͷ
 ޫֶతͳݱ৅Λѻ͏ͷ͕ಘҙ
    ࣌ؒΛ͔͚ͯߴ඼࣭ʹඳը͢Δ
 ΦϑϥΠϯϨϯμϦϯά޲͖
    өըͳͲʹར༻
10. ϨΠτϨʔγϯάͱ͸
    &NTDSJQUFOͰ$ ͷϨΠτϨʔαΛಈ͔͢
    0QFO(- (-'8Ͱը໘ग़ྗ
    (16ʹΑΔϨΠτϨʔγϯάͷ঺հ Outline
11. w $$ ͷίʔυΛBTNKTʹม׵͢Δ͜ͱͰ
 ϒϥ΢β্Ͱͷ࣮ߦΛՄೳʹ͢ΔίϯύΠϥ
    w &NTDSJQUFO͔Βੜ੒͞ΕͨBTNKT͸
 खॻ͖ͷ+BWB4DSJQUΑΓ΋ߴύϑΥʔϚϯε Emscriptenͱ͸ C/C++ LLVM asm.js Clang
12. wϨΠτϨʔγϯά͸ܭࢉίετ͕ߴ͍ͷͰɺ
 ͳΔ΂͘ߴ଎Խ͍ͨ͠
    wϨΠτϨʔγϯάΛ$ Ͱ࣮૷͠ɺ
 &NTDSJQUFOͰBTNKTʹม׵͢Δ͜ͱͰɺ
 ΑΓߴ଎ʹϒϥ΢β্Ͱ࣮ߦͰ͖ͦ͏ʂ ϨΠτϨʔγϯάΛEmscripten͢ΔϞνϕʔγϣϯ
13. w ϨΠτϨʔα
    
    ϨΠτϨʔγϯάͷϓϩάϥϜ
    w ࣗ࡞ϨΠτϨʔαʮUTVLJIJʯ
     IUUQTHJUIVCDPNHBNUTVLJIJ
     7JTVBM4UVEJP WJTVBM
    $ Ͱ։ൃɺ8JOEPXTͷΈಈ࡞
     ݁ՌΛ1/(ը૾ͱͯ͠ग़ྗ͢Δ$6*ΞϓϦ Ҡ২ͨ͠ϨΠτϨʔα
14.  $MBOHͰϏϧυͰ͖ΔΑ͏ʹमਖ਼
     &NTDSJQUFOͰϏϧυͰ͖ΔΑ͏ʹमਖ਼ EmscriptenͰC++ͷίʔυΛҠ২͢Δखॱ εςοϓ
15. w 7JTVBM4UEVJPͰ։ൃͨ͠ͷͰɺ$MBOHͰϏϧυͰ͖ͳ͍
    w --7.ͷόΠτίʔυΛಘΔͨΊʹɺ
 $MBOHͰϏϧυͰ͖ΔΑ͏ʹमਖ਼͢Δඞཁ͕͋Δ
     GPQFO@T
    ͷΑ͏ͳ7$ ͷಠࣗͷؔ਺Λॻ͖׵͑ͨ
     ฒྻॲཧͷͨΊͷ0QFO.1ΛແޮԽ
     1/(ग़ྗͷͨΊͷ
    TUC@JNBHF
    ͸໰୊ͳ͠
    w ͜ΕͰ$MBOHͰϏϧυͰ͖ΔΑ͏ʹमਖ਼Ͱ͖ͨʂ ·ͣ͸ClangͰϏϧυ͢Δ
16. w FNDDίϚϯυ
     $ ͔ΒBTNKTͷม׵Λߦ͏͜ͱͰɺϒϥ΢β্Ͱಈ࡞͢Δ )5.-΍OPEFKTΛग़ྗ͢ΔίϯύΠϥ
    w $MBOHͰϏϧυͰ͖Δঢ়ଶʹ͢Δ͜ͱͰɺ
 FNDDʹΑΔϏϧυ͕Ͱ͖ͨ
     DMBOH ΛFNDDʹ͚ͨͩ͠
     ֎෦"1*΋04ػೳ΋ະ࢖༻ͩͬͨͷͰɺ
 ͋ͬ͞ΓͱҠ২Ͱ͖ͨ emccͰϏϧυ͢Δ
17. w ࣗ࡞ϨΠτϨʔα͸$6*ΞϓϦέʔγϣϯͳͷͰɺ
 ݁ՌΛϒϥ΢βͰ֬ೝͰ͖ͳ͍
    ஍ຯ͗͢Δʜ
    w ͦ͏ͩʂ
    8FC(-Ͱը໘ग़ྗ͠Α͏ʂ ݁Ռͷ֬ೝ
18. ϨΠτϨʔγϯάͱ͸
    &NTDSJQUFOͰ$ ͷϨΠτϨʔαΛಈ͔͢
    0QFO(- (-'8Ͱը໘ग़ྗ
    (16ʹΑΔϨΠτϨʔγϯάͷ঺հ Outline
19. w ϒϥ΢β্͔Βɺ0QFO(-ʢάϥϑΟοΫ"1*ʣΛ
 ୟ͚Δඪ४࢓༷
     8FC(-͸0QFO(-
    &4
    ͱ͍͏ϞόΠϧ޲͚ͷ"1*૬౰
     σεΫτοϓ޲͚ͷ0QFO(-ΑΓػೳ͸࡟ΒΕ͍ͯΔ
     ϋʔυ΢ΣΞͰΞΫηϥϨʔτ͞ΕΔͷͰߴύϑΥʔϚϯε
    w &NTDSJQUFO͸ɺ0QFO(-ͷίʔυ͔Β8FC(-΁ͷ ม׵΋ඪ४Ͱαϙʔτ͍ͯ͠Δ WebGLͱ͸
20. w 0QFO(-ΛFNDDͰϏϧυ͢ΔͨΊʹɺ
 ఆ਺Λએݴͨ͠ΓϔομΛՃ͑Δඞཁ͕͋ͬͨ
    w ެࣜαΠτʹ৘ใ͕ͳ͘ɺݸਓαΠτ͔Β৘ใΛಘͨ
     IUUQEIBUFOBOFKQTJNQH OpenGLΛEmscriptenͰϏϧυ͢Δ #ifdef EMSCRIPTEN #include <emscripten/emscripten.h> #define GL_GLEXT_PROTOTYPES #define EGL_EGLEXT_PROTOTYPES #endif ඞཁͳఆ਺ͷએݴͱϔομͷΠϯΫϧʔυ
21. w (-'8͸ɺ0QFO(-ͷར༻Λαϙʔτ͢ΔπʔϧΩοτ
     ϚϧνϓϥοτϑΥʔϜ 8JOEPXT
    
    .BD
    
    -JOVY
     ΢Οϯυ΢ͷ࡞੒΍ΩʔϘʔυͷೖྗʹ(-'8Λར༻͢Δͱ
 ಉ͡ίʔυͰ༷ʑͳ؀ڥʹରԠͰ͖Δ
    w &NTDSJQUFO͸࠷৽ͷ(-'8΋αϙʔτ
    w FNDDͷΦϓγϣϯʹ
    T
    64&@(-'8
    Λ͚ͭΔͱ (-'8Λར༻ͨ͠$ ͷίʔυΛϏϧυͰ͖Δ GLFW3ΛEmscriptenͰϏϧυ͢Δ
22. w 0QFO(-ʹ͸ɺ#.1Λը໘ग़ྗ͢Δ
 HM%SBX1JYFMTͱ͍͏"1*͕͋Δ
     8FC(-Ͱ͸ଘࡏ͠ͳ͍"1*͕ͩͬͨɺ΋͔ͯ͠͠ม׵͞ΕΔ͔΋ʁ
    
    
    
    
    ˠ΍͸Γ࢖͑ͳ͔ͬͨ
    ʢ·͋౰વͰ͕͆͢ʣ
    w ୅ସ࣮૷
     ը໘શମΛ෴͏൘ϙϦΛ഑ஔͯ͠ςΫενϟΛઃఆ
     HM5FY4VC*NBHF%Λ࢖ͬͯɺςΫενϟը૾Λ
 ϨΠτϨͷ݁Ռը૾ʹಈతʹΞοϓσʔτ
    w ͜ΕͳΒ͏·͘ಈ͍ͨ glDrawPixelsͷ୅ସ࣮૷
23. w IUUQHBNOFUXFCHMFNTDSJQUFO@UTVLJIJ ׬੒ͨ͠΋ͷ
24. w .BD#PPL
    "JS
    Πϯν
    .JEϞσϧͰ࣮ߦ
    w ωΠςΟϒͱൺֱͯ͠ഒ͘Β͍஗͘ͳͬͨ ύϑΥʔϚϯεൺֱ ࣮ߦ࣌ؒʢsecʣ ࣮ߦ࣌ؒʢൺ཰ʣ ωΠςΟϒ 4.54495 1 Emscripten 30.752 6.766
25. w 04΍֎෦ͷ"1*ͷґଘ͕গͳ͍ϓϩάϥϜͳΒ
 &NTDSJQUFOͰͷϙʔτ͸؆୯ͩͱײͨ͡
    w 0QFO(-(-'8ͷඪ४αϙʔτ΋خ͍͠
    w 0QFO(-Λαϙʔτ͍ͯ͠Δ͕ɺ
 8FC(-ʹଘࡏ͠ͳ͍"1*͸
 ࣗྗͰ୅ସ࣮૷͢Δඞཁ͕͋Δ EmscriptenͰϨΠτϨͷ·ͱΊ
26. ϨΠτϨʔγϯάͱ͸
    &NTDSJQUFOͰ$ ͷϨΠτϨʔαΛಈ͔͢
    0QFO(- (-'8Ͱը໘ग़ྗ
    (16ʹΑΔϨΠτϨʔγϯάͷ঺հ Outline
27. w 8FC(-ͷϑϥάϝϯτγΣʔμΛར༻͢Ε͹
 (16Λ༻͍ͨϨΠτϨʔγϯά͕Մೳ
    w GQTͷϦΞϧλΠϜͷύϑΥʔϚϯε͕ग़ͤΔ
    w ͔͠΋ϒϥ΢β্Ͱʂʂ GPUʹΑΔϨΠτϨʔγϯά
28. ϨΠτϨʔγϯάͷ8FC(-ϑϥάϝϯτγΣʔμ࣮૷
    IUUQHBNOFUXFCHM ϒϥ΢β্ͷGPUͰͷϨΠτϨʔγϯά
29. ϨΠτϨʔγϯάͷ8FC(-ϑϥάϝϯτγΣʔμ࣮૷
    IUUQHBNOFUXFCHM ϒϥ΢β্ͷGPUͰͷϨΠτϨʔγϯά
30. w ৄ͘͠஌Γ͍ͨਓ΁
     γΣʔμ͚ͩͰੈքΛ૑ΔʂUISFFKTʹΑΔϨΠϚʔνϯά
 4IJEF4IBSF
     +BWB4DSJQUPPO
    ిࢠॻ੶
     IUUQTXHMEPSHEHMTM
    EPYBTࢯͷαΠτ GPUʹΑΔϨΠτϨʔγϯά
31. w ύϑΥʔϚϯε໘Ͱ͸(16͸ѹউ
    w ͱ͸͍͑(16΋ສೳͰ͸ͳ͍ʜ
     (16ͩͱෳࡶͳΞϧΰϦζϜͷ࣮૷͕େม
     ࣮༻తͳϨϯμϥʔΛ࡞Ζ͏ͱࢥ͏ͱɺ
 $16ͱ(16ͷσʔλͷ΍ΓͱΓͷ࣮૷͕େม
    w ৭ʑͳํ๏Λ໛ࡧ͢Δ͏ͪʹɺ&NTDSJQUFO΋ࢼͨ͠ ͳͥCPU΁ճؼ͔ͨ͠ʁ
32. 0QFO(- (-'8ͷίʔυΛ &NTDSJQUFOͰҠ২͢Δํ๏
    ͷࢀߟʹͳͬͨʂ ϨΠτϨʔγϯάͬͯ
 ͜͏͍͏΋ͷͩͬͨΜͩʜʂ ʜͱײ͍͚ͯͨͩ͡Ε͹خ͍͠Ͱ͢
33. 5IBOLT
34. ެࣜαΠτͷ௨ΓʹΠϯετʔϧͰ͖ͨ
    IUUQLSJQLFOHJUIVCJPFNTDSJQUFOTJUFEPDT HFUUJOH@TUBSUFEEPXOMPBETIUNM
     l1PSUBCMF
    &NTDSJQUFO
    4%,
    GPS
    -JOVY
    BOE
    04
    9zΛ
 μ΢ϯϩʔυʴղౚ
     ίϚϯυΛ࣮ͭߦ
     FNTEL
    VQEBUF
     FNTEL
    JOTUBMM
    MBUFTU
     FNTEL
    BDUJWBUF
    MBUFTU EmscriptenͷΠϯετʔϧ(Macฤ)
35. w 1ZUIPOܥͩͱ
    FNTEL
    VQEBUF
    ʹࣦഊͨ͠
    ɹˠ
    1ZUIPOܥʹ੾Γସ͑ͯରॲ
    w ࠷৽ͷެࣜαΠτͷํ๏ͰτϥΠ͠Α͏ʂ
     ͜ͷεϥΠυͷํ๏΋ݹ͘ͳΔՄೳੑ͕͋Δ
     .BDҎ֎ͷ؀ڥͰ΋ެࣜαΠτ௨Γʹ͍͚Δ͸ͣ EmscriptenͷΠϯετʔϧ(Macฤ)