substance-3d-texturing

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Substance 3D Texturing

Substance 3D 纹理制作

Overview

概述

Master PBR (Physically Based Rendering) texture creation and export workflows for web and real-time engines. This skill covers Substance 3D Painter workflows from material creation through web-optimized texture export, with Python automation for batch processing and integration with WebGL/WebGPU engines.
Key capabilities:
  • PBR material authoring (metallic/roughness workflow)
  • Web-optimized texture export (glTF, Three.js, Babylon.js)
  • Python API automation for batch export
  • Texture compression and optimization for real-time rendering
掌握面向Web与实时引擎的PBR(基于物理的渲染)纹理创建与导出工作流。本技能涵盖Substance 3D Painter从材质创建到Web优化纹理导出的完整工作流,同时包含用于批量处理的Python自动化方案,以及与WebGL/WebGPU引擎的集成方法。
核心功能:
  • PBR材质制作(金属度/粗糙度工作流)
  • 适配Web的纹理导出(glTF、Three.js、Babylon.js)
  • 基于Python API的批量导出自动化
  • 面向实时渲染的纹理压缩与优化

Core Concepts

核心概念

PBR Workflow

PBR工作流

Substance 3D Painter uses the metallic/roughness PBR workflow with these core channels:
Base Texture Maps:
  • baseColor
    (Albedo) - RGB diffuse color, no lighting information
  • normal
    - RGB normal map (tangent space)
  • metallic
    - Grayscale metalness (0 = dielectric, 1 = metal)
  • roughness
    - Grayscale surface roughness (0 = smooth/glossy, 1 = rough/matte)
Additional Maps:
  • ambientOcclusion
    (AO) - Grayscale cavity/occlusion
  • height
    - Grayscale displacement/height
  • emissive
    - RGB self-illumination
  • opacity
    - Grayscale transparency
Substance 3D Painter采用金属度/粗糙度PBR工作流,包含以下核心通道:
基础纹理贴图:
  • baseColor
    (反照率)- RGB漫反射颜色,不含光照信息
  • normal
    (法线)- RGB法线贴图(切线空间)
  • metallic
    (金属度)- 灰度图,0代表绝缘体,1代表金属
  • roughness
    (粗糙度)- 灰度图,0代表光滑/高光泽,1代表粗糙/哑光
附加贴图:
  • ambientOcclusion
    (AO,环境光遮蔽)- 灰度图,表现空腔/遮蔽效果
  • height
    (高度)- 灰度图,表现位移/高度信息
  • emissive
    (自发光)- RGB自发光颜色
  • opacity
    (透明度)- 灰度图,控制透明度

Export Presets

导出预设

Substance 3D Painter includes built-in export presets for common engines:
  • PBR Metallic Roughness - Standard glTF/WebGL format
  • Unity HDRP/URP - Unity pipelines
  • Unreal Engine - UE4/UE5 format
  • Arnold (AiStandard) - Renderer-specific
For web engines, PBR Metallic Roughness is the universal standard.
Substance 3D Painter内置了针对常见引擎的导出预设:
  • PBR Metallic Roughness - 标准glTF/WebGL格式
  • Unity HDRP/URP - Unity渲染管线
  • Unreal Engine - UE4/UE5格式
  • Arnold (AiStandard) - 渲染器专用格式
对于Web引擎,PBR Metallic Roughness是通用标准。

Texture Resolution

纹理分辨率

Common resolutions for web (powers of 2):
  • 512×512 - Low detail props, mobile
  • 1024×1024 - Standard props, characters
  • 2048×2048 - Hero assets, close-ups
  • 4096×4096 - Showcase quality (use sparingly)
Web optimization rule: Start at 1024×1024, scale up only when texture detail is visible.
适用于Web的常见分辨率(2的幂次):
  • 512×512 - 低细节道具、移动设备
  • 1024×1024 - 标准道具、角色
  • 2048×2048 - 核心资产、特写镜头
  • 4096×4096 - 展示级画质(谨慎使用)
Web优化准则: 默认使用1024×1024,仅当纹理细节可见时再提升分辨率。

Common Patterns

常见模式

1. Basic Web Export (Three.js/Babylon.js)

1. 基础Web导出(Three.js/Babylon.js)

Manual export workflow for single texture set:
Steps:
  1. File → Export Textures
  2. Select preset: "PBR Metallic Roughness"
  3. Configure export:
    • Output directory: Choose target folder
    • File format: PNG (8-bit) for web
    • Padding: "Infinite" (prevents seams)
    • Resolution: 1024×1024 (adjust per asset)
  4. Export
