More than 1 year has passed since last update.

CYBIRDAdvent Calendar 2022

@ayany0_zzZin

CYBIRD

AR.jsを使って恐竜を家に呼んでみた

Last updated at 2022-12-08Posted at 2022-12-08

はじめに

こんにちは！今回初参加させていただきます。
CYBIRD Advent Calendar 2022、9日目担当の@ayany0_zzZです！
前回は@moffunnyaさんの「Terraformを使った環境構築入門（AWS）」でした。

初めての投稿なので、お手柔らかにお願いいたします…！

自己紹介

私は、2022年にサイバードに新卒入社いたしました。
ドキドキワクワクの研修期間を経て、現在はイケメン王子~美女と野獣の最後の恋~のクライアント兼サーバーエンジニアとして開発に携わらせていただいております！
ちいかわとポケモンとゲームが大好きなひよっこエンジニアです

最近ではポケモン最新作「ポケットモンスターバイオレット」で、色違い集めに励んでいます。
目標は、1BOXを色パチリスで埋めること です！　
どうぞ、よろしくお願いいたします！

概要

ポケモンSVに影響されて、"現実世界にはもう存在しない何か" を現実世界に召喚したいと思ってしまいました。

ですので今回は、~~コライドn~~ 恐竜の皆様を
「AR.js」で
現実世界（私の家）に召喚したいと思います！

開発環境

macOS Monterey（バージョン12.1）
Apple M1 Proチップ搭載

必要なもの

Blender
phpが使えるWebServer

ドキュメントルートのフォルダ構成

Index.html
AR.php
glbフォルダ（3Dモデルを入れるフォルダ）
- XXX.glb
Imagesフォルダ
- XXX.jpeg
pattern-marker.png
pattern-marker.patt

Index.htmlで召喚したい恐竜の画像を表示し、選択後にAR.phpが呼ばれてARのメイン処理が走るイメージです。

個体準備編

今回は、みんな大好きティラノサウルスくんを用意したいと思います。

3Dモデルの用意

立体的な子を呼び出したいので3Dモデルでの実装をしたいのですが…
モデリングができないので、以下の無料アセットを使用させていただきました

拡張子をglbにしたいので、Blenderを使用して変換していきます。

Blenderで諸々調整

Blenderを開いて、元々置いてあるキューブを削除。
ファイル→インポート→FBX(.fbx)で先程ダウンロードしたfbx形式のティラノさんをインポートします。

クリック

わ〜！！出てきた！なんか消しゴムみたいで可愛いですね！
色がついていないので、3Dビューのシェーディング（枠内のボタン）を右から2番目のマテリアルプレビューモードに変更します。

クリック

テクスチャが反映されると恐竜さが増しますねえ…！
ちなみに、ティラノサウルスさんは声帯がなくて吠えることはないみたいです。

…ジュラシックパークを見たくなってきたところで、しっかりと保存します。
ファイル→エクスポート→gTF2.0(.glb/gltf)でglb形式で保存し、glbフォルダに格納！

個体の用意が完了しました〜！

おまけ

【Blenderでjpeg画像を作成する方法】

まず、カメラを選択します。
左部のツールを使って、画像のように撮影したいオブジェクトを四角の中に収めます。
枠内をクリックして、カメラビューに切り替えます。

クリック
レンダー→画像をレンダリングで、Blenderレンダーを開きます。

クリック
画像→名前を保存で開かれたウィンドウに、ファイル名を入力して保存します。
このとき、jepg形式でimagesフォルダに格納しました。

できた画像がこちら！

迫力置いてきちゃった…。

召喚編

ここからスクリプトを書くなどします！
後少しで "現実世界にはもう存在しないティラノサウルス" がお家に…！ワクワク
それではスタート！

Webサーバーの準備

AR.jsはWebでARを実装できるソフトウェアなので、まずは実装するための環境を整えます。
今回はApacheを使用してサーバーを準備しました！

