substance-3d-texturing

Substance 3D Texturing

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

Core Concepts

PBR Workflow

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

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.

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.

Common Patterns

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

Manual export workflow for single texture set:

Steps:

File → Export Textures
Select preset: "PBR Metallic Roughness"
Configure export:
- Output directory: Choose target folder
- File format: PNG (8-bit) for web
- Padding: "Infinite" (prevents seams)
- Resolution: 1024×1024 (adjust per asset)
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:

import * as THREE from 'three';
 
const textureLoader = new THREE.TextureLoader();

2. Batch Export with Python API

Automate export for multiple texture sets:

3. Resolution Override per Asset

Export different resolutions for different assets (e.g., hero vs. background):

4. Custom Export Preset (Separate Channels)

Create custom preset to export metallic and roughness as separate files:

5. Mobile-Optimized Export

Aggressive compression for mobile WebGL:

Post-export: Use tools like pngquant or tinypng for further compression.

6. glTF/GLB Integration

Export textures for glTF 2.0 format:

7. Event-Driven Export Plugin

Auto-export on save using Python plugin:

Integration Patterns

Three.js + React Three Fiber

Use exported textures in R3F:

See react-three-fiber skill for advanced R3F material workflows.

Babylon.js PBR Materials

See babylonjs-engine skill for advanced PBR workflows.

GLTF Export Pipeline

Export textures from Substance (as above)
Export model from Blender with glTF exporter
Reference Substance textures in .gltf JSON
Use gltf-pipeline for Draco compression:

See blender-web-pipeline skill for complete 3D asset 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)

Compression Strategies

JPEG for baseColor (70-80% quality) - 10× smaller than PNG
PNG-8 for data maps (normal, metallic, roughness) - lossless required
Basis Universal (.basis) - GPU texture compression (90% smaller)
Texture atlasing - Combine multiple assets into single texture

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:

Mipmaps

Always enable mipmaps in engine for textures viewed at distance:

Common Pitfalls

1. Wrong Color Space for BaseColor

Problem: BaseColor exported in linear space looks washed out.

Solution: Substance exports baseColor in sRGB by default (correct). Ensure engine uses sRGB:

2. Normal Map Baking Issues

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

3. Metallic/Roughness Channel Order

Problem: Metallic/roughness texture has swapped channels.

Solution: Default Substance export:

Blue channel = Metallic
Green channel = Roughness
Matches glTF 2.0 specification

4. Padding Artifacts at UV Seams

Problem: Black or colored lines appear at UV seams.

Solution: Set padding algorithm to "infinite" in export settings:

5. Oversized Textures for 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

6. Missing AO Map in Engine

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

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

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