Result files:
MyAsset_baseColor.png
MyAsset_normal.png
MyAsset_metallicRoughness.png  // Packed: R=nothing, G=roughness, B=metallic
MyAsset_emissive.png           // Optional
Three.js usage:
javascript
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'),
});
单组纹理的手动导出工作流:
步骤:
  1. 文件 → 导出纹理
  2. 选择预设: "PBR Metallic Roughness"
  3. 配置导出:
    • 输出目录:选择目标文件夹
    • 文件格式:PNG(8位,适配Web)
    • 填充方式:"无限"(避免接缝)
    • 分辨率:1024×1024(根据资产调整)
  4. 导出
导出结果文件:
MyAsset_baseColor.png
MyAsset_normal.png
MyAsset_metallicRoughness.png  // 打包格式:R=无, G=粗糙度, B=金属度
MyAsset_emissive.png           // 可选
Three.js 使用示例:
javascript
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. Batch Export with Python API

2. 基于Python API的批量导出

Automate export for multiple texture sets:
python
import substance_painter.export
import substance_painter.resource
import substance_painter.textureset
自动化导出多组纹理:
python
import substance_painter.export
import substance_painter.resource
import substance_painter.textureset

Define export preset

定义导出预设

export_preset = substance_painter.resource.ResourceID( context="starter_assets", name="PBR Metallic Roughness" )
export_preset = substance_painter.resource.ResourceID( context="starter_assets", name="PBR Metallic Roughness" )

Configure export for all texture sets

配置所有纹理集的导出参数

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 } }] }
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 } }] }

Add all texture sets to export list

将所有纹理集添加到导出列表

for texture_set in substance_painter.textureset.all_texture_sets(): config["exportList"].append({ "rootPath": texture_set.name() })
for texture_set in substance_painter.textureset.all_texture_sets(): config["exportList"].append({ "rootPath": texture_set.name() })

Execute export

执行导出

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}")
undefined
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}")
undefined

3. Resolution Override per Asset

3. 按资产覆盖分辨率

Export different resolutions for different assets (e.g., hero vs. background):
python
config = {
    "exportPath": "C:/export",
    "defaultExportPreset": export_preset.url(),
    "exportList": [
        {"rootPath": "HeroCharacter"},   # Will use 2048 (override below)
        {"rootPath": "BackgroundProp"}   # Will use 512 (override below)
    ],
    "exportParameters": [
        {
            "filter": {"dataPaths": ["HeroCharacter"]},
            "parameters": {"sizeLog2": 11}  # 2048×2048
        },
        {
            "filter": {"dataPaths": ["BackgroundProp"]},
            "parameters": {"sizeLog2": 9}   # 512×512
        }
    ]
}
为不同资产导出不同分辨率(例如核心资产 vs 背景道具):
python
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 Export Preset (Separate Channels)

4. 自定义导出预设(分离通道)

Create custom preset to export metallic and roughness as separate files:
python
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"}]
}
创建自定义预设,将金属度与粗糙度导出为单独文件:
python
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. Mobile-Optimized Export

5. 适配移动设备的导出

Aggressive compression for mobile WebGL:
python
mobile_config = {
    "exportPath": "C:/export/mobile",
    "defaultExportPreset": export_preset.url(),
    "exportList": [{"rootPath": texture_set.name()}],
    "exportParameters": [{
        "parameters": {
            "fileFormat": "jpeg",        # JPEG for baseColor (lossy but smaller)
            "bitDepth": "8",
            "sizeLog2": 9,               # 512×512 maximum
            "paddingAlgorithm": "infinite"
        }
    }, {
        "filter": {"outputMaps": ["$textureSet_normal", "$textureSet_metallicRoughness"]},
        "parameters": {
            "fileFormat": "png"          # PNG for data maps (need lossless)
        }
    }]
}
Post-export: Use tools like
pngquant
or
tinypng
for further compression.
针对移动WebGL的激进压缩配置:
python
mobile_config = {
    "exportPath": "C:/export/mobile",
    "defaultExportPreset": export_preset.url(),
    "exportList": [{"rootPath": texture_set.name()}],
    "exportParameters": [{
        "parameters": {
            "fileFormat": "jpeg",        // 基础色使用JPEG(有损但体积更小)
            "bitDepth": "8",
            "sizeLog2": 9,               // 最大512×512
            "paddingAlgorithm": "infinite"
        }
    }, {
        "filter": {"outputMaps": ["$textureSet_normal", "$textureSet_metallicRoughness"]},
        "parameters": {
            "fileFormat": "png"          // 数据贴图使用PNG(需要无损)
        }
    }]
}
导出后处理: 使用
pngquant
tinypng
等工具进一步压缩。

6. glTF/GLB Integration

6. glTF/GLB 集成

Export textures for glTF 2.0 format:
python
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 2.0格式的纹理:
python
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"
        }
    }]
}

After export, reference in glTF:

导出后,在glTF中引用:

