TC テクスチャ交換スクリプト

これは,VRMファイルのテクスチャを交換するjavascriptです。 VRoidモバイル や VRoid studio などで作成したVRMファイルからテクスチャを取り出したり, PNGファイルやJPEGファイルをテクスチャとして組み込んだりすることができます。 最新版では,Emission,Normal map,Matcapテクスチャの設定ができ,module化して安定になりました。 やりたかったこと一通り入れちゃったので,バグ修正とか以外,これが最終版になります。 スクリプトは,Webブラウザの上で動いていますので,サーバ側にVRMファイル等は送信されません。

最新版スクリプト(20231008)(VRoidHubと同じライブラリ)

前の版スクリプト(20230919)

前の前版スクリプト(20230820)

amazon ほしいものリスト

最新版スクリプトの使い方

  1. VRMファイルの読み込み
    VRoid studioやモバイル等で作成したVRMファイルを読み込みます。 「VRM: ファイル選択」で選択するか,ウインドウにVRMファイルをドラッグ・ドロップしてください。
  2. テクスチャの選択
    「Images」ボタンを押すと,VRMファイルのメッシュのサムネイルが表示されます。 編集したいテクスチャを使っているメッシュのクリックするとマテリアルのサムネイルが表示されます。 マテリアルのサムネイルをクリックすると,テクスチャのウインドウが開きます。
  3. テクスチャウインドウ
    テクスチャのウインドウには,5つくらいのテクスチャが表示されています。 Mainテクスチャが明るい部分の色のテクスチャで,Shadeテクスチャは影色です。 赤字でSharedと書かれている場合は,Mainテクスチャを色変えして影色を与えている場合です。 Emissionテクスチャは,発光色のテクスチャです。Emissionテクスチャは暗いところでも暗くなりません。 Normal mapは面の方向を表すテクスチャで,Matcapは擬似的な反射光のテクスチャです。 Normal mapとMatcapで高度な質感を表現できます。
  4. テクスチャの読み出し
    「Export」のボタンをクリックすると,テクスチャが読み出され,ファイルに保存できます。 ファイル名は,VRMファイル内に登録された名前になります。
  5. テクスチャの書き込み
    「Import」ボタンを押すと,ファイル選択画面になります。 新しいテクスチャファイルを選択するとVRMに読み込まれ, テクスチャウインドウが更新されます。
  6. UV Anime の設定
    テクスチャウインドウの下の方にある「UV Anime」のX,Y,Rotに数値を設定すると, テクスチャの表示位置が横スクロール,縦スクロール,回転します。 テクスチャやメッシュとの組み合わせで,種々のアニメーションが楽しめます。 回転する例, 色が変わる例, 複雑な動きをする例
  7. 透過テクスチャの設定(VRM0.0のみ)
    「Transparent:」のセレクタで透過テクスチャのモードを変更できます。 通常のテクスチャでは,「Alpha Cut」に設定され,アルファチャネルが0.5未満の部分は表示されません。 「Alpha Blend」では,Mainテクスチャのアルファチャネルの不透明度が適用されます。 「Alpha Blend ZWrite」では,Zバッファ(奥行情報)を使って,奥のものが表示されなくなります。 ZWriteは使わない方がよいと書かれていることが多いですが,影響などを確認して使用してください。 「Alpha Blend Layered」は,表裏のレイヤーでQueueを設定できるもので,Uni-VRMやBlenderにはないRingo独自の選択肢です。 複数の透過テクスチャを使った場合の重なりの問題を解決できる可能性があります。 設定方法が特殊なだけで,出力したVRMファイルは,VRM0.0規格のファイルですので, BlenderやUni-VRMを使ったアプリで普通のVRMとして使えます。 詳しい仕組み等は,fo-taさんの 「デザイナーのための半透明の描画順」を参照してください。 Queueは描画する順番で,最初に不透明「Alpha Cut」なテクスチャを描き,次に小さな数字の「Alpha Blend」テクスチャから順に描画されます。 「Alpha」は不透明度で,調整すると不透明なテクスチャでも半透明にすることができ, 「Apply to Texture」でMainテクスチャのアルファチャネルを調整できます。
  8. VRMファイルの書き出し
    「File」のボタンを押すと,ファイル情報のウインドウが表示されます。 「Export」のボタンを押すと更新されたVRMファイルを保存できます。 ファイル名は,「new VRM.vrm」となり,ブラウザによりますが,ダウンロードなどのフォルダに保存されます。

旧版3Dプレビュー付きスクリプトの使い方

  1. VRMファイルの読み込み
    VRoid studioやモバイル等で作成したVRMファイルを読み込みます。 「VRM: ファイル選択」で選択するか,ウインドウにVRMファイルをドラッグ・ドロップしてください。
  2. テクスチャの選択
    「Show Images」ボタンを押すと,VRMファイルの内のテクスチャ一覧のウインドウが表示されます。 テクスチャをクリックすると,新らしいウインドウが開き,クリックしたテクスチャが表示されます。
  3. テクスチャの読み出し
    「Export Image」のリンクをクリックすると,テクスチャが読み出され,ファイルに保存できます。 ファイル名は,VRMファイル内に登録されたイメージの名前になります。
  4. テクスチャの書き込み
    「Import Image ファイル選択」で新しいテクスチャファイルを選択すると VRMをファイルに読み込まれ,3Dプレビューが更新されます。
  5. UV Coordinates (Auto Animation) の設定
    「UV scroll」のXとYに数値を設定すると,テクスチャの表示位置が横および縦方向にスクロールします。 テクスチャやメッシュとの組み合わせで,種々のアニメーションが楽しめます。 回転する例, 色が変わる例, 複雑な動きをする例
    *現時点で,この機能は3Dプレビューなしスクリプトには実装されていません。
  6. VRMファイルの書き出し
    「Export VRM」のボタンを押すと,VRM更新されたVRMファイルを保存できます。 ファイル名は,「new VRM.vrm」となり,ブラウザによりますが,ダウンロードなどのフォルダに保存されます。

スクリプト(20230904)

スクリプト(20230820)

スクリプト(20230809)

スクリプト(20230805)

スクリプト(20230117)

旧版3Dプレビュー付きスクリプトの実行

旧版3Dプレビューなしスクリプトの実行


2023 Ringo🍎🍎🍎, @ringo3apples, All right reserved.