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

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

Avatar for kyasbal kyasbal
April 25, 2019

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

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

Avatar for kyasbal

kyasbal

April 25, 2019
Tweet

More Decks by kyasbal

Other Decks in Programming

Transcript

  1. ࠓ೔ͷ໨త ➤ WebGL΍Web XR Device APIͳͲWebͷதΛऔΓר͘CGٕज़ ͷࠓͷ͓࿩૯·ͱΊ ➤ ͦ΋ͦ΋WebGLͬͯͳΜ͚ͩͬ ➤

    ؔ࿈ͷٕज़ɺχϡʔεͳͲͬͨࣽ͝
 (຺བྷͳΜͯ΋ͷ͸ͳ͍) ➤ εϥΠυ͸Twitter্Ͱ์ྲྀͯ͋͠Γ·͢ɻ
  2. 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/ ΑΓ
  3. 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
  4. 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
  5. 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