{

{

"materials": [{

"materials": [{

"name": "Material",

"name": "Material",

"pbrMetallicRoughness": {

"pbrMetallicRoughness": {

"baseColorTexture": {"index": 0},

"baseColorTexture": {"index": 0},

"metallicRoughnessTexture": {"index": 1}

"metallicRoughnessTexture": {"index": 1}

},

},

"normalTexture": {"index": 2}

"normalTexture": {"index": 2}

}]

}]

}

}

undefined
undefined

7. Event-Driven Export Plugin

7. 事件驱动的导出插件

Auto-export on save using Python plugin:
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")
使用Python插件实现保存时自动导出:
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")

Register event

注册事件

substance_painter.event.DISPATCHER.connect( substance_painter.event.ProjectSaved, auto_export )
undefined
substance_painter.event.DISPATCHER.connect( substance_painter.event.ProjectSaved, auto_export )
undefined

Integration Patterns

集成模式

Three.js + React Three Fiber

Three.js + React Three Fiber

Use exported textures in R3F:
jsx
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>
  );
}
See react-three-fiber skill for advanced R3F material workflows.
在R3F中使用导出的纹理:
jsx
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>
  );
}
有关R3F高级材质工作流,请参考react-three-fiber技能指南。

Babylon.js PBR Materials

Babylon.js PBR 材质

javascript
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;
See babylonjs-engine skill for advanced PBR workflows.
javascript
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;
有关高级PBR工作流,请参考babylonjs-engine技能指南。

GLTF Export Pipeline

GLTF 导出管线

  1. Export textures from Substance (as above)
  2. Export model from Blender with glTF exporter
  3. Reference Substance textures in
    .gltf
    JSON
  4. Use
    gltf-pipeline
    for Draco compression:
bash
gltf-pipeline -i model.gltf -o model.glb -d
See blender-web-pipeline skill for complete 3D asset pipeline.
  1. 从Substance导出纹理(如上所述)
  2. 使用Blender的glTF导出器导出模型
  3. .gltf
    JSON文件中引用Substance纹理
  4. 使用
    gltf-pipeline
    进行Draco压缩:
bash
gltf-pipeline -i model.gltf -o model.glb -d
有关完整3D资产管线,请参考blender-web-pipeline技能指南。

Performance Optimization

性能优化

Texture Size Budget

纹理内存预算

Desktop WebGL: ~100-150MB total texture memory Mobile WebGL: ~30-50MB total texture memory
Budget per asset:
  • Background/props: 512×512 (1MB per texture × 4 maps = 4MB)
  • Standard assets: 1024×1024 (4MB per texture × 4 maps = 16MB)
  • Hero assets: 2048×2048 (16MB per texture × 4 maps = 64MB)
桌面WebGL: 总纹理内存约100-150MB 移动WebGL: 总纹理内存约30-50MB
单资产预算:
  • 背景/道具:512×512(每张纹理1MB ×4张贴图=4MB)
  • 标准资产:1024×1024(每张纹理4MB ×4张贴图=16MB)
  • 核心资产:2048×2048(每张纹理16MB ×4张贴图=64MB)

Compression Strategies

压缩策略

  1. JPEG for baseColor (70-80% quality) - 10× smaller than PNG
  2. PNG-8 for data maps (normal, metallic, roughness) - lossless required
  3. Basis Universal (
    .basis
    ) - GPU texture compression (90% smaller)
  4. Texture atlasing - Combine multiple assets into single texture
  1. 基础色使用JPEG(70-80%质量)- 体积比PNG小10倍
  2. 数据贴图使用PNG-8(法线、金属度、粗糙度)- 需无损压缩
  3. Basis Universal
    .basis
    )- GPU纹理压缩(体积缩小90%)
  4. 纹理图集 - 将多个资产合并为单张纹理

Channel Packing

通道打包

Pack grayscale maps into RGB channels to reduce texture count:
Packed ORM (Occlusion-Roughness-Metallic):
  • Red: Ambient Occlusion
  • Green: Roughness
  • Blue: Metallic
Export in Substance:
python
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"}
    ]
}
将灰度贴图打包到RGB通道以减少纹理数量:
打包ORM(遮蔽-粗糙度-金属度):
  • 红色通道:环境光遮蔽
  • 绿色通道:粗糙度
  • 蓝色通道:金属度
在Substance中导出:
python
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"}
    ]
}

Mipmaps

多级渐远纹理(Mipmaps)

Always enable mipmaps in engine for textures viewed at distance:
javascript
// Three.js (automatic)
texture.generateMipmaps = true;

// Babylon.js
texture.updateSamplingMode(Texture.TRILINEAR_SAMPLINGMODE);
对于在远距离查看的纹理,务必在引擎中启用多级渐远纹理:
javascript
// Three.js(自动生成)
texture.generateMipmaps = true;

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

