top of page

ARをつくろう

自作MMDモデル…現実に召喚したくない…！？した～い！！

モーションなどいらぬ。ただこの場に出てきてくれればよいという方向け自分用覚書です。

blenderのこと最低限しか分からないのでおしえてください。

ARってどんななるん？って方はこちら。



 

【必要なもの】

・自作モデル：配布モデルは規約アウトかかるだろうから自作モデルでやろうね

・Blender：Android対応→なんでもOK、iOS対応→Ver3.5以上

・mmd_tools（Blenderアドオン）：モデリング環境がBlenderじゃない人のみ

・PMXE/PMDE：Blender分からなくて極力知ってる環境で作業したい人のみ


 

【Blender分かるマン向けモデル準備】

・モデルを読み込み、剛体とジョイントを全削除。テクスチャ名はアルファベットにしておく。

　ポーズをつけたい場合はつける。



【Blender分からんマン向けモデル準備】

1.PMXE/PMDEで剛体とジョイントを全削除。テクスチャ名はアルファベットにしておく。 2.同じ質感・テクスチャの材質は結合しておく。ポーズをつけたい場合はつけてpmx保存。

3.Blenderをインストールしてmmd_toolsを入れる。方法はググってください。

4.Blenderのこれら↓をDeleteで消し、ファイル→インポート→.pmd/.pmxでインポート。


5.視点移動（①）して、モデルに合わせる。白モデルからテクスチャ反映に切り替え（②）。

6.コレクション下層の「〇〇_mesh」（③）を選択し、マテリアル（④）から材質を選択（⑤）。

7.サーフェス（⑥）を「プリンシプルBSDF」に切り替える。

8.ベースカラー（⑦）の黄丸を押して「画像テクスチャ」を選び、開く→テクスチャ指定。

下部、メタリックから下の数値で質感が変更できます。試行錯誤しよう！


9.透過のない材質は、ブレンドモードと影のモードを不透明に変更する。

透過材質は、ブレンドモードをアルファブレンド、影のモードをアルファハッシュに変更し、

アルファの白丸を押して「画像テクスチャ」を選び、開く→テクスチャ指定。


 

【対応形式にエクスポート】

AndroidとiOSではARの対応形式が違うため、必要に応じた形式にエクスポートする必要があります。

赤で囲っているところ以外は触らずでOK。

・Android（.gltf）

　ファイル→エクスポート→glTF2.0（.glb/.gltf）

　フォーマットは.gltfを選び、エクスポート。

・iOS（.usdz）

　Blender3.5からusdzエクスポートに対応！それまではunityを通るなどする必要があったようです。 　ファイル→エクスポート→Universal Scene Description（.usd*）

　.usdcを.usdzに書き換えてエクスポート。


 

【スマホに召喚】

gltf/usdzデータをなんらかの方法でスマホに移動。メール添付とかでもいけます。

iPhoneではデータを選択するとARが自動で起動します。完成！

Androidは不明！

 

【万人に公開したい人向け】

※ARの性質上、モデル配布よりも広い範囲での配布の形になると思うのでご注意ください。他人のモデルだと改変・再配布扱いになります。普通にMMD以外での使用にもなります。


googleさんのmodel-viewerを利用します。特に登録の必要などはなし。

HTMLが書けてファイル形式gltfとusdzをアップロードできる自サイトが必要。 Wix（ここ）は難しそうです（model-viewerを使わず無理やり読み込ませることは可能）。

FC2はできました（参考ページ）。


サイトにgltf、usdzをアップロードし、HTMLに下記を貼り、ハイライト部分を適宜編集する。

と、参考ページのような形になるかと思います。

ページに表示されるモデルはgltfですが、AR利用の際は閲覧者の環境により自動で対応拡張子が読み込まれます。

あとは好きにデコろう！ちなみに、model-viewerのカスタマイズはこちらが分かりやすかったです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ページ名</title>
  </head>
  <body>
   <script 
       type="module"
       src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
   </script>
   <model-viewer  
       ar 
       alt="モデル名など" 
       src="ファイル名.gltf"
       ios-src="ファイル名.usdz"
      style="width:600px;height:800px;"             
      background-color="#ffffff"
      shadow-intensity="1"
      camera-controls
      interaction-prompt="auto"
      auto-rotate ar magic-leap>
   </model-viewer>
  </body>
</html>

 

たのしいARライフを～！

Comments

bottom of page