Multiverse XR Viewer

提供: ディーズガレージ wiki
2022年1月21日 (金) 19:13時点におけるShogooda (トーク | 投稿記録)による版 (開発環境)

移動先: 案内検索

UnityでGLBとUSDZを作り<model-viewer>に組込みしてみます。

Multiverse Viewer

Ar qr.png

メモ

デバッグ
Twitter Cards
GLBとUSDZでDRACOとmeshopt
GLBとUSDZでBasisU
UnityのAutodesk Interactive Shader (Metallic, Roughnessで統一)

Meta(Facebook) Metaverse
Meta(Facebook)はメタバースを構成する基礎技術.... - GDEP Solutions, Inc.
Insight SDK
Interaction SDK
Voice SDK

NVIDIA Omniverse
NVIDIA Omniverse | NVIDIA
NVIDIAが無料版「Omniverse」の提供開始、.... - GIGAZINE
GeForce RTXのGPU parserが必要になる予感

8th Wall
https://www.8thwall.com/
ブラウザベースの見た目がWebXR 何で?

名称の整理

Android
 └ ARCore: AR framework
  └ Scene Viewer: WebAR
   └ <model-viewer>: Web component
    └ GLB, glTF: File format

iPhone
 └ ARKit: AR framework
  └ AR Quick Look: WebAR
   └ <model-viewer>: Web component
    └ USDZ: File format

XR/WebXR
 └ AR/WevAR
 └ VR/WebVR
 └ MR

Universe
Multiverse 〇
Metaverse ● Meta
Xenoverse
Omniverse ● NVIDIA

調査

AR対応デバイス

ARCore対応デバイス  |  Google Developers

Google検索

Google検索 ARモデル一覧

Ar qr google.png

iPhone
1. Google アプリ インストール
2. 検索窓のカメラアイコンをクリック
3. 上記QRコードを読み取り、ウェブサイトを開く
4. お気に入りに登録

オーディオ付きARで動いてる
draco_decoderが動いてる

認識範囲

horizontal (床) vertical (壁) ceiling (天井) face (顔) marker (ARマーカー)
Scene Viewer ● ※1
AR Quick Look ● ※2 (※3) ● ※4 ● ※5

※1
Content placement  |  ARCore  |  Google Developers
<model-viewer> Examples and Documentation
enable_vertical_placement (optional)
※2
AR Quicklook Vertical Plane support | Apple Developer Forums
※3
Apple Developer Documentation
何これ? floor, wall, ceiling, table, seat, door, window

※4
https://twitter.com/cwervo/status/1283073772304633858
https://ar-quick-look-masks.glitch.me/
reality(USDZ)ファイル読み込み完了時カメラが切り替わってる
Reality ComposerでカメラとAR Face Anchorsに切り替えてる?

※5
AR Marker : Feature · Issue #1516 · google/model-viewer · GitHub
AR marker RealityComposer - Google 検索

オーディオ

Issues · google/model-viewer · GitHub

まだ安定してない気がする

動作テスト

Twitter Cards

https://twitter.com/modelviewer/status/1468282531329970176
3D Twitter card generator
https://modelviewer.dev/examples/twitter/generator.html
テスト
https://modelviewer.dev/examples/twitter/player.html?src=https://dz.plala.jp/ar/data/amy.glb&poster=https://dz.plala.jp/ar/data/amy.webp&alt=CORS%20test&environmentImage=https%3A%2F%2Fdz.plala.jp%2Far%2Fhdri%2Fmichelle.hdr&exposure=1.3&shadow-intensity=1.0&shadow-softness=0.2
自サーバCORS 設定済み
Google Analytics 入ってる > modelviewer.dev自サーバ設置はどお?
camera-target 効かない

Piping Server

お手本 https://size.link/
お勉強 https://dz.plala.jp/ar_box/

USDZ Exporter
iPhone向け 実装済

glTF Exporter
Android向け 未実装

動作テスト中
GLTFExporter exporting model that show nothing at android Scene Viewer - Questions - three.js forum
Exported Model not working in AR mode · Issue #887 · google/model-viewer · GitHub

    const  options:GLTFExporterOptions  =  { 
      binary:true 、
      forcePowerOfTwoTextures:true 、
      forceIndices:true 
    } ;

