8th Wall で顔出しパネルを作成する

この記事を読んでできること

Niantic社の提供する 8th Wallを使って、バーチャル顔出しパネルを作成します。

前提

必要なスキル

• 8th Wallの基本操作を理解している(コード編集、素材アップロード、ビルド、公開)
• 画像加工の基礎スキルがある(透過PNGファイルを用意できる)

事前準備

• 8th Wallのアカウントを作成済であること
• 顔だしパネル用の画像を用意する

動作要件

スマホのカメラで撮影する前提です。8th Wallのシステム要件は次の通りです。

• iOS：
  • Safari (iOS 11+)
• Android：
  • Chrome
  • Firefox
  • Samsung Internet
  • Microsoft Edge

詳細は下記ページを参照してください。（私は普段使いのブラウザがBraveで、うまく動作しなかったためしばらくハマっていました…）

顔出し用の画像作成

なにはなくとも、まずは顔出し用の画像を用意します。画像の形式は顔はめ部分を透過しますので、pngに変換してください。
こちらのサンプルはWindowsのペイントで作成したのですが、Qiitaに投稿すると穴がわかりにくかったのでグレーで塗りつぶしてます(透過になってないです)。

プログラムの作成

プロジェクトのクローン

今回作成するプログラムの元となる下記サンプルプロジェクトから、クローンします。

クローン元プロジェクト：

こちらはお城の3Dモデルをカメラの前に表示させ、ドラッグ、ピンチアウトなどでモデルを操作できるデモです。モデルの操作処理を流用します。
こちらのサンプルにカメラ撮影機能を追加するのですが、出来合いのモジュールが用意されているので数行の追加で完成します。カメラ機能は下記サンプルが参考になります。

カメラ機能の参考プロジェクト：

編集作業

クローンが完成し、プロジェクトが立ち上がった後、必要な作業は下記２点です。

1. 画像のアップロード
2. body.htmlの編集

画像のアップロード

画面左のファイル一覧のAssets に顔出しパネルの画像をアップロードしてください。今回はpanel.pngというファイル名で作成しています。

body.htmlの編集

とりあえず、下記を貼れば動くかと思います。

body.html

<a-scene
  xrextras-gesture-detector
  landing-page
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement: true"
  xrweb="allowedDevices: any">
  
  <!-- 起動時に読込むアセットの定義 -->
  <a-assets>
    <img id="panel" src="assets/panel.png" />
  </a-assets>

  <!-- カメラ設定 -->
  <a-camera
    id="camera"
    position="0 3 5"
    raycaster="objects: .cantap"
    cursor="fuse: false; rayOrigin: mouse;">
  </a-camera>

  <!-- イメージの読み込み -->
  <a-image
    id="model"
    src="#panel"
    class="cantap"
    xrextras-hold-drag
    xrextras-two-finger-rotate
    xrextras-pinch-scale="max: 30"
    scale="2 2 1"
    position="0 3 1"
    shadow="receive: false">
  </a-image>

  <!-- 床面 -->
  <a-plane
    id="ground"
    rotation="-90 0 0"
    width="1000"
    height="1000"
    material="shader: shadow"
    shadow>
  </a-plane>

  <!-- ▼▼▼ 以下、カメラ機能の追加 ▼▼▼ -->
  <!-- キャプチャーボタン -->
  <xrextras-capture-button capture-mode="photo"></xrextras-capture-button>

  <!-- キャプチャー画像の設定 -->
  <xrextras-capture-config
    file-name-prefix="kaohame-image-"
    request-mic="manual"></xrextras-capture-config>

  <!-- キャプチャーのプレビュー -->
  <xrextras-capture-preview></xrextras-capture-preview>
</a-scene>

ソースの解説

まず、8th wall自体についての説明です。
8th wallでは通常のA-Frameに加え、主にカメラ周りの操作が拡張されています。ヘッダファイル 2行目に定義されているのが、拡張パッケージのxrextrasです。

head.html

<meta name="8thwall:renderer" content="aframe:1.3.0">
<meta name="8thwall:package" content="@8thwall.xrextras">
<meta name="8thwall:package" content="@8thwall.landing-page">

こいつが曲者で、8th wallの公式ドキュメントを探しても、まともな説明がなされていません。サンプルなどを見て回るうちに、githubのREADMEにパラメタ解説がありました。
ソースの各所にxrextras-のついた要素、属性が出てきますが、詳しくは下記を参照してください。

