aframe-webxr
Declarative web framework for building browser-based 3D, VR, and AR experiences using HTML and entity-component architecture. Use…
Comprehensive skill for Adobe Substance 3D Painter texturing and material creation workflow. Use this skill when creating PBR materials, exporting textures for web/game engines, optimizing 3D assets for real-time rendering, or automating texture workflows. Triggers on tasks
Claude Code
$ npx -y skills add freshtechbro/claudedesignskills --skill substance-3d-texturing --agent claude-code
Codex
$ npx skills add freshtechbro/claudedesignskills --skill substance-3d-texturing -a codex -y
Cursor
$ npx skills add freshtechbro/claudedesignskills --skill substance-3d-texturing -a cursor -y
Gemini CLI
$ npx skills add freshtechbro/claudedesignskills --skill substance-3d-texturing -a gemini-cli -y
GitHub Copilot
$ npx skills add freshtechbro/claudedesignskills --skill substance-3d-texturing -a github-copilot -y
OpenCode
$ npx skills add freshtechbro/claudedesignskills --skill substance-3d-texturing -a opencode -y
Windsurf
$ npx skills add freshtechbro/claudedesignskills --skill substance-3d-texturing -a windsurf -y
name: substance-3d-texturing description: Comprehensive skill for Adobe Substance 3D Painter texturing and material creation workflow. Use this skill when creating PBR materials, exporting textures for web/game engines, optimizing 3D assets for real-time rendering, or automating texture workflows. Triggers on tasks involving Substance 3D Painter, PBR texturing, material creation, texture export for Three.js, Babylon.js, Unity, Unreal, glTF optimization, or Python API automation. Creates optimized textures for threejs-webgl, react-three-fiber, and babylonjs-engine materials.
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:**
Substance 3D Painter uses the **metallic/roughness** PBR workflow with these core channels:
**Base Texture Maps:**
**Additional Maps:**
Substance 3D Painter includes built-in export presets for common engines:
For web engines, **PBR Metallic Roughness** is the universal standard.
Common resolutions for web (powers of 2):
**Web optimization rule:** Start at 1024×1024, scale up only when texture detail is visible.
Manual export workflow for single texture set:
**Steps:** 1. **File → Export Textures** 2. **Select preset:** "PBR Metallic Roughness" 3. **Configure export:**
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:**
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'),
});Automate export for multiple texture sets:
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"
)
# 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
}
}]
}
# Add all texture sets to export list
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}")Export different resolutions for different assets (e.g., hero vs. background):
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
}
]
}Create custom preset to export metallic and roughness as separate files:
custom_preset = {
"exportPresets": [{
"name": "WebGL_Separated",
"maps": [
{
"fileName": "$textureSet_baseColor",
"channels": [
{"destChannel": "R", "srcChannel": "R", "srcMapType": "documentMap", "srcMapName": "baseColor"},
{"destChannel": "G",Professional design agency skillstack for 3D/WebGL, animation, and modern web development Claude Code plugin marketplace providing comprehensive coverage of modern web technologies including Three.js, GSAP, React Three Fiber, Framer Motion, Babylon.js, and
Declarative web framework for building browser-based 3D, VR, and AR experiences using HTML and entity-component architecture. Use…
Pre-built animated React component collections combining Magic UI (150+ TypeScript/Tailwind/Motion components) and React Bits…
Versatile JavaScript animation engine for DOM, CSS, SVG, and JavaScript objects. Use when creating timeline-based animations,…
Comprehensive skill for Babylon.js 3D web rendering engine. Use this skill when building real-time 3D experiences, browser-based…
Page transitions library for creating fluid, smooth transitions between website pages. Use this skill when implementing page…
Blender to web export workflows for 3D models and animations. Use this skill when exporting Blender models to glTF for web,…
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
Ask which skill or flow fits your situation. A router over the skills in this repo.