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

by がむ

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

w Χϝϥʹಧ͘ޫઢʢϨΠʣΛ  શϐΫηϧ਺෼γϛϡϨʔγϣϯ ྫ ղ૾౓Y‎ສճͷγϛϡϨʔγϣϯ w ܭࢉίετ͕ॏ͍ ϨΠτϨʔγϯά๏ ʲը૾ग़యʳhttps://www.vcl.jp/~kanazawa/raytracing/?page_id=1154

Slide 9

Slide 9 text

ͦΕͧΕͷඳըํ๏ͷಛ௃ http://gam0022.net/webgl/#pathtracing_sandbox https://threejs.org/examples/#webgl_loader_mmd w ϥελϥΠζ๏ ߴ଎ʹඳըͰ͖Δ ϦΞϧλΠϜϨϯμϦϯά޲͖ ήʔϜͳͲʹར༻ w ϨΠτϨʔγϯά๏ ޫͷ൓ࣹ΍۶ંͳͲͷ  ޫֶతͳݱ৅Λѻ͏ͷ͕ಘҙ ࣌ؒΛ͔͚ͯߴ඼࣭ʹඳը͢Δ  ΦϑϥΠϯϨϯμϦϯά޲͖ өըͳͲʹར༻

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

w $$ͷίʔυΛBTNKTʹม׵͢Δ͜ͱͰ  ϒϥ΢β্Ͱͷ࣮ߦΛՄೳʹ͢ΔίϯύΠϥ w &NTDSJQUFO͔Βੜ੒͞ΕͨBTNKT͸  खॻ͖ͷ+BWB4DSJQUΑΓ΋ߴύϑΥʔϚϯε Emscriptenͱ͸ C/C++ LLVM asm.js Clang

Slide 12

Slide 12 text

wϨΠτϨʔγϯά͸ܭࢉίετ͕ߴ͍ͷͰɺ  ͳΔ΂͘ߴ଎Խ͍ͨ͠ wϨΠτϨʔγϯάΛ$Ͱ࣮૷͠ɺ  &NTDSJQUFOͰBTNKTʹม׵͢Δ͜ͱͰɺ  ΑΓߴ଎ʹϒϥ΢β্Ͱ࣮ߦͰ͖ͦ͏ʂ ϨΠτϨʔγϯάΛEmscripten͢ΔϞνϕʔγϣϯ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

w 7JTVBM4UEVJPͰ։ൃͨ͠ͷͰɺ$MBOHͰϏϧυͰ͖ͳ͍ w --7.ͷόΠτίʔυΛಘΔͨΊʹɺ  $MBOHͰϏϧυͰ͖ΔΑ͏ʹमਖ਼͢Δඞཁ͕͋Δ GPQFO@TͷΑ͏ͳ7$ͷಠࣗͷؔ਺Λॻ͖׵͑ͨ ฒྻॲཧͷͨΊͷ0QFO.1ΛແޮԽ 1/(ग़ྗͷͨΊͷTUC@JNBHF͸໰୊ͳ͠ w ͜ΕͰ$MBOHͰϏϧυͰ͖ΔΑ͏ʹमਖ਼Ͱ͖ͨʂ ·ͣ͸ClangͰϏϧυ͢Δ

Slide 16

Slide 16 text

w FNDDίϚϯυ $͔ΒBTNKTͷม׵Λߦ͏͜ͱͰɺϒϥ΢β্Ͱಈ࡞͢Δ )5.-΍OPEFKTΛग़ྗ͢ΔίϯύΠϥ w $MBOHͰϏϧυͰ͖Δঢ়ଶʹ͢Δ͜ͱͰɺ  FNDDʹΑΔϏϧυ͕Ͱ͖ͨ DMBOHΛFNDDʹ͚ͨͩ͠ ֎෦"1*΋04ػೳ΋ະ࢖༻ͩͬͨͷͰɺ  ͋ͬ͞ΓͱҠ২Ͱ͖ͨ emccͰϏϧυ͢Δ

Slide 17

Slide 17 text

