N.E.K.O: Skill for Claude Code

VRM MToon Outline Thickness Adjustment

This skill covers how to adjust outline thickness for VRM models using MToon materials in @pixiv/three-vrm.

Common Symptoms

1. Outline too thick when model is scaled up or camera is close
2. Outline thickness inconsistent at different zoom levels
3. Need to adjust outline programmatically at runtime

---

Key Concepts

Outline Width Modes

MToon materials have two main outline width modes:

Mode	Description	Behavior
'worldCoordinates'	Outline width is a physical world-space size	Outline appears thicker when model is scaled up or camera is closer
'screenCoordinates'	Outline width is relative to screen pixels	Outline stays consistent size regardless of zoom/scale

Critical Properties

material.outlineWidthMode    // 'none' | 'worldCoordinates' | 'screenCoordinates'
material.outlineWidthFactor  // Number - the actual width value
material.isMToonMaterial     // Boolean - true for MToon materials
material.needsUpdate         // Set to true after modifying properties

---

Solution: Switch to Screen Coordinates

To make outlines stay consistent regardless of zoom/scale:

function adjustOutlineThickness(vrm, screenFactor = 0.005) {
    vrm.scene.traverse((object) => {
        if (object.isMesh || object.isSkinnedMesh) {
            const materials = Array.isArray(object.material) ? object.material : [object.material];
            
            materials.forEach(material => {
                if (!material || !material.isMToonMaterial) return;
                
                // Check if this material has outlines enabled
                const hasOutline = material.outlineWidthFactor > 0 && 
                                   material.outlineWidthMode !== 'none';
                
                if (hasOutline) {
                    // Switch to screen coordinates mode
                    material.outlineWidthMode = 'screenCoordinates';
                    material.outlineWidthFactor = screenFactor;
                    material.needsUpdate = true;
                }
            });
        }
    });
}