Substance 3D テクスチャリング

概要

Web とリアルタイムエンジン向けの PBR (Physically Based Rendering) テクスチャ作成と出力ワークフローをマスターします。このスキルは、マテリアル作成から Web 最適化テクスチャ出力までの Substance 3D Painter ワークフロー、および WebGL/WebGPU エンジン統合のための Python 自動化をカバーします。

主な機能:

• PBR マテリアルオーサリング (メタリック/ラフネスワークフロー)
• Web 最適化テクスチャ出力 (glTF、Three.js、Babylon.js)
• バッチ出力用の Python API 自動化
• リアルタイムレンダリング向けのテクスチャ圧縮と最適化

コア概念

PBR ワークフロー

Substance 3D Painter は メタリック/ラフネス PBR ワークフローを使用し、以下のコアチャネルで構成されています:

ベーステクスチャマップ:

• baseColor (アルベド) - RGB ディフューズカラー、ライティング情報なし
• normal - RGB ノーマルマップ (タンジェント空間)
• metallic - グレースケール メタルネス (0 = 誘電体、1 = メタル)
• roughness - グレースケール 表面粗さ (0 = 滑らか/光沢、1 = 粗い/マット)

追加マップ:

• ambientOcclusion (AO) - グレースケール キャビティ/オクルージョン
• height - グレースケール ディスプレイスメント/高さ
• emissive - RGB 自己発光
• opacity - グレースケール 透明度

エクスポートプリセット

Substance 3D Painter には一般的なエンジン向けの組み込みエクスポートプリセットがあります:

• PBR Metallic Roughness - 標準 glTF/WebGL フォーマット
• Unity HDRP/URP - Unity パイプライン
• Unreal Engine - UE4/UE5 フォーマット
• Arnold (AiStandard) - レンダラー固有

Web エンジンの場合、PBR Metallic Roughness が汎用標準です。

テクスチャ解像度

Web 用の一般的な解像度 (2 の累乗):

• 512×512 - 低詳細度プロップ、モバイル
• 1024×1024 - 標準プロップ、キャラクター
• 2048×2048 - ヒーロー アセット、クローズアップ
• 4096×4096 - ショーケース品質 (慎重に使用)

Web 最適化ルール: 1024×1024 から開始し、テクスチャディテールが見える場合のみスケールアップします。

一般的なパターン

1. 基本的な Web エクスポート (Three.js/Babylon.js)

単一テクスチャセット用の手動エクスポートワークフロー:

ステップ:

1. File → Export Textures
2. プリセット選択: "PBR Metallic Roughness"
3. エクスポート設定:
   • Output directory: ターゲットフォルダを選択
   • File format: PNG (8-bit) for web
   • Padding: "Infinite" (シーム防止)
   • Resolution: 1024×1024 (アセット毎に調整)
4. Export

結果ファイル:

MyAsset_baseColor.png
MyAsset_normal.png
MyAsset_metallicRoughness.png  // パック: R=なし、G=ラフネス、B=メタリック
MyAsset_emissive.png           // オプション

Three.js の使用:

import * as THREE from 'three';

const textureLoader = new THREE.TextureLoader();

const material = new THREE.MeshStandardMaterial({
  map: textureLoader.load('MyAsset_baseColor.png'),
  normalMap: textureLoader.load('MyAsset_normal.png'),
  metalnessMap: textureLoader.load('MyAsset_metallicRoughness.png'),
  roughnessMap: textureLoader.load('MyAsset_metallicRoughness.png'),
  aoMap: textureLoader.load('MyAsset_ambientOcclusion.png'),
});

2. Python API によるバッチエクスポート

複数のテクスチャセット用のエクスポート自動化:

import substance_painter.export
import substance_painter.resource
import substance_painter.textureset

# エクスポートプリセット定義
export_preset = substance_painter.resource.ResourceID(
    context="starter_assets",
    name="PBR Metallic Roughness"
)

# すべてのテクスチャセット用エクスポート設定
config = {
    "exportShaderParams": False,
    "exportPath": "C:/export/web_textures",
    "defaultExportPreset": export_preset.url(),
    "exportList": [],
    "exportParameters": [{
        "parameters": {
            "fileFormat": "png",
            "bitDepth": "8",
            "dithering": True,
            "paddingAlgorithm": "infinite",
            "sizeLog2": 10  // 1024×1024
        }
    }]
}

