Shader Mode — Adjust Color Ramp → Real-time 3D preview
Matcap Painter
Real-time Matcap texture creation + 3D preview
Three.js WebGPU · JavaScript · Canvas 2D — Personal, 2026 · tomlim2.github.io/matcap-painter
Motivation
I needed Matcap textures for fake reflection masks in our NPR Shader System to achieve metallic surfaces and hair specular highlights on our NPR characters. The existing workflow was manual editing in Photoshop → engine import → check → back to Photoshop if it didn't look right. Without real-time feedback, iteration was slow.
Solution
Shader Mode — Create from scratch
A Blender Color Ramp-style UI for real-time control of Toon Ramp, Specular highlights, and Outline. Drag band count and boundaries to see instant updates in the 3D preview.
Paint Mode — Edit existing textures
Non-destructive editing with 8 Photoshop-style layers, based on 229 curated presets from an open-source library (nidorx/matcaps). Adjust HSV, Contrast, and Lift while previewing results in real time.
Paint Mode — Preset library + layer editing
The Matcap texture being edited is applied in real time to a Sphere, Torus, or GLB model. The final result can be checked immediately without any Photoshop-to-engine round-trips.
Result
| Category | Result |
|---|---|
| Workflow | Eliminated Photoshop round-trips — real-time editing + 3D preview |
| Shader Mode | Real-time Toon Ramp / Specular / Outline generation |
| Paint Mode | 229 presets + 8-layer non-destructive editing |
| Dev Time | 4 days |
229 presets from nidorx/matcaps