WASM with WebGL in Emscripten night 2018 December

Emscripten night 2018で用いた資料になります。
WebGLをWASMと一緒に利用して並列計算可能な部分をWebGLで。できない部分をWASMでやる例としてエッジのセグメンテーションを行なっています。

Transcript

1. WEBGL WITH WASM EMSCRIPTEN NIGHT 2018 DECEMBER
2. WHO AM I? @KYASBAL-1994 (ੴҪ ᠳ) ▸ ౦޻େ M1 ▸ ະ౿2016εʔύʔΫϦΤʔλ ▸ Web։ൃͷͨΊͷWebGLϑϨʔϜϫʔΫ”Grimoire.js”࡞ऀ ▸ ະ౿Ξυόϯετ2018Πϊϕʔλ ▸ ීஈ͸WebGLͱ͔WebXRपΓͷ͜ͱΛ΍͍ͬͯΔਓ
3. ಋೖ WASMͰεϨου͕࢖͑ΔΑ͏ʹͳΔ! ▸ ͜ΕͰϚϧνίΞΛϑϧ׆༻ͨ͠WASM͹͔ͬΓͷWebα ΠτΛ࡞ΕΔͧ! ▸ ΋ͬͱ׆͔ͤΔίΞ͸ͨ͘͞Μ͋Δ!
4. ಋೖ WEBGL ▸ WebGLͬͯ୯ޠΛ஌͍ͬͯΔΑͬͯํ? ▸ WebGL࢖ͬͨ͜ͱ͋ΔΑͬͯํ?
5. ಋೖ WEBGLͱ͸? ͪΐͬͱඍົ
6. ಋೖ WEBGL͸WEBͰ3DCGΛߦ͏ҝ͚ͩͷ΋ͷ͡Όͳ͍ ▸ GPUΛ༻͍ͯओʹ3DCGͳͲͷඳըΛߴ଎ʹߦ͏API CPU ? GPU ?
7. ಋೖ WEBGL͸WEBͰ3DCGΛߦ͏ҝ͚ͩͷ΋ͷ͡Όͳ͍ CPU ? GPU ?
8. ಋೖ WEBGLͷಘҙͳॲཧͷྫ ▸ άϥσʔγϣϯΛ͔͚Δ ▸ ೖྗ:
 ֤఺ͷҰ൪͍ۙ3ͭͷ௖఺͔Β ͷڑ཭
 3ͭͷ௖఺ͷ৭ ▸ ग़ྗ: ৭ ▸ ͋Δ఺ͷ৭ΛܾΊΔࡍʹผͷ఺ ͷ৭͕ؔ܎ͳ͍
9. WASMͱڞʹWEBGL΋׆༻ͯ͠΋ͬͱߴ଎Խ͠Α͏
10. WEBGL+WASMͷ࣮ྫ WEBGLͱWASMΛ༻͍ͨઢ෼ೝࣝ
11. WASMͷޮՌ GPUΛ༻͍ͨࣄલॲཧ WASMͰͷॲཧ࣌ؒ JSͰͷॲཧ࣌ؒ GPUͰՄೳͳॲཧ: ৭ͷޯ഑ΛٻΊΔॲཧ
 (Sobel ϑΟϧλϦϯά)
 ً౓Λ2஋ʹ෼ղ͢Δॲཧ CPUͰ͔͠Ͱ͖ͳ͍ॲཧ: ઢ෼ݕग़(RANSAC) WEBGL+WASMͷ࣮ྫ
12. σϞ WASMͱWEBGLΛ࿈ܞͤͯ͞ΈΑ͏ ▸ ྲྀੴʹϚʔΧʔೝࣝ͸೉͍͠ͷͰΤοδͷηάϝϯςʔγϣ ϯΛ͠·͢ σϞίʔυ: https://github.com/kyasbal-1994/emscripten-night
13. σϞ WASMͱWEBGLΛ࿈ܞͤͯ͞ΈΑ͏ ▸ WebGL͚ͩͰ͸೉͍͠ɻ
 (ྡಉ࢜ͷϐΫηϧͷ஋ʹΑͬͯॲཧ͕มΘͬͯ͠·͏) σϞίʔυ: https://github.com/kyasbal-1994/emscripten-night
14. σϞ WASMͱWEBGLΛ࿈ܞͤͯ͞ΈΑ͏ ▸ WASM͚ͩͰ΋Ͱ͖Δ͕ɺޯ഑ͷܭࢉ͸GPUͰ΍Δͱૣ͍ σϞίʔυ: https://github.com/kyasbal-1994/emscripten-night
15. WASMͱWEBGLͰϝϞϦΛڞ༗͢Δ ▸ WASMଆʹallocͱdeallocΛ࣮૷͢Δ
16. WASMͰALLOCͨ͠ϝϞϦΛJSଆͰදࣔ͢Δ ▸ jsଆ͔ΒallocΛݺͼग़ͯ͠ɺϙΠϯλΛऔಘ͢Δ ▸ ͜ͷϙΠϯλΛ༻͍ͯγΣΞ͞ΕͨUint8ArrayΛ࡞ΕΔ ը૾ͱͯ͠࢖͏ࡍͷྫ
17. ςΩετ ิ଍) UINT8ARRAY ίϯετϥΫλ ▸ 4ͭ໨ͷୈҰҾ਺ʹ௚઀memoryΛ౉͢ ▸ byteOffsetʹwasmଆͰऔಘͨ͠pointerΛ౉͢ ▸ lengthʹϝϞϦશମͷ௕͞Λ౉͢ ▸ ͜Ε͸ͨͩͷϏϡʔͳͷͰίϐʔͷίετͳͲ͸ੜ͡ͳ͍
18. WEBGLͰSOBELϑΟϧλΛඳը͢Δ ▸ WASMؔ܎ͷ࿩ͷ৔ͳͷͰলུ͢Δ͕ൺֱత؆୯ͳνϡʔ τϦΞϧΛݟΕ͹Τοδͷநग़͕Ͱ͖Δ
 ࢀߟ) https://wgld.org/d/webgl/w055.html த৺ͷըૉΛܾΊΔࡍʹࠨӈ্ԼࣼΊͷ৭Λݟͯ
 ܎਺Λ͔͚ͯ଍͠߹ΘͤΔ
19. WEBGLͰඳ͍ͨ಺༰ΛWASMʹ౉͢ ▸ Framebufferͱ͍͏΋ͷʹඳը͢Δ͜ͱʹΑͬͯɺ Uint8Arrayʹॻ͖ग़͢͜ͱ͕Ͱ͖Δ
20. WASMͰ෯༏ઌ୳ࡧΛߦͳͬͯϝϞϦʹ௚઀৭Λ৐ͤΔ
21. ·ͱΊ ·ͱΊ ▸ ಉ͡ॲཧΛೖྗ͕एׯҧ͏΋ͷಉ࢜ʹద༻͢Δࡍʹ͸ WebGLΛ࢖͏ͱૣ͍ ▸ WASMଆͰallocͨ͠ϙΠϯλΛjsʹ౉͢ ▸ jsଆͰUint8ArrayͳͲʹ౉ͯ͠੾Γग़͢ ▸ WebGLଆͰFBOʹඳըͯ͠readPixelsΛ༻͍Ε͹WASMଆ ʹ௚઀GPUͰඳըͨ͠ςΫενϟΛ౉͢͜ͱ͕Ͱ͖Δ