Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WASM with WebGL in Emscripten night 2018 December

Cf07be5f3726396ddd3eb66b659a023e?s=47 kyasbal
December 14, 2018

WASM with WebGL in Emscripten night 2018 December

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

Cf07be5f3726396ddd3eb66b659a023e?s=128

kyasbal

December 14, 2018
Tweet

More Decks by kyasbal

Other Decks in Technology

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Ͱඳըͨ͠ςΫενϟΛ౉͢͜ͱ͕Ͱ͖Δ