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

CG in Web 最前線 - 今そこで何が起きているのか -

Cf07be5f3726396ddd3eb66b659a023e?s=47 kyasbal
April 25, 2019

CG in Web 最前線 - 今そこで何が起きているのか -

WeJS@31stのショートセッションです

Cf07be5f3726396ddd3eb66b659a023e?s=128

kyasbal

April 25, 2019
Tweet

More Decks by kyasbal

Other Decks in Programming

Transcript

  1. CG in Web ࠷લઢ ࠓɺͦ͜ͰԿ͕ى͖͍ͯΔͷ͔ @kyasbal_1994

  2. @kyasbal_1994 東京工業大学 情報理工学院 修士2年 未踏ジュニアPM(2018年〜) 未踏2016 スーパークリエータ 未踏アドバンスト 2018イノベータ ओͳٕज़෼໺

    3FBMUJNF$( 8FC جຊ͸8FC(-·ΘΓ͕޷͖ ➤ εϥΠυ͸Twitter্Ͱ์ྲྀͯ͋͠Γ·͢ɻ
  3. ࠓ೔ͷ໨త ➤ WebGL΍Web XR Device APIͳͲWebͷதΛऔΓר͘CGٕज़ ͷࠓͷ͓࿩૯·ͱΊ ➤ ͦ΋ͦ΋WebGLͬͯͳΜ͚ͩͬ ➤

    ؔ࿈ͷٕज़ɺχϡʔεͳͲͬͨࣽ͝
 (຺བྷͳΜͯ΋ͷ͸ͳ͍) ➤ εϥΠυ͸Twitter্Ͱ์ྲྀͯ͋͠Γ·͢ɻ
  4. WEBGLͱ͸? ௒ߴ଎Ͱ֓ཁΛֶͿ

  5. WEBGLͱ͸? GPU accelerated ͳCG͕Ͱ͖Δ͜ͱ͕
 Ұ൪େࣄͩͱࢥ͏ͷʹ…

  6. CPUɺGPUͷԋࢉೳྗ [A Massively Parallel Processor: the GPU] http://homepages.math.uic.edu/~jan/mcs572/mcs572notes/lec27.html ΑΓҾ༻

  7. GPUͱ͸? [[5෼Ͱཧղ]GPUͱ͸ʁCPUͱҧ͍΍ੑೳͱ׆༻] https://www.kagoya.jp/howto/rentalserver/gpu1/ ΑΓҾ༻ Πϝʔδ ɾ֤ॲཧ͕ޓ͍ʹґଘ͠ͳ͍ ɾσʔλ͸ҟͳΓ͏Δ͕
 ॲཧͷ಺༰͸౳͍͠

  8. GPU͸͜͏΍ͬͯ3DCGʹ׆͔͞ΕΔ ʮWebGL2ೖ໳ جૅฤʯhttps://sbfl.net/blog/2016/09/04/webgl2-tutorial-basics/ ΑΓҾ༻ ɾ֤ॲཧ͕ޓ͍ʹґଘ͠ͳ͍ ɾσʔλ͸ҟͳΓ͏Δ͕
 ॲཧͷ಺༰͸౳͍͠ ͜Μͳॲཧ͕3DCGͰ͸ଟ͍ GPU͕ߦ͏ͷ͸”఺”ʹؔ͢Δૢ࡞(Shader)ͷΈ ֤௖఺ͷҐஔΛܾΊΔ(Vertex

    shader) ֤ϐΫηϧͷ৭ΛܾΊΔ(Fragment shader) 8
  9. WEBάϥϑΟΫεͷࠓ ؔ࿈ٕज़ͬͨࣽ͝

  10. WEBGLͷར༻ྫ Web͚ͩͰಈ͘ήʔϜΤϯδϯ
 Playcanvas Web͚ͩͰಈ͘CAD
 AutoCAD on Web

  11. TinyUnityͰ؆୯ʹܰྔWebGLΞϓϦέʔγϣϯΛ։ൃ ➤ WebGL༻ͷUnityϥϯλΠϜ ͕ϦϦʔε͞Εͨ ➤ ϥϯλΠϜ͕72KBͱ͔ͳΓ খ͍͞ ➤ ݱঢ়͸2DήʔϜͷΈͷα ϙʔτ

  12. WEBGL2.0ͬͯͲ͏ͳͬͨͷ? ➤ WebGL2.0Ͱ࢖͑Δओͳػೳ ➤ MRT(Multi Rendering Target): 1౓ʹෳ਺ຕͷ݁ՌΛඳ͘ ➤ 3D

    Texture: ӢͷϨϯμϦϯά΍MRIը૾ͳͲʹ࢖͏ ➤ Transform Feedback: Vertex shaderͷԋࢉ݁ՌΛGPU͔ΒऔಘͰ͖Δ ➤ جຊతʹiOS͕WebGL2.0࢖͑ͳ͍ɻSafari͸ϑϥά෇͖Ͱར༻Մೳ͕ͩ… WebGL WebGL2.0 https://webglstats.com/ ΑΓ
  13. Offscreen CanvasͰύϫϑϧ͔ͭշదͳWebGL ➤ WebGLͷॲཧ͕ॏ͍ͱଞͷDOMͷॲཧͳͲ΋ॏ͘ͳͬͯ͠·͏ ➤ Offscreen CanvasΛ࢖͑͹WebGLͷॲཧΛWebWorkerͰ࢖͏͜ ͱ͕Ͱ͖Δ! ➤ ࢀߟҾ༻:

    ʮics.media “ΦϑεΫϦʔϯΩϟϯόεΛ࢖ͬͨ
 JavaScriptͷϚϧνεϨουඳը- εϜʔζͳϢʔβʔૢ࡞࣮ݱͷ੾Γࡳ”ʯ
 Offscreen CanvasΛ༻͍͍ͯͳ͍σϞ / ༻͍ͨσϞ [Offscreen canvas - MDN] https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
  14. ظ଴ͷWEBʹదͨ͠3DCGϑΥʔϚοτglTF ➤ KhronosʹΑͬͯඪ४Խ͕ਐΊΒΕ͍ͯΔϞσϧϑΥʔϚοτ [Khronos glTF Overview] https://www.khronos.org/gltf/ ΑΓҾ༻

  15. ظ଴ͷWEBʹదͨ͠3DCGϑΥʔϚοτglTF ➤ ͕͍͜͜͢͝glTF ➤ ϝλ৘ใ͸JSONɺόοϑΝ෦෼͸όΠφϦ
 ύʔε͕͠΍͘͢ɺσʔλྔͱͯ͠΋एׯখ͍͞ ➤ WebGLͷඪ४ԽஂମͰ͋ΔKhronosʹΑΔඪ४Խ ➤ ֦ு࢓༷ͷఏҊ͕͠΍͘͢ɺΦʔϓϯʹߦΘΕΔΑ͏ʹɻ

    ➤ PBR(෺ཧϕʔεγΣʔσΟϯά)ɺϘʔϯΞχϝʔγϣϯɺ
 ௖఺ϞʔϑɺΞχϝʔγϣϯͳͲ͕αϙʔτ͞Ε͍ͯΔ
  16. WebComponentͷྗͰѹ౗త؆୯glTFϞσϧදࣔ ➤ three.jsͷ࡞ऀͷMr.doob͕ެ։ͨ͠Web componentͷҰͭ
 `model-viewer`λάΛ࢖͑͹Θ͔ͣ͜Ε͚ͩͰ3DϞσϧදࣔ ͕Ͱ͖Δ ಈ͍͍ͯΔ΋ͷhttps://model-viewer.glitch.me/

  17. ෯޿͘࠾༻͞Ε͍ͯΔglTF ➤ Windows Paint3D ➤ Sketch fab Windows10 Ͱඪ४౥ࡌͷ
 3DϖΠϯτιϑτ

    େྔͷ3DϞσϧ͕ ϑϦʔૉࡐͱͯ͠ glTFͰμ΢ϯϩʔυՄೳʹ
  18. VRMʹΑͬͯՃ଎͢ΔglTFͷར༻ ➤ ਓܕʹಛԽͨ͠glTFͷ֦ு ➤ ڞ௨ͨ͠Ϟʔγϣϯ΍Ϧοϓγ ϯΫ͕࢖͑ΔΑ͏ʹͳ͍ͬͯΔ ➤ VtuberपΓͳͲͰͷར༻͕׆ൃ ʹͳΔ͔΋?

  19. WEBGPUͱ͍͏৽͍͠ظ଴ iOS/macOSͰͷOpenGL͕ඇਪ঑ʹͳΓۀք͕਒Ꭵ WebkitͷఏҊͰGPU for the Web Community Group͕ൃ଍ ࣍ੈ୅GPU in

    Webͳ࢓༷WebGPU͕ٞ࿦։࢝
  20. WEBGPUͱ͍͏৽͍͠ظ଴ ➤ WebGL͸OpenGL(΋͘͠͸ANGLEΛܦ༝ͯ͠DirectX)Λୟ͘ ͜ͱʹΑ࣮ͬͯݱ͞Ε͍ͯΔ ➤ WebGPU͸΋ͬͱ௿ϨϕϧAPIΛ಺෦తʹͭͳ͙ Webϒϥ΢β API ωΠςΟϒ API

    OS
  21. WEBGPUͱ͍͏৽͍͠ظ଴ ➤ ֤ϒϥ΢βϕϯμʔͱ ΋ʹIn development ➤ ࢓༷΋·ͩdraftͰຖ िٞ࿦͞Ε͍ͯΔ ➤ ֤ϕϯμʔͱ΋ʹۃΊ

    ͯ׆ൃʹಈ͍͍ͯΔ ༷ࢠ
  22. WEBGPUͱ͍͏৽͍͠ظ଴ ➤ Կ͕Ͱ͖ΔΑ͏ʹͳΔͷ? ➤ ΑΓߴ଎ͰɺϚϧνεϨουͳWeb্ͰͷCG
 (WASMͷεϨουͱ૬ੑ͕ྑͦ͞͏?) ➤ ৽͍͠γΣʔμݴޠ(SPIR-Vϕʔε? WebHLSL?) ➤

    CGͷΈͰͳ͘ػցֶशͳͲʹ΋GPUͷྗ͕Web্Ͱ࢖͍΍ ͘͢
  23. WEB্ͷGPUͰ޿͕ΔAI on ϒϥ΢β ➤ WebGL΍ͦͷଞٕज़ʹΑͬͯϒϥ΢β্Ͱൺֱతܭࢉίετ ͷߴ͍ػցֶशϞσϧ͕ಈ͘Α͏ʹͳ͖ͬͯͨ [Move Mirror] https://experiments.withgoogle.com/collection/ai/move-mirror/view/mirror [land

    lines] https://lines.chromeexperiments.com/
  24. GAME STREAMING ➤ ΫϦοΫͯ͠5ඵ΄ ͲͰήʔϜ͕ىಈ ➤ 25Mbpsఔ౓Ҏ্ਪ ঑ ➤ ϒϥ΢β্Ͱಈ࡞

    Project Stream by Google
 (ޙͷSTADIA) [Google Project Stream Trial: Assassin's Creed Odyssey on Chrome browser] https://www.youtube.com/watch?v=9kGcUNvnkcE
  25. GAME STREAMING ➤ γΣΞୈೋҐͷήʔϜΤϯδϯͷUnreal Engine͕Pixel StreamingΛαϙʔτ ➤ αʔόαΠυϨϯμϦϯάΛߦ͏ήʔϜΛࠓ·ͰͷήʔϜͷ։ ൃख๏ͰɺσϓϩΠઃఆΛม͑Δ͚ͩͰ࣮ݱՄೳʹɻ [Unreal

    Engine(Pixel Streaming ೖ໳)] http://api.unrealengine.com/JPN/Platforms/PixelStreaming/PixelStreamingIntro/index.html
  26. GAME STREAMING ➤ W3C͕Web্ͷήʔϜʹඞཁͳ࢓༷ࡦఆͷͨΊͷϫʔΫ γϣοϓΛ6݄ʹߦ͏ͦ͏ ➤ ͦͷதͷେ͖ͳٞ୊ͷҰͭʹऔΓ্͛ΒΕ͓ͯΓɺ͜ͷWS ޙʹͳΜΒ͔ͷήʔϜετϦʔϛϯάؔ࿈࢓༷͕ఏҊ͞Ε ΔՄೳੑ
 (ଞʹ΋WebGLɺWebXRपΓͷ࿩΋ٞ୊ʹͳΔ༧ఆ)

  27. GAME STREAMING ➤ 5GճઢͰ޿ଳҬɺߴ଎ͳωοτϫʔΫΛ࢖͑ΔΑ͏ͳ؀ڥʹ!
 (ϩʔυϚοϓతʹ͸ϐʔΫ࣌ʹ20GBps͕૝ఆ͞Ε͍ͯΔ) ➤ ωοτϫʔΫεϥΠγϯά
 ΞϓϦ୯ҐɺΤϯυϙΠϯτ୯ҐͰԾ૝ωοτϫʔΫΛ෼͚ Δٕज़ʹΑͬͯɺಛఆͷ഑৴͚ͩߴ଎Խ͢Δ͜ͱ͕ݱ࣮త ʹɻ޿ଳҬΛ࢖͏ήʔϜͰ΋ɺ഑৴ۀऀͱܞଳ௨৴ۀऀ͕࿈

    ܞ͢Ε͹ΑΓҰ૚ݱ࣮తʹͳΔɻ
  28. WEB XR DEVICE API ➤ WebVRʹऔͬͯ୅ΘΓɺWebARͳͲ΋ؚΊͨWeb XR device API͕W3C Immersive

    WGʹΑΓఏҊ͞Ε͍ͯΔ Khronos͸OpenXRΛ࡞͍ͬͯΔ͕
 WebXRͱOpenXRͷؔ܎͸
 WebGLͱOpenGLͷؔ܎ͱ͸ҟͳΔ [OpenXR Overview] https://www.khronos.org/openxr
  29. WEB XR DEVICE API ➤ ARCore, ARKitͳͲΛ௚઀తʹWeb͔Βѻ͑ΔͷͰ৽ͨͳΠ ϯλϥΫγϣϯΛWebͷ৔ʹ࣋ͬͯ͜ΕΔΑ͏ʹͳΔ(?) ➤ ྫ:

  30. Immersive Webͱ͍͏৽ͨͳWeb ➤ XRٕज़ΛऔΓೖΕͨϒϥ΢β͸ͲͷΑ͏ʹར༻͞ΕΔͷͩΖ ͏? [Progressive WebXR] https://blog.mozvr.com/progressive-webxr-ar-store/

  31. Immersive Web Browsers ➤ ͍ͭ·ͰWebϖʔδ ͸2࣍ݩͱ͍͏લఏ Λ࣋ͭͷ͔? [Progressive WebXR] https://blog.mozvr.com/progressive-webxr-ar-store/

  32. ͜ͷը໘͸ԿʹΑͬͯ؅ཧ͞Ε͍ͯΔͷ͔  "3༻ͷ04 ֗Λาͨ͘ΊͷΞϓϦ  Immersive Web Browserͷߦ͘ઌ [Hyper reality]https://www.youtube.com/watch?v=YJg02ivYzSs

  33. Ϣʔβ͕࣮ߦ͍ͯ͠Δ ΞϓϦέʔγϣϯ ళ͕ܝࡌ͍ͯ͠Δ޿ࠂ ͜ͷը໘͸ԿʹΑͬͯ؅ཧ͞Ε͍ͯΔͷ͔  "3༻ͷ04 ֗Λาͨ͘ΊͷΞϓϦ  Immersive Web

    Browserͷߦ͘ઌ [Hyper reality]https://www.youtube.com/watch?v=YJg02ivYzSs
  34. "3ίϯςϯπ༻ηΩϡϦςΟαϯυϘοΫε ϒϥ΢βͷ࣍ͷܗ ηϯαٕज़΍ۭؒೝٕࣝज़ͷൃల ͜ͷੈքͷ"3ίϯςϯπ͸Ͳ͏࡞ΓɺͲ͏؅ཧ͞Ε͍ͯΔ ࠓ ޷͖ͳ৔ॴʹΞϓϦέʔγϣϯΛ͓͚Δ )PMP-FOT͕ఏҊ͍ͯ͠Δ֓೦ ະདྷ
 ຊ౰ʹཉ͍͠΋ͷ ৔ॴɺ࣌ؒɺঢ়گʹ߹Θͤͯදࣔ͞ΕΔ΂͖

    ίϯςϯπ͕ࣗಈͰղܾ͞Εɺ ҆શʹ࣮ߦ͞ΕΔ؀ڥ ޷͖ͳ৔ॴʹΞϓϦέʔγϣϯΛ͓͚Δ
  35. એ఻ 8FC"3ʹ͓͚Δ8PSEQSFTT "MU-BZFS ςʔϚΛબͿ ϑΥʔϜΛຒΊΔ 8FC"3͕σϓϩΠ͞ΕΔ εςοϓͰ8FC"3ίϯςϯπ͕׬੒ @altlayer_inc ެ։࣌ʹ্هΞΧ΢ϯτͰ৘ใΛൃ৴͢ΔͷͰϑΥϩʔ౳ΑΖ͓͘͠ئ͍͠·͢ɻ ϕʔλެ։४උத

    https://altlayer.cloud