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
tfcon2022_Web3Dひとめぐり.pdf
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Yuki Shimada
May 14, 2022
Programming
2.2k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
tfcon2022_Web3Dひとめぐり.pdf
Yuki Shimada
May 14, 2022
More Decks by Yuki Shimada
See All by Yuki Shimada
WebGL2 ノウハウ・Tips集
emadurandal
0
360
Other Decks in Programming
See All in Programming
ルールを書いて終わらせないハーネスエンジニアリング
yug1224
4
1.9k
ソフトウェア設計に溶けるインフラ ― AWS CDK のインフラ認識論
konokenj
3
780
Apache Hive: そしてCloud Native Lakehouseへ
okumin
1
230
ドリフトを絶対に許さない(?)CDK運用 / CDK Ops with Zero Tolerance for Drifts (?)
akihisaikeda
1
180
5分で問診!Composer セキュリティ健康診断
codmoninc
0
990
VibeCodingからAgenticWorkflowへ
starfish719
0
450
S3 を使うアプリケーションをローカル完結で動かすことに全力を注いでみた / Running S3 Apps Offline
contour_gara
0
470
170k Jobs a Day on GKE: Scaling Mercari's CI Platform - and What's Next for AI-Native Development
junyaokabe
0
110
実装をデザインガイドラインに追従させるための取り組み / 260731-dip-mosh-design-system
dachi023
0
440
Terraform標準の組織で AWS CDKをどう使うか
mu7889yoon
1
510
freeeにおけるEvalsの実践例の紹介
freee
PRO
0
110
ここ半年くらいでAIに作らせたR用ツール
eitsupi
0
380
Featured
See All Featured
It's Worth the Effort
3n
188
29k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.5k
Designing Experiences People Love
moore
143
24k
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
1
700
Thoughts on Productivity
jonyablonski
76
5.3k
Leo the Paperboy
mayatellez
8
2.1k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
490
A designer walks into a library…
pauljervisheath
211
24k
Balancing Empowerment & Direction
lara
6
1.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
408
67k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
570
We Are The Robots
honzajavorek
0
300
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でもネイティブ に近いリッチ表現へ!