フィギュアにカッコいいエフェクト付けたい…..！

なるべく煩雑でない方法でもってフィギュアにエフェクトを重ねて表示する方法について、今回お伝えしようかと思います。これをご覧の皆様にもぜひ日曜大工的お手軽クリエイティブを楽しんで頂けますと仲間が増えたような気持がして嬉しくなれますのでよろしくお願いします。

それではまず、題にあるWebARの8thWallとはなんぞやというところから、知識が一切ない人向けに非常にわかりやすくかつ詳しく説明しているweb記事を紹介。

【8th Wallとは】使い方や活用メリット・コスト感まで徹底解説！を読んで知っておこう

今回作品を制作するにあたって、上の記事からお伝えしたい事を3点、かいつまんで挙げるとするなら

１．Web上で動作するARアプリケーションの開発ツールだよ
２．作るのカンタンだよ
３．ブラウザとカメラさえあれば鑑賞できるので普段見る気ない人にも見てもらいやすいよ

以上３点です。

用意するもの

・フィギュア
・マーカーを貼り付ける円柱
・フィギュアの3Dモデル
・PC
・スマホ
・プリンター、紙

フィギュア

お気に入りのフィギュアを用意しましょう。

マーカーを貼り付ける円柱

読み取り部分になります。フィギュアの台座の下に設置します。
マーカー表面に影が落ちたり光の反射が起こったりしないように、相応しい径の円柱をご用意ください。ペットボトルを輪切りにした切れ端を黒塗りにすれば十分目的は果たせるでしょう。

フィギュアの3Dモデル

フィギュアをスマホで3Dスキャンしたりして用意しましょう。用意した後、何らかの方法で.glbに変換する必要があります。blenderに読み込めばそこから.glbエクスポートできます。

PC、スマホ、プリンター、紙

最低限制作に必要です。
プリンターと紙はARのターゲットの作成に使います。色が正確でないと認識制度が低下するため、お持ちのプリンターの性能に自信が無ければコンビニプリントをお勧めします。

制作したプロジェクトとその解説

全体の構成。

画像の上から一つずつ、追って解説してきます。

１．head.html

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

<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>

初め三行はA-Frameフレームワークを使用していたサンプルプロジェクト複数に共通していた部分をコピペしています。最後の一行はアニメーションの再生に必要です。↓それを解説した記事様

２．app.js
タップして何かを再生したり、シークバーを付けたり、アプリケーションに何らかの機能を与える際に記述が必要となる部分ですが特にこだわらないため空白です。

３．body.html

<a-scene
  landing-page
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement: true; physicallyBasedRendering: true;"
  xrweb="disableWorldTracking: true">

  
  <!-- アセット読み込み -->
  <a-assets>
    <!-- フィギュアの３Dモデル -->
    <a-asset-item id="occuluder" src="./assets/Models/occuluder.glb"></a-asset-item>
    <!-- エフェクトの３Dモデル×２ -->
    <a-asset-item id="fire01" src="./assets/Models/fire01.glb"></a-asset-item>
    <a-asset-item id="fire02" src="./assets/Models/fire02.glb"></a-asset-item>
  </a-assets>

  <!-- カメラとライトの無難な設定 -->
  <a-camera position="0 1 1"></a-camera>
  <a-light type="directional" intensity="1.5" position="0 1 0"></a-light>
  <a-light type="ambient" intensity="0.25"></a-light>




  <!-- アセット呼び出し -->
  <xrextras-named-image-target name="basetarget">
 
    <a-entity 
      gltf-model="#occuluder"
      xrextras-hider-material
      position="0 0 0"
      scale="0.27 0.25 0.27"
      rotation="0 0 0">
    </a-entity>
        
    <a-entity 
      gltf-model="#fire01" 
      position="-1 1.7 -1"
      scale="0.4 0.4 0.4"
      rotation="0 0 160"
      animation-mixer="loop: repeat">
    </a-entity>

    <a-entity 
      gltf-model="#fire02" 
      position="0.4 1.8 -0.6"
      scale="0.4 0.4 0.4"
      rotation="0 0 90"
      animation-mixer="loop: repeat">
    </a-entity>
    
  </xrextras-named-image-target>  

</a-scene>

本体です。
用意したアセットをa-assetsでシーン上に読み込み、a-entityのタイミングでそれらを呼び出し働かすことができます。非常に単純な処理です。

「a-entity gltf-model="#occuluder"」の中にある「xrextras-hider-material」。コレによって、そのモデルが透明になり且つフィギュア後ろ側に配置した物が隠されます。これが無いと、フィギュアの後ろ側にあるはずのエフェクトが最前面重ねて表示されることになります。
「#fire01」、「#fire02」を呼び出す呪文の中にある「animation-mixer="loop: repeat"」。言わずもがなアニメーションのループです。

更にイメージターゲットをアップロードして…（~24:45解説）

あとは3Dモデルそれぞれの位置、回転、サイズを作品とにらめっこしながら調整します。したものが記事冒頭にも添付したこちら。

動画URL

最後に

いかがでしたでしょうか。個人的に鑑賞したり、コミュニティで披露することのお役に立てておりましたら幸いです。
ここまでご覧いただきありがとうございました。