Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
tfcon2022_Web3Dひとめぐり.pdf
Yuki Shimada
May 14, 2022
Programming
0
1.3k
tfcon2022_Web3Dひとめぐり.pdf
Yuki Shimada
May 14, 2022
Tweet
Share
More Decks by Yuki Shimada
See All by Yuki Shimada
WebGL2 ノウハウ・Tips集
emadurandal
0
25
Other Decks in Programming
See All in Programming
パターンマッチングを学んで新しいJavaの世界へ!Java 18までの目玉機能をおさらいしよう / Java 18 pattern matching
ihcomega56
3
390
Airflowはすごいぞ!
hankehly
0
370
Cross Deviceチームにおけるスマートテレビアプリ開発ってどんな感じ?
cokaholic
0
120
Amazon ECSのネットワーク関連コストの話
msato
0
620
インターン生・新卒向け、学校でもっと教えてほしいITエンジニア基本スキル
nearme_tech
0
120
#JJUG_CCC 「サポート」は製品開発? - JDBCライブラリ屋さんが実践する攻めのテクニカルサポートとJavaエンジニアのキャリアについて -
cdataj
0
420
個人開発でReact Native + Expo製アプリを作った話
ryonakae
1
450
Terraform Plan/Apply結果の自動通知
ymmy02
0
280
iOS 16からのロック画面Widget争奪戦に備える
tsuzuki817
0
190
"What's new in Swift"の要約 / swift_5_7_summary
uhooi
1
300
LINE Messaging APIの概要 - LINE API総復習シリーズ
uezo
1
160
React NativeアプリにStorybook CSF3.0を導入しよう
texmeijin
0
160
Featured
See All Featured
Building Your Own Lightsaber
phodgson
94
4.6k
The Brand Is Dead. Long Live the Brand.
mthomps
46
2.7k
BBQ
matthewcrist
74
7.9k
Three Pipe Problems
jasonvnalue
89
8.7k
Bash Introduction
62gerente
597
210k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Support Driven Design
roundedbygravity
86
8.5k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Producing Creativity
orderedlist
PRO
333
37k
Automating Front-end Workflow
addyosmani
1351
200k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
4
500
Transcript
最近のWeb3D ひとめぐり @emadurandal 1
@emadurandal について 2015年頃にWebGLに触れて3Dライブラリ開発を決意した人。 WebGLライブラリRhodoniteの作者。長らくWeb3D情報を発信 現在は株式会社HIKKYにて WebGLベースの メタバースプラットフォーム の開発に従事 エンジンはRhodoniteではなく、 妹尾さんをメインアーキテクトとした
VketCloudエンジンというものです。 C++/Emscriptenによるネイティブ技術ベースの WebGLエンジンです。 2
Web3Dを取り巻く現状 3 WebGL WebGL2+標準時代の到来? WebGPU 1.0リリースはいつ? glTF glTFの拡張仕様が拡充! 派生フォーマットも WebXR
WebXR1.0が正式リリース近し! 拡張仕様も続々!
WebGL WebGL2が標準的になり、 一部では拡張機能も極めるプレーヤーが?
・シェーダービット演算 ・MSAA(アンチエイリアシング) ・3Dテクスチャー ・高速な描画系拡張関数 WebGL2標準の時代へ ほぼ全てのモダンブラウザ環境がWebGL2をサポート • Safari(iOS/Mac)でもサポート • バックエンドがOpenGL ESからMetalへ(内部実装のモダン化) ※まだ一部不具合がある(WebGL互換性テスト100%未達)が、いずれ問題解消か
WebGL2でできるモダンなこと 5
限界まで使い込まれるWebGL2 WebGL2にもまた拡張命令がある(いわばWebGL2+) 各種WebGLライブラリがWebGL2拡張を使いこなし始めた。 • WEBGL_multi_draw(複数形状メッシュを一回で描画) • OVR_multiview2(VR向け描画高速化) • KHR_parallel_shader_compile(シェーダーの並列コンパイル) •
OES_draw_buffers_indexed(描画バッファ毎の細かい制御) 引き続き追加拡張が普及予定 • WEBGL_draw_instanced_base_vertex_base_instance • WEBGL_multi_draw_instanced_base_vertex_base_instance 6
WebGPU WebGL2の次にくるWeb3D API規格
WebGPU ・コンピュートシェーダー(CPUに近い汎用計算をGPUで) ・GPUの新しい機能が使える(WebGL/WebGL2はAPI世代が古いのでアクセスできなかった) ・より高速に動作(現在のGPUに合ったよりモダンなAPI) いつ正式版がリリースされるの? → 2022 Q3目標に変更。(※今までに何度も延期されてます) シェーダーであるWGSLはまだバシバシ仕様変更が入っている。 一部のライブラリはすでに対応開始
・Babylon.jsやThree.jsはブラウザベンダーと近い関係を構築しており、すでにWebGPU現行実装に対応済み。 WebGPU for Native? ネイティブ環境で実装する試み(wgpu-rs)もあり、WebGPUが共通3D APIの有力候補になる可能性も? 8
WebXR 近づく1.0正式版、 続々と策定される拡張仕様たち
WebXR WebXR 1.0 RCがリリース。正式版まであと少し。 多くの拡張仕様の策定が進んでおり、できることが増え続けている。 1 0 UI周り WebXR DOM
Overlays Module(DOMをXR空間にオーバーレイ表示) 表現力向上・できることが増える • WebXR Lighting Estimation API Level 1 (環境光の推測) • WebXR Anchors Module(画像空間に位置追跡アンカーを打つ) • WebXR Hit Test Module (ヒットテスト機能) • WebXR Plane Detection Module (平面認識) • WebXR Depth Sensing Module (深度検出機能) 開発側にとっての便利機能 • WebXR Layers API Level 1 (描画のレイヤー機能) 入力の増強 • WebXR Gamepads Module (コントローラーの取扱い) • WebXR Hand Input Module(ハンドコントロール) AR • WebXR Augmented Reality Module(いわゆるAR) ユーザー体験の向上 • Navigation API (XR空間内にいたままページ遷移) Apple, Google, OculusのVR/AR技術の最大公約数的な仕様が遅れて WebXRに追加されている印象。
glTF 普及に大成功したglTF 2.0 強化され続ける拡張仕様。派生フォーマットも登場
glTF Webでも高度な物理ベースレンダリングが可能に!(glTF PBR Next 1) ・KHR_materials_clearcoat(クリアコート) ・KHR_materials_sheen(ベルベットのような布表現) ・KHR_materials_transmission (透過表現) 1 2
https://www.khronos.org/news/press/khronos-releases-wave-of-new-gltf-pbr-3d-material-capabilities
glTF 1 3 glTF PBR Next 2 ・KHR_materials_volume ・KHR_materials_ior ・KHR_materials_specular https://www.khronos.org/news/press/new-gltf-extensions-raise-the-bar-on-3d-asset-visual-realism
glTFベースの新フォーマットたち 1 4 3D Tiles Cesiumが提案した地理空間フォーマット。 1.0では地図の一部を成す大量のglbファイルを メタファイルがまとめる構造だったが、 1.1(Next)ではメタ情報がglTF自体に拡張仕様として 収まるよう、仕様が定義し直された。
VRM みんな大好き、ほぼデファクト?スタンダードなアバター3Dフォーマット 実はglTF2.0ベースです。 現行普及しているのはVRM0.xですが、 来るVRM1.0では機能アップするだけでなく、 メタ情報の格納の仕方がより glTF2のお作法に従った綺麗なものに。 https://vrm.dev/index.html https://cesium.com/blog/2021/11/10/introducing-3d-tiles-next/
Web3Dでもネイティブ に近いリッチ表現へ!