続いてbodyソースの各部を見ていきます。まずは最初の<a-scene>からです。

<a-scene
  xrextras-gesture-detector
  landing-page
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement: true"
  xrweb="allowedDevices: any">

<a-scene>要素はA-frameのソース全体を囲うタグです。
だいたい8th wallのサンプルの書き出しは上記のような感じですが、今回のサンプルではxrextras-gesture-detector属性がつけられています。これは画面タッチでの操作を行うための拡張のようです。

次に<a-assets>要素です。

  <!-- 起動時に読込むアセットの定義 -->
  <a-assets>
    <img id="panel" src="assets/panel.png" />
  </a-assets>

A-Frameでは画像、動画、3Dモデルなどを事前に定義して先読みしておくのがベターのようです。

続いて、カメラ、パネル、床面の設定です。

  <!-- カメラ設定 -->
  <a-camera
    id="camera"
    position="0 3 5"
    raycaster="objects: .cantap"
    cursor="fuse: false; rayOrigin: mouse;">
  </a-camera>

  <!-- イメージの読み込み -->
  <a-image
    id="model"
    src="#panel"
    class="cantap"
    xrextras-hold-drag
    xrextras-two-finger-rotate
    xrextras-pinch-scale="max: 30"
    scale="2 2 1"
    position="0 3 1"
    shadow="receive: false">
  </a-image>

  <!-- 床面 -->
  <a-plane
    id="ground"
    rotation="-90 0 0"
    width="1000"
    height="1000"
    material="shader: shadow"
    shadow>
  </a-plane>

以下、主要な設定について記載します。

<a-camera> 要素

• position属性
  カメラの視点を設定します。"0 3 5"はX,Y,Z軸です。サンプルでは上下位置のY軸に3、前後の調整Z軸に5を設定しています。

<a-image>要素

本プログラムでメインとなるのが<a-image>要素です。

• src 属性
  <a-assets>で指定したid=panelはこちらのsrc="#panel"と紐づきます。
• xrextras-hold-drag 属性
  ドラッグでパネルを移動できるようにします。
• xrextras-two-finger-rotate 属性
  二本指で回転できるようにします。
• xrextras-pinch-scale 属性
  ピンチアウトで拡大、縮小できるようにします。max: 30はどこまで大きくできるかの上限値です。
• scale
  画像の横、縦、奥行きのサイズ(比率)です。今回のサンプルはだいたい正方形だったので、横2、縦2 としています。
• position
  画像の表示位置です。

<a-plane>要素

床面がどちらを向いているかを定義します。画面上は描画されませんが、a-imageの xrextras-hold-drag 属性はcamera、ground に連携する仕様となっています。物体をドラッグして移動したあとに、床面に設置してとどまるようになっています。

最後に撮影機能についてです。

  <!-- ▼▼▼ 以下、カメラ機能の追加 ▼▼▼ -->
  <!-- キャプチャーボタン -->
  <xrextras-capture-button capture-mode="photo"></xrextras-capture-button>

  <!-- キャプチャー画像の設定 -->
  <xrextras-capture-config
    file-name-prefix="kaohame-image-"
    request-mic="manual"></xrextras-capture-config>

  <!-- キャプチャーのプレビュー -->
  <xrextras-capture-preview></xrextras-capture-preview>

こちらは画面に、撮影ボタン、撮影した画像に対しての設定、撮影画像のプレビューを指定しています。
画面にカメラのボタンが表示されて、タップするとブラウザ内のキャプチャが作成されます。プレビュー枠の下にダウンロードボタンが表示されるので、そちらをクリックするとkaohame-image-から始まるファイル名で端末内に写真が保存されるようになります。

動作確認

そんな感じで作成したアプリがこちらになります。

終わりに

今回のサンプルではA-FRAMEのタグ(拡張含みますが)だけで、コーディング完了です。カメラ周りは出来合いの機能が作りこまれてるので、あっさり実装できます。

ただ、某顔出しパネルマニアに見てもらったところ「自撮りしたい！」との要望があったため、最終的にフロントカメラへの切り替えも追加することにしました。そのあたりはJavaScriptやCSSをもう少しいじる必要がありますので、別で説明しようと思います。