KITASENJU DESIGN BLOG

memo, html, javascript, unity

WebAR (AR Quick Look / Scene Viewer)にトライ

はじめに

  • WebAR（＝スマホのブラウザ上で行うAR）において、WebXRというオープンな仕様（＝ネイティブのARの機能をブラウザから使える）をsafariが採用してない。（chromeは採用してるらしい）
  • よって万人に質の高いARを提供するのは難しい
  • WebXR APIが使えずとも高品質なARが使える8th wallというサービスはあるが、コストが高い
  • そこで機能は限定されるがiOS/Androidが提供するAR Quick Look / Scene Viewerを使うのがコスパが良い場合がある

使用できる3Dファイル

  • AR Quick Look (iOS) → .usdz
  • SceneViewer (Android) → .glb

glbとはglTFをテクスチャなども含めzipにしたもののようです。 glTFはWebGLの使用を決めている団体が作っている。

model-viewer.js & .glb

  • model-viewer.jsはGoogleが作っているライブラリ。
  • model-viewerタグを書き、.glbのファイルだけ置いておくとiOS/Android両方使える。
  • 内部でAR QUickLook / SceneViewerがそれぞれ起動するようだ。
  • iOS(Safari)は、.glb→.usdzの変換をやってくれる
  • 生のusdzより機能は制限されるのか
  • ちなみにsafariではusdzに直リンクすればAR Quick Lookが起動した。
  • iOSは読み込んだり変換は処理的に無駄な気がする。usdzを作成し、model-viewer.jsは使わず分岐させた方が良い気がする

コード


<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta charset="utf-8">
       <title>ModelViewer-Test</title>
   
   </head>
    <body>
        <script type="module"
            src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"> 
       </script>
        <model-viewer
            ar
            ar-modes="scene-viewer webxr quick-look"
            alt="d"
            src="d.glb" 
            quick-look-browsers="safari chrome">
      
        </model-viewer>
        <script>
           document.querySelector('model-viewer').addEventListener('load', (event) => {
               event.target.activateAR();
           });
      
       </script>
    </body>
</html>

スケールを固定する

<model-viewer src="hoge.glb" ar ar-scale="fixed"></model-viewer>

usdzの作成

  • blenderで.glbを出力（UDIMというテクスチャ形式は使えないので注意
  • Reality ConverterをApple公式のどこからかダウンロード、.glbからusdz、かき出せる。

容量の目安

参考

"FOOTER"