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ฤ)