【Wedding×IT】(ぱーと5)ご祝儀AR～ガンダムエクシア導入編～

はじめに
必要なもの
ガンダムエクシア導入
欠損ファイルの修正
マテリアルの調整
Glitchへの導入
アメイジングエクシア降臨
文字入れ
おわりに
- 関連

はじめに

Wedding ITとは

エンジニアの夫婦が結婚式をすると．．オープニングムービーではUE5を使ったフルCG プロフィールムービーではプロジェクションマッピング余興ではメイキングムービーなど，IT技術を駆使したコンテンツが目白押しになります．このようにWedding（結婚式）とIT技術を駆使したものを「Wedding IT」と呼んでみます．これらのやり方を紹介したいのは山々なんですが，まずは「お返し」に関してIT技術を駆使したものを作成しようと思います．

お返しの封筒にARマーカーを付与してみたいので必要な技術を習得中です．

前回は，お返しの封筒にARマーカーを付与してみました．

【Wedding×IT】(ぱーと4)お返しAR～自作モデル編～

前回は，GlitchやARマーカー，自作ARマーカーの使い方を学んでいました．今回は，それらの知識を活かして，自作モデルの作り方をやっていこうと思います．

今回は，それらの知識を活かして，ご祝儀にガンダムが出現するARマーカーを作っていこうと思います．
飛び出すモデルは友人が大好きなガンダムエクシアでいきます．

ちなみに無料で実践できます．

必要なもの

Glitch
(前回のファイル)
AR.js
Blender(mmd_tools必須)

ガンダムエクシア導入

こちらのサイトからダウンロードしてきました．

【MMD】アメイジングエクシア【モデル配布】

【MMD】アメイジングエクシア【モデル配布】俺、ガンダムになりました。ダウンロード：次回：ガンダムハルート...

ダウンロードしてくるとこんな感じになっており．

PMXファイルが入っています．

しかし，デフォルトのBlenderではインポートできないので，mmd_toolsが必要です．
導入方法はこちらのサイトなどが参考になります．

【Blender2.93】MMDモデルの読み込み、改造をしよう！ | CGbox

こんにちは！今回はBlenderでMMDモデルを読み込み、改造やエクスポートを行う方法についてまとめます。オリジナルのパーツやシチュエーションを製作することができるようになります！ MMDとは MMD(MikuMikuDance)とは、

mmd_toolsが導入されていると，右のツールバーからインポートが選択できます．

ツールバーからインポートしてPMXファイルを選択します．

インポートはできたのですが，問題発生です．色が紫色になってしまっています．

欠損ファイルの修正

こちらのサイトの力を得て解決しました．

blenderでpmxを取り込んだ時に色がおかしい[MMD]｜神楽ゆのん

pmxデータをblenderにインポートするとなんか紫がかった色になってしまうことありませんか？ゆのんはこれの原因がわからずかなりの時間悩んでました… しかし！原因は明確＆修正も簡単な現象だったのです！！！【原因】マテリアル内にある「...

結論から言うと，PmxEditor内臓の画像がないため，それらをダウンロードしてフォルダ内におけばOKです．

内臓のファイルはこちらからダウンロードして

ダウンロード: とある工房

ダウンロード,-

このようにtoonフォルダを設置

中身はこんな感じです．これらのファイルがないため，怒られていました．

後は，外部ファイルを読み込ませます．

こんな感じで，toonフォルダを指定すると

無事にガンダムエクシアが降臨します．

マテリアルの調整

見た目ではいい感じなので，gltf形式で出力してgltf-viewerで確認すると．．．

スケスケのエクシアになってしまっています．

恐らくマテリアルが悪さをしていると考えマテリアルを調整していきます．

色々と調べたところ，このサーフェスとブレンドモードが原因です．gltf形式ではPrincipled (プリンシプル) BSDFでないと正しく反映されないそうです．また，透けているのはブレンドモードが設定されているためです．

なので，全部のマテリアルのサーフェスをPrincipled (プリンシプル) BSDFにしてブレンドモードを不透明にすれば解決します．

ちなみに，テスクチャとの対応が外れますので，再度設定しておきましょう．

これで，無事に，エクシアをgltf形式に変換することができました．

Glitchへの導入

前回のやり方と同様に，gltfファイルをドラッグアンドドロップしてインポートしてから

インポートしたgltfファイルのURLをコピーします．

あとは，コピーしたURLをgltf-modelのところにコピペすれば準備は完了です．

<!DOCTYPE html>
<html>
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <!-- we import arjs version without NFT but with marker + location based support -->
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  <body style="margin : 0px; overflow: hidden;">
    <a-scene embedded arjs>
      <a-marker preset="custom" type="pattern" url="https://cdn.glitch.global/d60e8219-715c-4d35-9124-42984f6c1f3d/pattern-ar_marker5.patt?v=1664723363752">
        <a-entity
          scale="0.1 0.1 0.1"
          gltf-model="https://cdn.glitch.me/d60e8219-715c-4d35-9124-42984f6c1f3d/SM_AMAZING_EXIA_v3.5.gltf?v=1664980745282"
          position="0 0 1"
          rotation="0 0 0"
        ></a-entity>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>