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 #define GL_GLEXT_PROTOTYPES #define 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ฤ)