Piping Server
GitHub - nwtgck/piping-server
ネットワーク越しでパイプしたり、あらゆるデバイス間でデータ転送したい! - Qiita

https://ppng.io/ (ランダム文字列) /box.gltf

intent:
Scene ViewerがCloudfrontの事前署名付きURLを読み込まない · google/model-viewer · GitHub
サポートされているintentパラメータ  |  ARCore

https://size.link/box.gltf?w=1&h=2&l=3&units=cm
https://size.link/1/2/3/cm/box.gltf
intent://arvr.google.com/scene-viewer/1.0?file=https://size.link/1/2/3/cm/box.gltf&resizable=false&title=1cm x 2cm x 3cm#Intent;scheme=https;package=com.google.ar.core;action=android.intent.action.VIEW;S.browser_fallback_url=https://size.link/#unsupported-device;end

ファイル要件

Scene Viewer
モデルのファイル要件  |  ARCore

ファイル形式 glTF2.0 / GLB
マテリアル PBR
テクスチャ 最大2048×2048
ポリゴン数 30,000~50,000 最大100,000
アニメーション 対応
マテリアル数 10 (アルファ付きは2枚まで)
マテリアル当たりのメッシュ数 1
ボーン数 最大254
頂点当たりのウェイト数 最大4
メッシュ当たりUV数 1
モデルサイズ 10MB

AR Quick Look
USD PBR Metal Roughness Preset | Substance 3D Painter
GitHub - ft-lab/Shade3D_USDExporter
All about AR File Formats

ファイル形式 USDZ
マテリアル PBR
テクスチャ 最大2048×2048
ポリゴン数 最大100,000
アニメーション 対応 最大10秒?
マテリアル数
マテリアル当たりのメッシュ数
ボーン数
頂点当たりのウェイト数
メッシュ当たりUV数
モデルサイズ

メッシュ
四角形 three.js 非対応
四角形 glTF 非対応

メッシュ圧縮 Unity
Unity Mesh Compression - Google 検索
Normalの品質が落ちる
OFF or Lowが安全側

その他

<model-viewer>
ChromeでAR Quick Lookがcall to actionを表示しない · Issue #2787 · google/model-viewer · GitHub

glTFast
GitHub - atteneder/glTFast
glTFastをUnity Packageでインストール後、
My Registriesに表示されるDracoとKTX/Basisuをインストール
Meshoptは? 動作テスト中

glTFとUSDの比較
glTF and USDZ – Sketchfab Help Center
glTFのPBR検証用のサンプルglb – ft-lab
<model-viewer> - Fidelity Test Results

Substance 3D Painter
glTF Search Results | Substance 3D Painter
USDZ Search Results | Substance 3D Painter

フォトグラメトリ
LiDAR - Twitter検索
LiDAR - Sketchfab
デザイン向けの3Dフォトグラメトリソフトウェア | Unity
RealityCapture: Mapping and 3D Modeling Photogrammetry Software - CapturingReality.com
3DF Zephyr - photogrammetry software - 3d models from photos
Steam:3DF Zephyr Lite Steam Edition
Agisoft Metashape
GitHub - alicevision/meshroom

開発環境

オーサリング Unity, glTF Exporter, GLB Packer, USD Exporter
DCCツール 3dsMax, Photoshop, Substance 3D Painter, HDR Light Studio
デバッグ <model-viewer>, glTF Validator, Android Emulator, iPhone XS
サーバ Piping Server (検討)

glTF Exporter
GitHub - Plattar/gltf-exporter

GLB Packer
GitHub - sbtron/makeglb

USD Exporter
GitHub - Unity-Technologies/usd-unity-sdk
Recorder
Unity を使って iPhone 向けの AR コンテンツを簡単に作る方法(USDZファイルを出力する方法) - 強火で進め

HDR Light Studio
https://www.lightmap.co.uk/

Android Emulator
Android Emulator 上でアプリを実行する  |  Android Developers

<model-viewer>
GitHub - google/model-viewer
Model Editor - <model-viewer>

素材
Poly Haven

PWA

index.html
script.js
style.css
data.json


WebXR PWA.png

更新履歴

  • 2022.01.06 全体見直し
  • 2021.09.11 Google検索 ARモデル 追加
  • 2020.05.13 ソース書き換え
  • 2020.05.10 アニメーション付きUSDZ追加
  • 2019.10.25 公開