Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CG in Web 最前線 - 今そこで何が起きているのか -
Search
kyasbal
April 25, 2019
Programming
0
380
CG in Web 最前線 - 今そこで何が起きているのか -
WeJS@31stのショートセッションです
kyasbal
April 25, 2019
Tweet
Share
More Decks by kyasbal
See All by kyasbal
WebでのARには ハードル(闇)がいっぱいある話
kyasbal1994
0
3.7k
WASM with WebGL in Emscripten night 2018 December
kyasbal1994
0
310
Other Decks in Programming
See All in Programming
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
550
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
tomohiko9090
0
140
A comprehensive view of refactoring
marabesi
0
300
「兵法」から見る質とスピード
ickx
0
260
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
590
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
190
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
470
Datadog RUM 本番導入までの道
shinter61
1
260
C++20 射影変換
faithandbrave
0
440
Parallel::Pipesの紹介
skaji
2
910
PT AI без купюр
v0lka
0
230
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
2
140
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Balancing Empowerment & Direction
lara
1
290
Writing Fast Ruby
sferik
628
61k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Practical Orchestrator
shlominoach
188
11k
Navigating Team Friction
lara
186
15k
A designer walks into a library…
pauljervisheath
206
24k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Rails Girls Zürich Keynote
gr2m
94
14k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
780
Transcript
CG in Web ࠷લઢ ࠓɺͦ͜ͰԿ͕ى͖͍ͯΔͷ͔ @kyasbal_1994
@kyasbal_1994 東京工業大学 情報理工学院 修士2年 未踏ジュニアPM(2018年〜) 未踏2016 スーパークリエータ 未踏アドバンスト 2018イノベータ ओͳٕज़
3FBMUJNF$( 8FC جຊ8FC(-·ΘΓ͕͖ ➤ εϥΠυTwitter্Ͱ์ྲྀͯ͋͠Γ·͢ɻ
ࠓͷత ➤ WebGLWeb XR Device APIͳͲWebͷதΛऔΓר͘CGٕज़ ͷࠓͷ͓૯·ͱΊ ➤ ͦͦWebGLͬͯͳΜ͚ͩͬ ➤
ؔ࿈ͷٕज़ɺχϡʔεͳͲͬͨࣽ͝ (຺བྷͳΜͯͷͳ͍) ➤ εϥΠυTwitter্Ͱ์ྲྀͯ͋͠Γ·͢ɻ
WEBGLͱ? ߴͰ֓ཁΛֶͿ
WEBGLͱ? GPU accelerated ͳCG͕Ͱ͖Δ͜ͱ͕ Ұ൪େࣄͩͱࢥ͏ͷʹ…
CPUɺGPUͷԋࢉೳྗ [A Massively Parallel Processor: the GPU] http://homepages.math.uic.edu/~jan/mcs572/mcs572notes/lec27.html ΑΓҾ༻
GPUͱ? [[5Ͱཧղ]GPUͱʁCPUͱҧ͍ੑೳͱ׆༻] https://www.kagoya.jp/howto/rentalserver/gpu1/ ΑΓҾ༻ Πϝʔδ ɾ֤ॲཧ͕ޓ͍ʹґଘ͠ͳ͍ ɾσʔλҟͳΓ͏Δ͕ ॲཧͷ༰͍͠
GPU͜͏ͬͯ3DCGʹ׆͔͞ΕΔ ʮWebGL2ೖ جૅฤʯhttps://sbfl.net/blog/2016/09/04/webgl2-tutorial-basics/ ΑΓҾ༻ ɾ֤ॲཧ͕ޓ͍ʹґଘ͠ͳ͍ ɾσʔλҟͳΓ͏Δ͕ ॲཧͷ༰͍͠ ͜Μͳॲཧ͕3DCGͰଟ͍ GPU͕ߦ͏ͷ””ʹؔ͢Δૢ࡞(Shader)ͷΈ ֤ͷҐஔΛܾΊΔ(Vertex
shader) ֤ϐΫηϧͷ৭ΛܾΊΔ(Fragment shader) 8
WEBάϥϑΟΫεͷࠓ ؔ࿈ٕज़ͬͨࣽ͝
WEBGLͷར༻ྫ Web͚ͩͰಈ͘ήʔϜΤϯδϯ Playcanvas Web͚ͩͰಈ͘CAD AutoCAD on Web
TinyUnityͰ؆୯ʹܰྔWebGLΞϓϦέʔγϣϯΛ։ൃ ➤ WebGL༻ͷUnityϥϯλΠϜ ͕ϦϦʔε͞Εͨ ➤ ϥϯλΠϜ͕72KBͱ͔ͳΓ খ͍͞ ➤ ݱঢ়2DήʔϜͷΈͷα ϙʔτ
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/ ΑΓ
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
ظͷWEBʹదͨ͠3DCGϑΥʔϚοτglTF ➤ KhronosʹΑͬͯඪ४Խ͕ਐΊΒΕ͍ͯΔϞσϧϑΥʔϚοτ [Khronos glTF Overview] https://www.khronos.org/gltf/ ΑΓҾ༻
ظͷWEBʹదͨ͠3DCGϑΥʔϚοτglTF ➤ ͕͍͜͜͢͝glTF ➤ ϝλใJSONɺόοϑΝ෦όΠφϦ ύʔε͕͘͢͠ɺσʔλྔͱͯ͠एׯখ͍͞ ➤ WebGLͷඪ४ԽஂମͰ͋ΔKhronosʹΑΔඪ४Խ ➤ ֦ு༷ͷఏҊ͕͘͢͠ɺΦʔϓϯʹߦΘΕΔΑ͏ʹɻ
➤ PBR(ཧϕʔεγΣʔσΟϯά)ɺϘʔϯΞχϝʔγϣϯɺ ϞʔϑɺΞχϝʔγϣϯͳͲ͕αϙʔτ͞Ε͍ͯΔ
WebComponentͷྗͰѹత؆୯glTFϞσϧදࣔ ➤ three.jsͷ࡞ऀͷMr.doob͕ެ։ͨ͠Web componentͷҰͭ `model-viewer`λάΛ͑Θ͔ͣ͜Ε͚ͩͰ3DϞσϧදࣔ ͕Ͱ͖Δ ಈ͍͍ͯΔͷhttps://model-viewer.glitch.me/
෯͘࠾༻͞Ε͍ͯΔglTF ➤ Windows Paint3D ➤ Sketch fab Windows10 Ͱඪ४ࡌͷ 3DϖΠϯτιϑτ
େྔͷ3DϞσϧ͕ ϑϦʔૉࡐͱͯ͠ glTFͰμϯϩʔυՄೳʹ
VRMʹΑͬͯՃ͢ΔglTFͷར༻ ➤ ਓܕʹಛԽͨ͠glTFͷ֦ு ➤ ڞ௨ͨ͠ϞʔγϣϯϦοϓγ ϯΫ͕͑ΔΑ͏ʹͳ͍ͬͯΔ ➤ VtuberपΓͳͲͰͷར༻͕׆ൃ ʹͳΔ͔?
WEBGPUͱ͍͏৽͍͠ظ iOS/macOSͰͷOpenGL͕ඇਪʹͳΓۀք͕Ꭵ WebkitͷఏҊͰGPU for the Web Community Group͕ൃ ࣍ੈGPU in
Webͳ༷WebGPU͕ٞ։࢝
WEBGPUͱ͍͏৽͍͠ظ ➤ WebGLOpenGL(͘͠ANGLEΛܦ༝ͯ͠DirectX)Λୟ͘ ͜ͱʹΑ࣮ͬͯݱ͞Ε͍ͯΔ ➤ WebGPUͬͱϨϕϧAPIΛ෦తʹͭͳ͙ Webϒϥβ API ωΠςΟϒ API
OS
WEBGPUͱ͍͏৽͍͠ظ ➤ ֤ϒϥβϕϯμʔͱ ʹIn development ➤ ༷·ͩdraftͰຖ िٞ͞Ε͍ͯΔ ➤ ֤ϕϯμʔͱʹۃΊ
ͯ׆ൃʹಈ͍͍ͯΔ ༷ࢠ
WEBGPUͱ͍͏৽͍͠ظ ➤ Կ͕Ͱ͖ΔΑ͏ʹͳΔͷ? ➤ ΑΓߴͰɺϚϧνεϨουͳWeb্ͰͷCG (WASMͷεϨουͱ૬ੑ͕ྑͦ͞͏?) ➤ ৽͍͠γΣʔμݴޠ(SPIR-Vϕʔε? WebHLSL?) ➤
CGͷΈͰͳ͘ػցֶशͳͲʹGPUͷྗ͕Web্Ͱ͍ ͘͢
WEB্ͷGPUͰ͕ΔAI on ϒϥβ ➤ WebGLͦͷଞٕज़ʹΑͬͯϒϥβ্Ͱൺֱతܭࢉίετ ͷߴ͍ػցֶशϞσϧ͕ಈ͘Α͏ʹͳ͖ͬͯͨ [Move Mirror] https://experiments.withgoogle.com/collection/ai/move-mirror/view/mirror [land
lines] https://lines.chromeexperiments.com/
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
GAME STREAMING ➤ γΣΞୈೋҐͷήʔϜΤϯδϯͷUnreal Engine͕Pixel StreamingΛαϙʔτ ➤ αʔόαΠυϨϯμϦϯάΛߦ͏ήʔϜΛࠓ·ͰͷήʔϜͷ։ ൃख๏ͰɺσϓϩΠઃఆΛม͑Δ͚ͩͰ࣮ݱՄೳʹɻ [Unreal
Engine(Pixel Streaming ೖ)] http://api.unrealengine.com/JPN/Platforms/PixelStreaming/PixelStreamingIntro/index.html
GAME STREAMING ➤ W3C͕Web্ͷήʔϜʹඞཁͳ༷ࡦఆͷͨΊͷϫʔΫ γϣοϓΛ6݄ʹߦ͏ͦ͏ ➤ ͦͷதͷେ͖ͳٞͷҰͭʹऔΓ্͛ΒΕ͓ͯΓɺ͜ͷWS ޙʹͳΜΒ͔ͷήʔϜετϦʔϛϯάؔ࿈༷͕ఏҊ͞Ε ΔՄೳੑ (ଞʹWebGLɺWebXRपΓͷٞʹͳΔ༧ఆ)
GAME STREAMING ➤ 5GճઢͰଳҬɺߴͳωοτϫʔΫΛ͑ΔΑ͏ͳڥʹ! (ϩʔυϚοϓతʹϐʔΫ࣌ʹ20GBps͕ఆ͞Ε͍ͯΔ) ➤ ωοτϫʔΫεϥΠγϯά ΞϓϦ୯ҐɺΤϯυϙΠϯτ୯ҐͰԾωοτϫʔΫΛ͚ Δٕज़ʹΑͬͯɺಛఆͷ৴͚ͩߴԽ͢Δ͜ͱ͕ݱ࣮త ʹɻଳҬΛ͏ήʔϜͰɺ৴ۀऀͱܞଳ௨৴ۀऀ͕࿈
ܞ͢ΕΑΓҰݱ࣮తʹͳΔɻ
WEB XR DEVICE API ➤ WebVRʹऔͬͯΘΓɺWebARͳͲؚΊͨWeb XR device API͕W3C Immersive
WGʹΑΓఏҊ͞Ε͍ͯΔ KhronosOpenXRΛ࡞͍ͬͯΔ͕ WebXRͱOpenXRͷؔ WebGLͱOpenGLͷؔͱҟͳΔ [OpenXR Overview] https://www.khronos.org/openxr
WEB XR DEVICE API ➤ ARCore, ARKitͳͲΛతʹWeb͔Βѻ͑ΔͷͰ৽ͨͳΠ ϯλϥΫγϣϯΛWebͷʹ࣋ͬͯ͜ΕΔΑ͏ʹͳΔ(?) ➤ ྫ:
Immersive Webͱ͍͏৽ͨͳWeb ➤ XRٕज़ΛऔΓೖΕͨϒϥβͲͷΑ͏ʹར༻͞ΕΔͷͩΖ ͏? [Progressive WebXR] https://blog.mozvr.com/progressive-webxr-ar-store/
Immersive Web Browsers ➤ ͍ͭ·ͰWebϖʔδ 2࣍ݩͱ͍͏લఏ Λ࣋ͭͷ͔? [Progressive WebXR] https://blog.mozvr.com/progressive-webxr-ar-store/
͜ͷը໘ԿʹΑͬͯཧ͞Ε͍ͯΔͷ͔ "3༻ͷ04 ֗Λาͨ͘ΊͷΞϓϦ Immersive Web Browserͷߦ͘ઌ [Hyper reality]https://www.youtube.com/watch?v=YJg02ivYzSs
Ϣʔβ͕࣮ߦ͍ͯ͠Δ ΞϓϦέʔγϣϯ ళ͕ܝࡌ͍ͯ͠Δࠂ ͜ͷը໘ԿʹΑͬͯཧ͞Ε͍ͯΔͷ͔ "3༻ͷ04 ֗Λาͨ͘ΊͷΞϓϦ Immersive Web
Browserͷߦ͘ઌ [Hyper reality]https://www.youtube.com/watch?v=YJg02ivYzSs
"3ίϯςϯπ༻ηΩϡϦςΟαϯυϘοΫε ϒϥβͷ࣍ͷܗ ηϯαٕज़ۭؒೝٕࣝज़ͷൃల ͜ͷੈքͷ"3ίϯςϯπͲ͏࡞ΓɺͲ͏ཧ͞Ε͍ͯΔ ࠓ ͖ͳॴʹΞϓϦέʔγϣϯΛ͓͚Δ )PMP-FOT͕ఏҊ͍ͯ͠Δ֓೦ ະདྷ ຊʹཉ͍͠ͷ ॴɺ࣌ؒɺঢ়گʹ߹Θͤͯදࣔ͞ΕΔ͖
ίϯςϯπ͕ࣗಈͰղܾ͞Εɺ ҆શʹ࣮ߦ͞ΕΔڥ ͖ͳॴʹΞϓϦέʔγϣϯΛ͓͚Δ
એ 8FC"3ʹ͓͚Δ8PSEQSFTT "MU-BZFS ςʔϚΛબͿ ϑΥʔϜΛຒΊΔ 8FC"3͕σϓϩΠ͞ΕΔ εςοϓͰ8FC"3ίϯςϯπ͕ @altlayer_inc ެ։࣌ʹ্هΞΧϯτͰใΛൃ৴͢ΔͷͰϑΥϩʔΑΖ͓͘͠ئ͍͠·͢ɻ ϕʔλެ։४උத
https://altlayer.cloud