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

452023224091040c47c3bcaa40935c53?s=47 がむ
December 21, 2016

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

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

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

452023224091040c47c3bcaa40935c53?s=128

がむ

December 21, 2016
Tweet

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ͷΦϓγϣϯʹT64&@(-'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&NTDSJQUFO4%,GPS-JOVYBOE049zΛ
 μ΢ϯϩʔυʴղౚ  ίϚϯυΛ࣮ͭߦ  FNTELVQEBUF

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