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

AR/VR

はじめに

Wedding ITとは

【Wedding×IT】(ぱーと0)企画始動~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】アメイジングエクシア【モデル配布】 俺、ガンダムになりました。ダウンロード:次回:ガンダムハルート...

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

file

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

file

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

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

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

file

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

file

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

file

欠損ファイルの修正

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

blenderでpmxを取り込んだ時に色がおかしい[MMD]|神楽ゆのん
pmxデータをblenderにインポートするとなんか紫がかった色になってしまうことありませんか? ゆのんはこれの原因がわからずかなりの時間悩んでました… しかし!原因は明確&修正も簡単な現象だったのです!!! 【原因】 マテリアル内にある「ToonTex」のデータが欠けてる 解決方法を見ていきましょう。 【1】p...

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

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

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

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

file

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

file

後は,外部ファイルを読み込ませます.

file

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

file

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

file

マテリアルの調整

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

file

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

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

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

file

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

file

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

file

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

file

Glitchへの導入

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

file

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

file

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

file

<!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>

アメイジングエクシア降臨

若干のサイズ調整と回転をして,無事に降臨させることができました.

file

文字入れ

テキストのオブジェクトを作成します.

file

ジオメトリやフォント,フォントサイズを変更していい感じに仕上げます.

file

仕上げた結果こんな感じになりました.

file

無事にgltfファイルになったのを確認したら

file

再度,Glitchへアップロードして,コードを修正します.

その結果がこちら,エクシアに祝ってもらうことができました!!

file

おわりに

次回は,ご祝儀袋もガンダムにしようと思い,袋を自作していこうと思います.

コメント

タイトルとURLをコピーしました