今まではWeb Server for ChromeでWebサーバーを立てていたのですが、phpに対応していませんでした
本当はHTMLだけでも実装できるみたいなのですが、なぜphpにこだわるかというと「今後同じページから違う3Dモデルも表示できたらいいな〜」と思ったからです。
初めてのApache、macOSに標準搭載されているなら安心だよね！私にもできるよね！

httpd.confを編集してドキュメントルートを設定後、以下の起動コマンドをターミナルで打ってみました。

$ sudo apachectl start

結果…

おっ、表示されました。ヤッター！
じゃあ次はphpが本当に動くのか、確認します。

…え？なんで…？

調べた結果、以下のようなことがわかりました。

macOS　Monterey以降はphpがバンドルされなくなった関係で、Homebrewを使ってphpを別途インストールする必要がある

macOS標準のApacheは、Homebrewでインストールしたphpを受け付けない為、Homebrewを使ってhttpdを別途インストールする必要がある

えぇ…そんなことある…？

Homebrewはインストールしてあったので、上記2点のインストールと諸々の設定をして無事にphpを使用できるようになりました。
この記事ではその経緯は割愛させていただきますが、割と苦労したので後日備忘録として投稿できたらなと思います…。

この画面が表示されたらOKです。

マーカーの作成

次は、ARを認識させるための画像ファイルとpattファイルを作成します。

こちらのサイトのDOWNLOAD MARKERをクリックしたら、pattファイルが簡単にダウンロードできました

同じようにDOWNLOAD IMAGEをクリックして、画像ファイルもダウンロードします。

上記2つをドキュメントルートのフォルダに格納して完了です。
私はデフォルトのマーカーを作成しましたが、オリジナルのマーカーを作成することもできるみたいです！すごい！！

あっ、ここで画像ファイルを印刷しておくといいと思います

プログラミング

まずは、Index.htmlからやっていきます

Index.html

<html>
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    	<title>AR</title>
    </head>
    <body bgcolor="#464646">
    	<div style="float:left; margin:2px;"><a href="ar.php?id=0"><img src="images/t_rex.jpg" /></a></div>
    </body>
</html>

やっていることとしては、主に以下です。

ティラノサウルスの画像を表示
└画像を表示するために、予めそれぞれの画像をimagesフォルダに格納

画像をクリックしたらARで表示できる ようにしたいので、ar.phpを呼び出せるようにリンクの埋め込み

画面はこのような感じになっています。
ぽつんとティラノになってしまいましたね！

次に、AR.phpでメイン処理を書いていきます。

AR.php

<?php
	$glb_list[]=array("path" => "glb/t_rex.glb", "rotation" => "0 0 0", "scale" => "30.0 30.0 30.0");

	$id=0;
	// [ user.php ]
  	if(isset($_GET['id'])) {
		$id = $_GET['id'];
	}

	$glb_path=$glb_list[$id]["path"];
    $glb_rotation=$glb_list[$id]["rotation"];
	$glb_scale=$glb_list[$id]["scale"];
?>

<html>
	<head>
		<meta charset="utf-8">
      	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
      	<title>AR</title>

		<!-- A-Frame ライブラリの読み込み -->
  		<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  		<!-- AR.js ライブラリの読み込み -->
  		<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    </head>
    <body>
		<div>
		<a-scene embedded arjs="debugUIEnabled:false; sourceType: webcam;" vr-mode-ui="enabled: false;" renderer="gammaOutput:true;" >
   			<a-assets>
   				<a-asset-item id="poke" src="<?php echo $glb_path ?>"></a-asset-item>             
   			</a-assets>
            <!-- a-markerのtypeにpatternを設定, 作ったpattファイルのパス指定 -->
      		<a-marker preset='custom' type='pattern' url="pattern-marker.patt">                            
   	    		<a-entity gltf-model="#poke" position="0 0 0" rotation="<?php echo $glb_rotation ?>" scale="<?php echo $glb_scale ?>" ></a-entity>
   	    	</a-marker>
   	    <a-entity camera></a-entity>
		</a-scene>
		</div>
	</body>
</html>