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

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

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