簡単にWeb ARを制作できるとの事でAR.js studioを使ってみました
https://ar-js-org.github.io/studio/
ほんとにサクサクっと作れたのでこちらに作り方をまとめておきたいと思います。
AR.js studio 使い方
1.3Dデータ.glthの準備
2.AR.js studioの画面操作 アイコンにする画像の準備
3.AR.js studio3Dファイルのアップロード
4.エクスポートしてサーバーにアップロードするまで
1.3Dデータ.glthの準備
今回は3DCGのデータをアップロードします。
その他にも画像や動画などもアップできるみたいですが、また後で試してみたいと思います。
僕が使用しているソフトはCinema4DなのでここではC4Dでの書き出しになります。
無料の3DCGソフトBlenderでも書き出しは簡単にできます。
3Dデータを読み込みした後、エクスポートからGLTFエクスポートを選びます。
ファイルフォーマットはglTFにしてください。
GLB（バイナリ）というフォーマットだとうまく読み込みができませんでした。
ボーンアニメーションや位置・回転を使ったアニメーションも自動的にベイクして反映できるみたいです。
両方とも試しましたがうまくいきました！
2.AR.js studioの画面操作 アイコンにする画像の準備
AR.js studioの画面にログインし、マーカーベースを選択 開始するをクリックします。
位置情報ベースは今回試してません。
https://ar-js-org.github.io/studio/
画像をアップロードに好きな画像をアップロードしてください。
ここで注意ですが、ロゴや太文字だけなどはっきりと分かりやすいものでないと読み込みしない場合があります。
アップロードできたらマーカーをダウンロードしてください。
3.AR.js studio3Dファイルのアップロード
1で作ったglTFファイルをアップロードし、一番下のパッケージをダウンロードをクリックします。
4.エクスポートしてサーバーにアップロードするまで
エクスポートしたファイルを解凍してサーバーにアップロードしてください。
ここのURLがARスタジオを起動するURLになります。
これだけで完成です！
ARを入れたサーバーのURLを開き、起動したカメラから2でダウンロードしたマーカーを読み込んでください。
自分で作ったARが起動するはずです。
なんとも簡単でシンプル！
本当はUnityを使って制作してみたかったんですが、うまくいかず、、💦
ARスタジオでこんなにすぐに作れるならしばらく使っていきたいと思います。
今回作ってみたARはこちらのQRを読み込み→カメラを許可
その後にそのままカメラでこのロゴを読み込みすると恐竜が現れます。
他にもARスタジオで動画や位置情報の読み込みなど面白いのができそうなのまた試してみます！
合同会社STORY WORKS
ぎまパパチャンネル[プロジェクションマッピング/Scratch/TouchDesingnerの使い方/VJ]
合同会社STORY WORKS代表 儀間博成
沖縄県在住 44歳
沖縄県宮古島出身。映像クリエイター／空間演出家として、合同会社STORY WORKS を率い、プロジェクションマッピング・3DCG・インタラクティブアート・3Dビジョンなど多彩な映像表現を手がける。
歴史ある城跡やイベント会場、飲食店、日本各地の建物で映像演出を担当し、空間に“物語”を映し出す制作を追求。技術と感性を融合した作品で観客の想像力をかき立てる。
33歳で個人事業ONE ACTIONとして独立
世界遺産中城城跡や沖縄体験王国むら咲むらプロジェクションマッピング制作
東京築地本願寺ではアーティスト含むイベント[TOKYO CHEMISTRY]にてプロジェクションマッピング映像を担当
東京渋谷のレストランへ常設のテーブルプロジェクションマッピングを導入
マニラの飲食店壁面へプロジェクションマッピング導入
2025/02/14合同会社STORY WORKS設立
EXPO2025 プロジェクションマッピング[関西大阪万博]
その活動は映像制作だけにとどまらず、絵本制作はぐるま島ココロのひみつ/イベント企画/子供プログラミング教室/YouTuberなど幅広く手がける
No responses yet