# エクスポートリストにすべてのテクスチャセットを追加
for texture_set in substance_painter.textureset.all_texture_sets():
    config["exportList"].append({
        "rootPath": texture_set.name()
    })

# エクスポート実行
result = substance_painter.export.export_project_textures(config)

if result.status == substance_painter.export.ExportStatus.Success:
    for stack, files in result.textures.items():
        print(f"Exported {stack}: {len(files)} textures")
else:
    print(f"Export failed: {result.message}")

3. アセット毎の解像度オーバーライド

異なるアセットに対して異なる解像度でエクスポート (例: ヒーロー vs. 背景):

config = {
    "exportPath": "C:/export",
    "defaultExportPreset": export_preset.url(),
    "exportList": [
        {"rootPath": "HeroCharacter"},   # 下記でオーバーライドして 2048 を使用
        {"rootPath": "BackgroundProp"}   # 下記でオーバーライドして 512 を使用
    ],
    "exportParameters": [
        {
            "filter": {"dataPaths": ["HeroCharacter"]},
            "parameters": {"sizeLog2": 11}  # 2048×2048
        },
        {
            "filter": {"dataPaths": ["BackgroundProp"]},
            "parameters": {"sizeLog2": 9}   # 512×512
        }
    ]
}

4. カスタムエクスポートプリセット (チャネル分離)

メタリックとラフネスを別ファイルとしてエクスポートするカスタムプリセット作成:

custom_preset = {
    "exportPresets": [{
        "name": "WebGL_Separated",
        "maps": [
            {
                "fileName": "$textureSet_baseColor",
                "channels": [
                    {"destChannel": "R", "srcChannel": "R", "srcMapType": "documentMap", "srcMapName": "baseColor"},
                    {"destChannel": "G", "srcChannel": "G", "srcMapType": "documentMap", "srcMapName": "baseColor"},
                    {"destChannel": "B", "srcChannel": "B", "srcMapType": "documentMap", "srcMapName": "baseColor"}
                ]
            },
            {
                "fileName": "$textureSet_normal",
                "channels": [
                    {"destChannel": "R", "srcChannel": "R", "srcMapType": "documentMap", "srcMapName": "normal"},
                    {"destChannel": "G", "srcChannel": "G", "srcMapType": "documentMap", "srcMapName": "normal"},
                    {"destChannel": "B", "srcChannel": "B", "srcMapType": "documentMap", "srcMapName": "normal"}
                ]
            },
            {
                "fileName": "$textureSet_metallic",
                "channels": [
                    {"destChannel": "R", "srcChannel": "R", "srcMapType": "documentMap", "srcMapName": "metallic"}
                ],
                "parameters": {"fileFormat": "png", "bitDepth": "8"}
            },
            {
                "fileName": "$textureSet_roughness",
                "channels": [
                    {"destChannel": "R", "srcChannel": "R", "srcMapType": "documentMap", "srcMapName": "roughness"}
                ],
                "parameters": {"fileFormat": "png", "bitDepth": "8"}
            }
        ]
    }]
}

config = {
    "exportPath": "C:/export",
    "exportPresets": custom_preset["exportPresets"],
    "exportList": [{"rootPath": "MyAsset", "exportPreset": "WebGL_Separated"}]
}

5. モバイル最適化エクスポート

モバイル WebGL 向けの積極的な圧縮:

mobile_config = {
    "exportPath": "C:/export/mobile",
    "defaultExportPreset": export_preset.url(),
    "exportList": [{"rootPath": texture_set.name()}],
    "exportParameters": [{
        "parameters": {
            "fileFormat": "jpeg",        # JPEG for baseColor (ロッシーだがより小さい)
            "bitDepth": "8",
            "sizeLog2": 9,               # 512×512 最大
            "paddingAlgorithm": "infinite"
        }
    }, {
        "filter": {"outputMaps": ["$textureSet_normal", "$textureSet_metallicRoughness"]},
        "parameters": {
            "fileFormat": "png"          # データマップは PNG (ロスレス必須)
        }
    }]
}

エクスポート後: pngquant または tinypng などのツールを使用してさらに圧縮します。

6. glTF/GLB インテグレーション

glTF 2.0 フォーマット向けのテクスチャエクスポート:

gltf_config = {
    "exportPath": "C:/export/gltf",
    "defaultExportPreset": substance_painter.resource.ResourceID(
        context="starter_assets",
        name="PBR Metallic Roughness"
    ).url(),
    "exportList": [{"rootPath": texture_set.name()}],
    "exportParameters": [{
        "parameters": {
            "fileFormat": "png",
            "bitDepth": "8",
            "sizeLog2": 10,              # 1024×1024
            "paddingAlgorithm": "infinite"
        }
    }]
}

# エクスポート後、glTF で参照:
# {
#   "materials": [{
#     "name": "Material",
#     "pbrMetallicRoughness": {
#       "baseColorTexture": {"index": 0},
#       "metallicRoughnessTexture": {"index": 1}
#     },
#     "normalTexture": {"index": 2}
#   }]
# }

7. イベント駆動型エクスポートプラグイン

保存時に自動エクスポートする Python プラグイン:

import substance_painter.event
import substance_painter.export
import substance_painter.project

def auto_export(e):
    if not substance_painter.project.is_open():
        return

    config = {
        "exportPath": substance_painter.project.file_path().replace('.spp', '_textures'),
        "defaultExportPreset": substance_painter.resource.ResourceID(
            context="starter_assets", name="PBR Metallic Roughness"
        ).url(),
        "exportList": [{"rootPath": ts.name()} for ts in substance_painter.textureset.all_texture_sets()],
        "exportParameters": [{
            "parameters": {"fileFormat": "png", "bitDepth": "8", "sizeLog2": 10}
        }]
    }

    substance_painter.export.export_project_textures(config)
    print("Auto-export completed")

# イベント登録
substance_painter.event.DISPATCHER.connect(
    substance_painter.event.ProjectSaved,
    auto_export
)

インテグレーションパターン

Three.js + React Three Fiber

エクスポートされたテクスチャを R3F で使用:

import { useTexture } from '@react-three/drei';

function TexturedMesh() {
  const [baseColor, normal, metallicRoughness, ao] = useTexture([
    '/textures/Asset_baseColor.png',
    '/textures/Asset_normal.png',
    '/textures/Asset_metallicRoughness.png',
    '/textures/Asset_ambientOcclusion.png',
  ]);

  return (
    <mesh>
      <boxGeometry />
      <meshStandardMaterial
        map={baseColor}
        normalMap={normal}
        metalnessMap={metallicRoughness}
        roughnessMap={metallicRoughness}
        aoMap={ao}
      />
    </mesh>
  );
}

react-three-fiber スキルで高度な R3F マテリアルワークフローを参照してください。

Babylon.js PBR マテリアル

import { PBRMaterial, Texture } from '@babylonjs/core';

const pbr = new PBRMaterial("pbr", scene);
pbr.albedoTexture = new Texture("/textures/Asset_baseColor.png", scene);
pbr.bumpTexture = new Texture("/textures/Asset_normal.png", scene);
pbr.metallicTexture = new Texture("/textures/Asset_metallicRoughness.png", scene);
pbr.useRoughnessFromMetallicTextureAlpha = false;
pbr.useRoughnessFromMetallicTextureGreen = true;
pbr.useMetallnessFromMetallicTextureBlue = true;

babylonjs-engine スキルで高度な PBR ワークフローを参照してください。

GLTF エクスポートパイプライン

1. Substance からテクスチャをエクスポート (上記参照)
2. Blender から glTF エクスポーターでモデルをエクスポート
3. .gltf JSON で Substance テクスチャを参照
4. Draco 圧縮に gltf-pipeline を使用:

gltf-pipeline -i model.gltf -o model.glb -d

完全な 3D アセットパイプラインは blender-web-pipeline スキルを参照してください。

パフォーマンス最適化

テクスチャサイズバジェット

デスクトップ WebGL: 合計テクスチャメモリ ~100-150MB モバイル WebGL: 合計テクスチャメモリ ~30-50MB

アセット毎のバジェット:

• 背景/プロップ: 512×512 (テクスチャあたり 1MB × 4 マップ = 4MB)
• 標準アセット: 1024×1024 (テクスチャあたり 4MB × 4 マップ = 16MB)
• ヒーロー アセット: 2048×2048 (テクスチャあたり 16MB × 4 マップ = 64MB)

圧縮戦略

