メインコンテンツまでスキップ

【効率化】glTFのモデル形式に複数のマテリアルをプリセットとして設定できるMaterial Variants拡張について

output

3Dモデルでバリエーションを表現するための方法として、glTFの仕様にあるKHR_materials_variants拡張を試してみました。

今回は、Blenderを利用して、らーめんモデルにMaterial Variantsを設定してみました。

glTF KHR_materials_variants拡張とは

glTF KHR_materials_variants拡張は、同一形状の3Dモデルに対して複数の素材バリエーションを1つのファイルで定義できる、EC向けの拡張機能です。

拡張機能の詳細は、glTF KHR_materials_variantsを参照してください。

メリット

  • ダウンロード時間の短縮: 同じ形状のモデルを複数回ダウンロードする必要がなくなるため、読み込み時間を大幅に短縮できます。
  • データサイズの削減: 重複するジオメトリデータを削減できるため、データサイズを小さくできます。
  • 効率化: バリエーション情報を単一の glTF ファイルに含めることで、複数ファイルにまたがって管理する必要がなくなります。

利用したツール・ライブラリは以下です。

  • Blender 4.2
  • PlayCanvas 2.3.3

試しに作成をしたウェブサイトはこちらです。

BlenderでMaterial Variantsを設定する手順​

1. アドオンの有効化​

まず、BlenderでglTFのMaterial Variants拡張を利用するために、アドオンを有効にする必要があります。

Blenderのアドオンを有効にする

Blenderのメニューから、編集 > プリファレンス を選択し、アドオン タブを開きます。検索バーに glTF と入力し、Import-Export: glTF 2.0 format アドオンを選択します。

このアドオンの項目を展開し、マテリアルバリアント (Materials Variants) を有効にする にチェックを入れます。

2. マテリアルバリアントの作成​

まず、オブジェクトモードで画面右側のプロパティエリアにあるマテリアルバリアントタブを開きます。

マテリアルバリアントを追加ボタンをクリックして、新しいバリアントを追加します。

醤油豚骨と味噌の2種類のバリアントを作成

3. マテリアルの設定​

今回はスープ(soup)のマテリアルを複数種類用意しバリアント設定します。

醤油豚骨(shoyu-tonkotsu)と味噌(miso-spicy)の2種類のバリエーションを作成します。

マテリアル順序を保ったまま設定、バリアントに割り当てをくりかえす

マテリアルバリアントの設定方法​

  1. 醤油豚骨 (shoyu-tonkotsu) の設定

    a. 醤油豚骨用のマテリアルを設定します。

    b. マテリアルバリアントタブでバリアントに割り当てボタンをクリックし、shoyu-tonkotsuバリアントを選択します。

  2. 味噌 (miso-spicy) の設定

    a. 味噌用のマテリアルを設定します。

    b. マテリアルバリアントタブでバリアントに割り当てボタンをクリックし、miso-spicyバリアントを選択します。

これをバリアントの数だけ繰り返します。

4. glTF形式でエクスポート​

設定が完了したら、ファイル > エクスポート > glTF 2.0 (.glb/.gltf) を選択して、モデルをエクスポートします。

5. glTFファイルの確認​

エクスポートされたglTFファイルのデータの中身には、KHR_materials_variants の設定が含まれています。

エクスポートされたglTFファイル

{
  "asset": {
    "generator": "Khronos glTF Blender I/O v4.2.57",
    "version": "2.0"
  },
  "extensionsUsed": [
    "KHR_materials_variants"
  ],
  "extensionsRequired": [
    "KHR_materials_variants"
  ],
  "extensions": {
    "KHR_materials_variants": {
      "variants": [
        {
          "name": "shoyu-tonkotsu"
        },
        {
          "name": "miso-spicy"
        }
      ]
    }
  },
  "scene": 0,
  "scenes": [
    {
      "name": "Scene",
      "nodes": [
        0
      ]
    }
  ],
  "nodes": [
    // ... 省略 ...
    {
      "mesh": 0,
      "name": "soup",
      "extensions": {
        "KHR_materials_variants": {
          "mappings": [
            {
              "material": 0,
              "variants": [
                0
              ]
            },
            {
              "material": 1,
              "variants": [
                1
              ]
            }
          ]
        }
      }
    },
    // ... 省略 ...
  ],
  "materials": [
    {
      "alphaMode": "BLEND",
      "name": "suop-shoyu-tonkotsu",
      "pbrMetallicRoughness": {
        "baseColorTexture": {
          "index": 0
        },
        "metallicFactor": 0,
        "roughnessFactor": 0.5764706134796143
      }
    },
    {
      "alphaMode": "BLEND",
      "name": "suop-miso-spicy",
      "pbrMetallicRoughness": {
        "baseColorTexture": {
          "index": 1
        },
        "metallicFactor": 0,
        "roughnessFactor": 0.5764706134796143
      }
    }
    // ... 省略 ...
  ]
}

5. WebGLライブラリで利用する​

PlayCanvasのgetMaterialVariants

エクスポートしたglTFモデルは、WebGLライブラリなどで読み込んで利用できます。

例えば、PlayCanvasでは、getMaterialVariants() メソッドで利用可能なマテリアルバリアントのリストを取得できます。

そして適用するには、applyMaterialVariant(entity, variantName) メソッドを利用します。

// 利用可能なマテリアルバリアントのリストを取得
const entity = pc.app.root.findByName("らーめん");
const variants = glbContainer.resource.getMaterialVariants();
console.log(variants); // ["shoyu-tonkotsu", "miso-spicy"]

// "miso-spicy" バリアントを適用
glbContainer.resource.applyMaterialVariant(entity, "miso-spicy");

// "shoyu-tonkotsu バリアントを適用
// glbContainer.resource.applyMaterialVariant(entity, "shoyu-tonkotsu");

これで一つのモデルの中にあるマテリアルを効率的に切り替えることができます。

PlayCanvas以外のWebGLライブラリでもBabylon.jsやThree.jsなどもこの拡張に対応しています。

Babylon.js​

Three.js​

まとめ​

glTFのKHR_materials_variants拡張を使うことで、データサイズを抑えつつ、効率的に3Dモデルのバリエーションを表現することができます。

特に、ECサイトの商品ページなど、多数のバリエーションを表示する必要がある場合に非常に有効です。Blenderを使えば、比較的簡単にMaterial Variantsを設定できるので、ぜひ試してみてください。