webARの知識0から大体20時間くらい調べてわかったこと

A-Frame

<script>” title=”<script>

<script>

webARの知識0から大体20時間くらい調べてわかったこと。

#備忘録 #2021年8月現在

◆webARを表現するための方法

A-Frame

WebVRをHTMLの記述で簡単に作成できるフレームワーク

・webxrを使うとA-FarmeだけでARが表現できる（前まではAR.jsを使わないとできなかった）

webxrとは？

A-FrameをAR表示させるためのコンポーネント

webxr 公式ドキュメント

webxrを使ってAR表示させる

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-assets>
          <a-asset-item id="crate-obj" src="https://cdn.glitch.com/12d4e08b-94a1-45f4-b7b5-4f8aa9fa2c8a%2Famong%20us.obj?v=1627631525763"></a-asset-item>
          <a-asset-item id="crate-mtl" src="https://cdn.glitch.com/12d4e08b-94a1-45f4-b7b5-4f8aa9fa2c8a%2Famong%20us.mtl?v=1627631644525"></a-asset-item>
    </a-assets>
    <a-scene webxr="requiredFeatures: hit-test,local-floor;
                optionalFeatures: dom-overlay,unbounded;
                overlayElement: #overlay;">
      <a-obj-model position="0 0 -50" src="#crate-obj" mtl="#crate-mtl"></a-obj-model>
      
      <a-entity position="0 100 150">
        <a-camera></a-camera>
      </a-entity>
    </a-scene>
  </body>
</html>


　ーiPhone safariは非対応？うまくできなかった
　ーXRviewerのアプリ使ったら見れた

AR.js

・three.jsとjsartoolkit5をベースに作られたライブラリ

・A-frameと合わせてマーカーベースのARができる

・Android,iOS両方対応

・インタラクティブな操作はできない（拡大縮小できない）

・3Dオブジェクトはobj形式で保存（objファイル、jpg or png ファイル、mtlファイル）

・名刺など紙媒体と相性がいい

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>A-Frame で超簡単 AR</title>
     <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
  </head>
  <body>
    <a-scene embedded arjs="debugUIEnabled:false;">
      <a-marker preset="hiro">
        <a-obj-model position="0 1 0" 
                   src="https://cdn.glitch.com/13cc1463-1031-4a99-9d1e-8b42708fb1b0%2Famong_us_min.obj?v=1627894490749" 
                   mtl="https://cdn.glitch.com/13cc1463-1031-4a99-9d1e-8b42708fb1b0%2Famong_us_min.mtl?v=1627894519306">
      </a-obj-model>    
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

model viewer

Webで簡単にインタラクティブな3Dモデルを表示できるコンポーネント（Google開発）

・正確にはiOSでは「AR Quick Look」、Androidでは「Scene Viewer」という機能を使って表示される

AR Quick Look

USDZファイルを使って、iPhoneやiPad上で3DやARを表現する技術

AR Quick Look

・実寸のAR表示が可能

・iOS safariのみ対応

・USDZと呼ばれる3Dモデルフォーマットで3Dオブジェクトを保存しないといけない
　Reality Converterで変換できる

参考：Apple iPhone12
「ARを使って、あらゆる角度から見てみよう。」

AR Core

GoogleがAndroid端末向けに開発したARフレームワーク

AR Core

・実寸のAR表示が可能

・ARCore対応のAndroid端末じゃないとみれない（Android持ってるからって見れるわけじゃない）

・glb / gltfの3Dオブジェクトに対応

参考：スマホのGoogleで「チワワ」で検索

model viewerでAR表示させる

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mode-viewer</title>

    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
    <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
    <style>
      model-viewer{
        width:100%;
        height:100vh;
      }
    </style>
  </head>
  <body>
    <model-viewer
      src="https://cdn.glitch.com/12d4e08b-94a1-45f4-b7b5-4f8aa9fa2c8a%2Famong_us.glb?v=1627821661863"
      ios-src="https://cdn.glitch.com/12d4e08b-94a1-45f4-b7b5-4f8aa9fa2c8a%2Famong_us.usdz?v=1627821797130"
      alt="A 3D model"
      auto-rotate
      camera-controls
      shadow-intensity="1"
      ar
    ></model-viewer>
  </body>
</html>