1. baseColor に JPEG (70-80% クオリティ) - PNG より 10 倍小さい
2. データマップに PNG-8 (ノーマル、メタリック、ラフネス) - ロスレス必須
3. Basis Universal (.basis) - GPU テクスチャ圧縮 (90% 小さい)
4. テクスチャアトラシング - 複数アセットを単一テクスチャに結合

チャネルパッキング

グレースケールマップを RGB チャネルにパックしてテクスチャ数を削減:

パック ORM (Occlusion-Roughness-Metallic):

• Red: Ambient Occlusion
• Green: Roughness
• Blue: Metallic

Substance でエクスポート:

orm_map = {
    "fileName": "$textureSet_ORM",
    "channels": [
        {"destChannel": "R", "srcChannel": "R", "srcMapType": "documentMap", "srcMapName": "ambientOcclusion"},
        {"destChannel": "G", "srcChannel": "R", "srcMapType": "documentMap", "srcMapName": "roughness"},
        {"destChannel": "B", "srcChannel": "R", "srcMapType": "documentMap", "srcMapName": "metallic"}
    ]
}

ミップマップ

遠距離で表示されるテクスチャには、エンジンでミップマップを常に有効にします:

// Three.js (自動)
texture.generateMipmaps = true;

// Babylon.js
texture.updateSamplingMode(Texture.TRILINEAR_SAMPLINGMODE);

一般的な落とし穴

1. BaseColor の間違ったカラースペース

問題: リニア空間でエクスポートされた BaseColor は淡白に見える。

解決策: Substance はデフォルトで sRGB で baseColor をエクスポート (正しい)。エンジンが sRGB を使用していることを確認:

// Three.js
baseColorTexture.colorSpace = THREE.SRGBColorSpace;

// Babylon.js (albedoTexture で自動)

2. ノーマルマップベーキングの問題

問題: ノーマルマップが反転またはシェーディングが不正確。

解決策:

• タンジェント空間ノーマル形式 (DirectX vs. OpenGL Y-flip) を確認
• Substance は OpenGL (Y+) を使用、glTF 標準と同じ
• DirectX エンジン使用の場合、エクスポートで緑チャネルを反転

3. メタリック/ラフネスチャネルの順序

問題: メタリック/ラフネステクスチャがチャネルを交換している。

解決策: デフォルト Substance エクスポート:

• Blue チャネル = Metallic
• Green チャネル = Roughness
• glTF 2.0 仕様に合致

4. UV シーム位置のパディングアーティファクト

問題: UV シーム位置に黒または色付きの線が表示される。

解決策: エクスポート設定で padding algorithm を "infinite" に設定:

"paddingAlgorithm": "infinite"

5. Web 向けの過度に大きなテクスチャ

問題: 4K テクスチャは Web 上でロード時間とメモリの問題を引き起こす。

解決策:

• Web 用のデフォルトは 1024×1024
• クローズアップで表示されるヒーロー アセットのみ 2048×2048 を使用
• 複数の解像度セットを使用した LOD システムを実装

6. エンジンで AO マップが見えない

問題: AO マップがエクスポートされているが、エンジンで見えない。

解決策:

• Three.js: 2 番目の UV チャネル (geometry.attributes.uv2) が必須
• Babylon.js: material.useAmbientOcclusionFromMetallicTextureRed = true を設定
• 代替: Substance で AO を baseColor にベーク

リソース

バンドルされたリソースで完全なワークフローを参照:

• references/python_api_reference.md - 完全な Substance Painter Python API
• references/export_presets.md - 組み込みおよびカスタムエクスポートプリセットカタログ
• references/pbr_channel_guide.md - PBR テクスチャチャネルの詳細解説
• scripts/batch_export.py - すべてのテクスチャセットをバッチエクスポート
• scripts/web_optimizer.py - Web 用テクスチャ後処理 (リサイズ、圧縮)
• scripts/generate_export_preset.py - カスタムエクスポートプリセット JSON を作成
• assets/export_templates/ - Three.js、Babylon.js、Unity 向けの事前設定エクスポートプリセット

関連スキル

• blender-web-pipeline - 完全な 3D モデル → テクスチャ → Web パイプライン
• threejs-webgl - Three.js で PBR テクスチャを読み込んで使用
• react-three-fiber - Substance テクスチャを使用した R3F マテリアルワークフロー
• babylonjs-engine - Babylon.js PBR マテリアルシステム統合