でん⚡きかいでんのブログ

電子工作、ミシン、ペンタブレット、で使える、アイデア・材料・道具の紹介。PCデータのわかりやすいバックアップ方法。こだわり系テンキーレス有線キーボードの使用感レビューなど。

正当なCSSです! クリエイティブ・コモンズ・ライセンス表示

2021.11.01 [月]

Unity, texture, Transparent, png, material, 透過、割り当て、手順

Unity を触り始めてまだ1週間くらいなので、忘れないように書き残しておきます。



【使用バージョン】

  • Unity : 2020.3.21f1
  • uniVRM : 0.87.0_9425


透過pngテクスチャをUnityで使う手順

透過PNGテクスチャだけがそのままでは表示されないので、Unity上で新たに透過(transparent)マテリアル(material)を作って、そこに透過PNGテクスチャを割り当てる。

という作業になります。





作業手順の画像付き詳細説明

niwatori002.png


  1. まず透過PNGテクスチャを用意します。
  2. 3Dモデラーソフトで透過PNGテクスチャを使用したブツを作ります。
  3. unity002.jpg

  4. それをFBX形式で保存します。
  5. 次にUnityを起動します。
    いま作ったブツ(FBXファイル)をUnityのASSETSへドラッグ&ドロップします。
  6. 使用したいテクスチャもすべてASSETSへドラッグ&ドロップします。
  7. unity003.jpg

  8. ASSETSへ入れたブツ(右側に三角の矢印のような物が付いてる)をつかんで、左上のヒエラルキーの枠の中にドラッグ&ドロップします。
  9. unity004.jpg

  10. すると、透過してないテクスチャはそのまま表示され、透過PNGの部分だけベタッとした表示になります。
  11. unity005.jpg

  12. 次に、新規にマテリアルを作ります。
    ASSETS内の何も無い場所で右クリックして、「作成」→「マテリアル」をクリックします。
  13. unity007.jpg

  14. ASSETS内に「New Material」が作成されます。
  15. unity008.jpg

  16. 次はこのNewMaterial に透過の設定をしていきます。
    画面右上の「インスペクター」内で設定してもいいですし、NewMaterialを右クリックしてプロパティから同じ画面を開いて設定することもできます。
  17. unity009.jpg

  18. 「Shader」「Standard」になっているのを、「Unlit」「Transparent」と選択します。
  19. unity010.jpg

    unity011.jpg

  20. 「Shader」が「Unlit/Transparent」となるので、
    その右側あたりの、「なし(テクスチャ) 選択」をクリックします。
    ここで透過PNGテクスチャを選択します。
  21. unity012.jpg

  22. ここでテクスチャを選択して、「New Material」に割り当てることができます。
  23. unity013.jpg

  24. クリックした瞬間に、ASSETS内のNewMaterialの見た目が変わります。
    これは球体にテクスチャが貼られた状態のサムネイル画像ですね。
    インスペクターの下部にも似たような表示があると思いますが、こっちの画像は切り替えて確認することができます。
  25. unity014.jpg

    unity015.jpg

    unity016.jpg

    unity017.jpg

  26. そして今作ったNewMaterialをマウスでつかんで、その上の画面(シーン)のブツの割り当てたい面へ直接ドラッグ&ドロップします。
    一瞬で表示が変わります。
    別の面に持っていっても割り当てることが可能です。
  27. unity018.jpg

  28. ボーン設定などをしてある「HumanoidType」としてインポートしていた場合はここからuniVRMでエクスポート作業に入れます。
    今回は手順確認のために作ったブツなので「GLTF」としてエクスポートします。
    GLTF(glb形式)ファイルはWindows10なら付属の3Dビューワで見ることもできますし、VRM Live Viewer にドラッグ&ドロップすれば「背景モデル(3D)」として使用することも可能です。
  29. unity019.jpg

    unity020.jpg

  30. GLTFでエクスポートする場合、「ExportSettings」で「Inverse Axis」を「X」にしておかないと、前後が逆に表示されます。
  31. unity021.jpg

    unity022.jpg

    unity023.jpg



  • この情報がお役に立ちましたら、拍手を1クリック頂けるとありがたいです。
  • BOOTHにてVRM Live Viewer 用の3Dファイル(無料版多数有り)なども配布していますのでよろしければお役立て下さい。


関連記事

« NEW  | HOME |  OLD »

コメント

コメントの投稿


「コメント非表示」管理人しか閲覧できないコメントにする。

 | HOME |