パソコンで,Web サーバを立ち上げ,Web でマーカーベースの AR システムを動かしてみる(A-Frame, AR.js, Python を使用)

A-Frame, AR.js を用いて,パソコンで,マーカーベースの AR を動かしてみる. 所定の hiro マーカー(画像)をパソコンのカメラで撮影すると,それを読み取って,3次元のオブジェクトが現れる.それを Web ブラウザで動かす.

A-Frame: https://aframe.io

AR.js: https://github.com/jeromeetienne/AR.js

謝辞:ここで紹介するソフトウェアの作者に感謝します.

参考Webページ

https://medium.com/@akashkuttappa/using-3d-models-with-ar-js-and-a-frame-84d462efe498

前準備

Python のインストール(Windows上)

注:既にPython(バージョン3.12を推奨)がインストール済みの場合は,この手順は不要である.

winget(Windowsパッケージマネージャー)を使用してインストールを行う

  1. Windowsで,コマンドプロンプト管理者権限で起動する(例:Windowsキーを押し,「cmd」と入力し,「管理者として実行」を選択)
  2. winget(Windowsパッケージマネージャー)が利用可能か確認する:
    winget --version
    
  3. Pythonのインストール(下のコマンドにより Python 3.12 がインストールされる).
    winget install --scope machine Python.Launcher
    winget install --scope machine Python.Python.3.12
    
  4. 【関連する外部ページ】

    【サイト内の関連ページ】

    パソコンで,マーカーベースの AR システムを動かしてみる(A-Frame, AR.js を使用)

    ここで行うこと:hiro マーカーにより,箱(Box)を表示する Web ページを作る.Web サーバを稼働させ,Web ブラウザでこの Web ページが動くようにする.

    1. カメラ付きのパソコンを準備する.
    2. 作業用のフォルダ(ディレクトリ)を作る.

      名前は何でもよいが,日本語を含まないものがよい.

    3. HTML ファイルを作成. いま作成した作業用のフォルダ(ディレクトリ)に, a.html のようなファイル名で保存する.

      次のページに記載のサンプルプログラムのうち,マーカーベースの AR のものを使う.(タイプミスと思われる部分を修正,a-box を使うように変更,URLを最新にものに修正など).

      https://ar-js-org.github.io/AR.js-Docs/#getting-started

      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
          <title>marker AR</title>
          <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
          <!-- we import arjs version without NFT but with marker + location based support -->
          <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
        </head>
      
        <body style="margin:0px; overflow:hidden;">
          <a-scene embedded arjs>
            <a-marker preset="hiro">
              <a-box position="0 0.5 0" wireframe="true"></a-box>
            </a-marker>
            <a-entity camera></a-entity>
          </a-scene>
        </body>
      </html>
      
    4. Web サーバを稼働させる
      1. Windows で,コマンドプロンプトを実行.
      2. 「cd」コマンドで,先ほど作成した作業用ディレクトリに,カレントディレクトリを移動.
      3. Web サーバを稼働させる

        次のコマンドを実行.

        python -m http.server 80
        
    5. 試しに,Webブラウザで表示してみる.
      1. Web ブラウザで次のURL を開く

        http://localhost/a.html

        * カメラの使用の許可についての表示が出た場合には許可する.

      2. カメラ画像が現れるので確認する.
    6. 今度は,次の URL から,マーカー画像 hiro.png をダウンロードし,パソコンの画面に表示する.

      https://github.com/AR-js-org/AR.js/blob/master/data/images/hiro.png

    7. 先ほどの HTML ファイルでは,マーカーを「hiro」に設定していた.

      カメラで,マーカー画像 hiro.pngを撮影すると,箱が現れるので確認する.

    オブジェクトデータの作成(Blender を利用)

    .obj 形式ファイル,.mtl 形式ファイルを準備する. できたファイルは次のとおりである.

    ここでは,Blender を用いる.

    Windows でのBlender のインストールは,別ページ »で説明

    Blender の使い方については,別ページ »にまとめ

    1. Blender でオブジェクトを編集
    2. 「ファイル」→「エクスポート」「→Wavefront (.obj)」 と操作する.
    3. ディレクトリ(フォルダ)名と,ファイル名を指定して, 「OBJ をエクスポート」をクリック.
    4. .obj 形式ファイル,.mtl 形式ファイルができるので確認する
  5. .obj 形式ファイル,.mtl 形式ファイルは, 作業用のフォルダ(ディレクトリ)にコピーする.

    HTML ファイルの作成

    いま作成した作業用のフォルダ(ディレクトリ)に, b.html のようなファイル名で保存する.

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
        <title>marker AR</title>
        <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
        <!-- we import arjs version without NFT but with marker + location based support -->
        <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
      </head>
    
      <body style="margin:0px; overflow:hidden;">
        <a-scene embedded arjs>
          <a-marker preset="hiro">
            <a-entity
              position="0 0 0"
              scale="0.5 0.5 0.5"
              obj-model="obj:url(./a.obj); mtl:url(./a.mtl)">
            </a-entity>
          </a-marker>
          <a-entity camera></a-entity>
        </a-scene>
      </body>
    </html>
    

    Web で表示

    1. Web サーバを稼働させる

      もし,Web サーバが稼働していなければ,次の手順で稼働させる.

      1. Windows で,コマンドプロンプトを実行.
      2. 「cd」コマンドで,先ほど作成した作業用ディレクトリに,カレントディレクトリを移動.
      3. Web サーバを稼働させる

        次のコマンドを実行.

        python -m http.server 80
        
    2. 試しに,Webブラウザで表示してみる.
      1. Web ブラウザで次のURL を開く

        http://localhost/b.html

      2. 次の URL から,マーカー画像 hiro.png をダウンロードし,パソコンの画面に表示する.(先ほどと同じ画像である)

        https://github.com/AR-js-org/AR.js/blob/master/data/images/hiro.png

      3. 先ほどの HTML ファイルでは,マーカーを「hiro」に設定していた.

        カメラで,マーカー画像 hiro.pngを撮影すると,3次元オブジェクトが現れるので確認する.

      4. マーカーを大きく表示すると,3次元オブジェクトも大きく表示される.

        マーカーの場所,大きさ,傾きの応じて3次元オブジェクトが表示される.