w ࣗ࡞ϨΠτϨʔα͸$6*ΞϓϦέʔγϣϯͳͷͰɺ  ݁ՌΛϒϥ΢βͰ֬ೝͰ͖ͳ͍஍ຯ͗͢Δʜ w ͦ͏ͩʂ8FC(-Ͱը໘ग़ྗ͠Α͏ʂ ݁Ռͷ֬ೝ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

w (-'8͸ɺ0QFO(-ͷར༻Λαϙʔτ͢ΔπʔϧΩοτ ϚϧνϓϥοτϑΥʔϜ 8JOEPXT.BD-JOVY ΢Οϯυ΢ͷ࡞੒΍ΩʔϘʔυͷೖྗʹ(-'8Λར༻͢Δͱ  ಉ͡ίʔυͰ༷ʑͳ؀ڥʹରԠͰ͖Δ w &NTDSJQUFO͸࠷৽ͷ(-'8΋αϙʔτ w FNDDͷΦϓγϣϯʹT64&@(-'8Λ͚ͭΔͱ (-'8Λར༻ͨ͠$ͷίʔυΛϏϧυͰ͖Δ GLFW3ΛEmscriptenͰϏϧυ͢Δ

Slide 22

Slide 22 text

w 0QFO(-ʹ͸ɺ#.1Λը໘ग़ྗ͢Δ  HM%SBX1JYFMTͱ͍͏"1*͕͋Δ 8FC(-Ͱ͸ଘࡏ͠ͳ͍"1*͕ͩͬͨɺ΋͔ͯ͠͠ม׵͞ΕΔ͔΋ʁ ˠ΍͸Γ࢖͑ͳ͔ͬͨ ʢ·͋౰વͰ͕͆͢ʣ w ୅ସ࣮૷ ը໘શମΛ෴͏൘ϙϦΛ഑ஔͯ͠ςΫενϟΛઃఆ HM5FY4VC*NBHF%Λ࢖ͬͯɺςΫενϟը૾Λ  ϨΠτϨͷ݁Ռը૾ʹಈతʹΞοϓσʔτ w ͜ΕͳΒ͏·͘ಈ͍ͨ glDrawPixelsͷ୅ସ࣮૷

Slide 23

Slide 23 text

w IUUQHBNOFUXFCHMFNTDSJQUFO@UTVLJIJ ׬੒ͨ͠΋ͷ

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

w 04΍֎෦ͷ"1*ͷґଘ͕গͳ͍ϓϩάϥϜͳΒ  &NTDSJQUFOͰͷϙʔτ͸؆୯ͩͱײͨ͡ w 0QFO(-(-'8ͷඪ४αϙʔτ΋خ͍͠ w 0QFO(-Λαϙʔτ͍ͯ͠Δ͕ɺ  8FC(-ʹଘࡏ͠ͳ͍"1*͸  ࣗྗͰ୅ସ࣮૷͢Δඞཁ͕͋Δ EmscriptenͰϨΠτϨͷ·ͱΊ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

w 8FC(-ͷϑϥάϝϯτγΣʔμΛར༻͢Ε͹  (16Λ༻͍ͨϨΠτϨʔγϯά͕Մೳ w GQTͷϦΞϧλΠϜͷύϑΥʔϚϯε͕ग़ͤΔ w ͔͠΋ϒϥ΢β্Ͱʂʂ GPUʹΑΔϨΠτϨʔγϯά

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

w ৄ͘͠஌Γ͍ͨਓ΁ γΣʔμ͚ͩͰੈքΛ૑ΔʂUISFFKTʹΑΔϨΠϚʔνϯά  4IJEF4IBSF +BWB4DSJQUPPO ిࢠॻ੶ IUUQTXHMEPSHEHMTM EPYBTࢯͷαΠτ GPUʹΑΔϨΠτϨʔγϯά

Slide 31

Slide 31 text

w ύϑΥʔϚϯε໘Ͱ͸(16͸ѹউ w ͱ͸͍͑(16΋ສೳͰ͸ͳ͍ʜ (16ͩͱෳࡶͳΞϧΰϦζϜͷ࣮૷͕େม ࣮༻తͳϨϯμϥʔΛ࡞Ζ͏ͱࢥ͏ͱɺ  $16ͱ(16ͷσʔλͷ΍ΓͱΓͷ࣮૷͕େม w ৭ʑͳํ๏Λ໛ࡧ͢Δ͏ͪʹɺ&NTDSJQUFO΋ࢼͨ͠ ͳͥCPU΁ճؼ͔ͨ͠ʁ

Slide 32

Slide 32 text

0QFO(-(-'8ͷίʔυΛ &NTDSJQUFOͰҠ২͢Δํ๏ ͷࢀߟʹͳͬͨʂ ϨΠτϨʔγϯάͬͯ  ͜͏͍͏΋ͷͩͬͨΜͩʜʂ ʜͱײ͍͚ͯͨͩ͡Ε͹خ͍͠Ͱ͢

Slide 33

Slide 33 text

5IBOLT

Slide 34

Slide 34 text

ެࣜαΠτͷ௨ΓʹΠϯετʔϧͰ͖ͨ IUUQLSJQLFOHJUIVCJPFNTDSJQUFOTJUFEPDT HFUUJOH@TUBSUFEEPXOMPBETIUNM l1PSUBCMF&NTDSJQUFO4%,GPS-JOVYBOE049zΛ  μ΢ϯϩʔυʴղౚ ίϚϯυΛ࣮ͭߦ FNTELVQEBUF FNTELJOTUBMMMBUFTU FNTELBDUJWBUFMBUFTU EmscriptenͷΠϯετʔϧ(Macฤ)

Slide 35

Slide 35 text

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