Common Pitfalls

常见陷阱

1. Wrong Color Space for BaseColor

1. 基础色颜色空间错误

Problem: BaseColor exported in linear space looks washed out.
Solution: Substance exports baseColor in sRGB by default (correct). Ensure engine uses sRGB:
javascript
// Three.js
baseColorTexture.colorSpace = THREE.SRGBColorSpace;

// Babylon.js (automatic for albedoTexture)
问题: 以线性空间导出的基础色显示过曝。
解决方案: Substance默认以sRGB空间导出基础色(正确设置)。确保引擎使用sRGB空间:
javascript
// Three.js
baseColorTexture.colorSpace = THREE.SRGBColorSpace;

// Babylon.js(albedoTexture默认自动设置)

2. Normal Map Baking Issues

2. 法线贴图烘焙问题

Problem: Normal maps show inverted or incorrect shading.
Solution:
  • Verify tangent space normal format (DirectX vs. OpenGL Y-flip)
  • Substance uses OpenGL (Y+), same as glTF standard
  • If using DirectX engine, flip green channel in export
问题: 法线贴图显示反转或不正确的阴影。
解决方案:
  • 验证切线空间法线格式(DirectX vs OpenGL Y轴翻转)
  • Substance使用OpenGL格式(Y轴向上),与glTF标准一致
  • 若使用DirectX引擎,需在导出时翻转绿色通道

3. Metallic/Roughness Channel Order

3. 金属度/粗糙度通道顺序错误

Problem: Metallic/roughness texture has swapped channels.
Solution: Default Substance export:
  • Blue channel = Metallic
  • Green channel = Roughness
  • Matches glTF 2.0 specification
问题: 金属度/粗糙度贴图通道顺序颠倒。
解决方案: Substance默认导出规则:
  • 蓝色通道=金属度
  • 绿色通道=粗糙度
  • 符合glTF 2.0规范

4. Padding Artifacts at UV Seams

4. UV接缝处的填充伪影

Problem: Black or colored lines appear at UV seams.
Solution: Set padding algorithm to "infinite" in export settings:
python
"paddingAlgorithm": "infinite"
问题: UV接缝处出现黑色或彩色线条。
解决方案: 在导出设置中将填充算法设置为**"无限"**:
python
"paddingAlgorithm": "infinite"

5. Oversized Textures for Web

5. Web纹理尺寸过大

Problem: 4K textures cause long load times and memory issues on web.
Solution:
  • Default to 1024×1024 for web
  • Use 2048×2048 only for hero assets viewed close-up
  • Implement LOD system with multiple resolution sets
问题: 4K纹理导致Web端加载时间过长和内存问题。
解决方案:
  • Web端默认使用1024×1024
  • 仅将核心资产设置为2048×2048(需近距离查看)
  • 实现LOD(多级细节)系统,提供多分辨率纹理集

6. Missing AO Map in Engine

6. 引擎中AO贴图不可见

Problem: AO map exported but not visible in engine.
Solution:
  • Three.js: Requires second UV channel (
    geometry.attributes.uv2
    )
  • Babylon.js: Set
    material.useAmbientOcclusionFromMetallicTextureRed = true
  • Alternative: Bake AO into baseColor in Substance
问题: AO已导出,但在引擎中不可见。
解决方案:
  • Three.js:需要第二组UV通道(
    geometry.attributes.uv2
  • Babylon.js:设置
    material.useAmbientOcclusionFromMetallicTextureRed = true
  • 替代方案:在Substance中将AO烘焙到基础色中

Resources

资源

See bundled resources for complete workflows:
  • references/python_api_reference.md - Complete Substance Painter Python API
  • references/export_presets.md - Built-in and custom export preset catalog
  • references/pbr_channel_guide.md - Deep dive into PBR texture channels
  • scripts/batch_export.py - Batch export all texture sets
  • scripts/web_optimizer.py - Post-process textures for web (resize, compress)
  • scripts/generate_export_preset.py - Create custom export preset JSON
  • assets/export_templates/ - Pre-configured export presets for Three.js, Babylon.js, Unity
查看捆绑资源获取完整工作流:
  • 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

Related Skills

相关技能

  • blender-web-pipeline - Complete 3D model → texture → web pipeline
  • threejs-webgl - Loading and using PBR textures in Three.js
  • react-three-fiber - R3F material workflows with Substance textures
  • babylonjs-engine - Babylon.js PBR material system integration
  • blender-web-pipeline - 完整3D模型→纹理→Web管线
  • threejs-webgl - 在Three.js中加载与使用PBR纹理
  • react-three-fiber - 结合Substance纹理的R3F材质工作流
  • babylonjs-engine - Babylon.js PBR材质系统集成