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
330
CG in Web 最前線 - 今そこで何が起きているのか -
WeJS@31stのショートセッションです
kyasbal
April 25, 2019
Tweet
Share
More Decks by kyasbal
See All by kyasbal
WebでのARには ハードル(闇)がいっぱいある話
kyasbal1994
0
3.3k
WASM with WebGL in Emscripten night 2018 December
kyasbal1994
0
230
Other Decks in Programming
See All in Programming
Building a Smaller App Binary
kateinoigakukun
2
200
Understanding Ast By Looking
inouehi
0
120
Open Source Swift Workshop - Foundation and first party libraries
ikesyo
0
180
PHPでOfficeファイルを取り扱う! PHP Officeライブラリを プロダクトに組み込んだ話
hirobe1999
0
840
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
IntelliJ IDEA を知らなかった 自分に教えたい小ネタ集 / IntelliJ IDEA Hints for My Past Self
mackey0225
3
170
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
14
3.2k
ドメイン・ファーストで考える問題解決に役立つモデル設計 / Domain First Model Design
suzushin54
1
1.4k
WasmOS: Wasmを実行する自作Microkernel
riru
0
370
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
120
incrementalモデルの理解を深める
ikkimiyazaki
2
640
LPIXEL×CADDi_kaerururu
kaerururu
3
300
Featured
See All Featured
RailsConf 2023
tenderlove
0
510
Side Projects
sachag
451
41k
A better future with KSS
kneath
230
16k
Raft: Consensus for Rubyists
vanstee
130
6.2k
Clear Off the Table
cherdarchuk
82
310k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Agile that works and the tools we love
rasmusluckow
323
20k
Building an army of robots
kneath
300
41k
We Have a Design System, Now What?
morganepeng
42
6.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
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