名刺や社員証のロゴから社長が浮かび上がれば、会社紹介の際に話題作りのきっかけになるなと思い、ARを簡単に開発できるプラットフォーム「8th Wall」を使って社員証から社長の3Dモデルを表示させてみました。
社員証の上を疾走する社長
8th Wallとは
ポケモンGOで有名なNiantic社が開発した、サーバーレスかつほぼhtmlだけで手軽にWebARが開発ができるプラットフォームです。
公式サンプルが豊富で、サンプルをカスタマイズするだけで面白い表現ができるという特徴があります。
開発手順
8th Wallのアカウント作成
まずは8th Wallにアカウントを作成します。
※サーバー利用費として月額9ドルかかりますが、最初の14日間は無料で使用がきます。
ProfilNameがアクセスするURLになるためサービス名を記載するのがおすすめです。
アカウント作成が完了したら「GotoMyProjects」を押下するとProjectページに遷移します。
新規プロジェクトの作成
アカウントの作成が完了したらいよいよ開発を始めていきます。
「Start a new project」ボタンを押下してWebARを公開する時のURLとサイト名を設定します。
テンプレート選定
URLの設定が完了すると次の画面でテンプレートを選択できます。
「A-FREAME」や「Tree.js」など自分が開発しやすい描画ライブラリから選択が可能です。
「Launch」ボタンを押下するとQRが表示されどんなARか確認ができます。
今回は社員証の画像をターゲットに3Dモデルを表示させたいので、近いテンプレートの「Image Target to SLAMt」のA-FREAMEのテンプレート※を使います。
※地面の画像を認識すると椰子の木が表示され、タップするとヤシのみが落ちてくる仕様
テンプレートを選択して「Clone Project」 を押下します。
テンプレートの実装解説
テンプレートを選定すると開発画面が表示されます。
◆header.js
外部サービスやツールをimportしています。
◆app.js
physics-image-target.jsをimportしています。
◆body.html
表示する3Dモデルの情報やターゲットとなる地面の画像の情報を記載
記載されているタグ(<a-scene>や<a-entity>など)は A-FREAMのタグを使用されているため、A-FREAMのサイトを確認するとタグの使用方法が確認できます。
◆physics-image-target.js
ヤシの木の表示位置やタップした際にアニメーションが再生される実装が記載
◆Assetsフォルダ配下
body.htmlに記載されているヤシの木とヤシの実の3Dデータが配置されている
実装開始
ターゲット画像の変更
テンプレートだと地面の画像を写すと椰子の木が生えてきます。
この地面の画像(ターゲット画像)を変更していきたいと思います。
イメージは左メニューの「イメージターゲット」に設定されています。
イメージターゲットから3Dオブジェクトを表示させたい画像をアップロードします。
今回は弊社（以下、ライブリッツ社とする)のロゴの画像をアップロードします。
アップロード後に名称を設定しアップロードできたことを確認します。
body.htmlの２２行目「moon」と記載している箇所を登録した画像の名称に修正
地面の画像を変更
この時点でアップロードした画像が認識できているか確認します。
開発画面上部の「Save＋Build」ボタンを押下し修正を保存します。
保存後にプレビューを押下しQRコードを読み込んでアップロードした画像から椰子の木が生えてくるかを確認します。
うまくいっているようです！
ライブリッツ社のロゴから椰子の木が生えてごろごろヤシのみが落ちてきてますね。
ヤシの木を改良
左メニューのAsstestから3Dモデルのデータ(glb)ファイルをアップロードします。
今回は社長の3Dモデル(.fbx)があるのでこれを使用します。
mixamoからアニメーションをつけてblenderで.glbに変換しました。
ファイルをアップロードしたらbody.js 14行目 tree-palm と記載がある箇所をアップロードしたファイル名に修正します。
アニメーションがついているモデルの場合はさらに29行目に animation-mixer を追記して完成です。
完成したものはコチラ↓
Discussion