配材质配到抓狂？有人收了几百个现成纹理，Three.js 一行代码直接用

做 3D 渲染时，想给模型加一个金属或陶瓷质感，通常要花时间搭光照、调反射、配 HDRI 环境图。但有一种更快的方法：用 MatCap。

MatCap（Material Capture，材质捕捉） 是一种把光照和反射信息"烘焙"进一张球形纹理的技术。使用时，引擎根据模型表面的法线方向去采样这张纹理，就能直接得到有光照感的渲染结果，不需要单独配置光源。

这在雕刻软件（比如 ZBrush）里很常见，Blender、Three.js、Unity 都支持 MatCap 渲染。它的优点是性能好、效果稳定，缺点是光照方向固定，不随场景变化——更适合离线预览、游戏角色渲染、或者 WebGL 场景里对性能敏感的对象。

matcaps (opens in a new tab) 这个仓库做的事情很简单：把网络上散落的 MatCap 纹理统一收集、清洗、整理，按颜色分页归档，提供多种分辨率下载。

仓库里有什么

纹理按颜色分为 33 个索引页，从金属银、铬合金、磨砂黑到暖色皮肤、冷色陶瓷都有覆盖。每个纹理提供 5 种分辨率：

格式有两种：PNG（24 位，sRGB 色彩空间，无 alpha 通道）和 ZMT（ZBrush 专用格式）。PNG 可以直接用在 WebGL、Three.js、Unity 等平台。

如何获取纹理

浏览与挑选

可以在这个可视化画廊里预览所有纹理：

https://observablehq.com/@makio135/matcaps

也可以直接翻 GitHub 仓库里的 33 个分页文件（PAGE1.md 到 PAGE33.md），每页是一批缩略图。

下载方式

• 单个纹理：在对应分页找到目标图，点击进入详细页面下载
• 批量下载：在 GitHub Releases 页面按分辨率打包下载，比如只下载所有 256px 的纹理

在各平台中使用

Three.js

Three.js 内置了 MeshMatcapMaterial，使用方式很直接——加载纹理图，指定给 material 即可：

import * as THREE from 'three';
 
const textureLoader = new THREE.TextureLoader();
const matcapTexture = textureLoader.load('/matcaps/silver_256.png');
 
const material = new THREE.MeshMatcapMaterial({
  matcap: matcapTexture,
});
 
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

不需要添加任何光源，渲染结果就会带有材质捕捉效果。

WebGL / GLSL

如果在原生 WebGL 或自定义着色器中使用，需要在顶点着色器中输出法线，再在片段着色器中将法线转换为 UV 坐标去采样纹理：

顶点着色器

vNormal = normalize(vec3(world * vec4(normal, 0.0)));

片段着色器

highp vec2 muv = vec2(view * vec4(normalize(vNormal), 0)) * 0.5 + vec2(0.5, 0.5);
gl_FragColor = texture2D(matcapTexture, vec2(muv.x, 1.0 - muv.y));

核心逻辑是：把法线从世界空间转到视图空间，再映射到 [0, 1] 的 UV 范围，作为纹理坐标去采样 MatCap 图。

Blender

Blender 2.8 之后在材质节点中内置了 MatCap 支持。在 Shader Editor 里添加一个 Image Texture 节点，把 MatCap PNG 加进来，然后连接一个 Normal Map 节点作为 Vector 输入，最终输出到 Emission 或 Diffuse BSDF。也可以直接在视口着色选项中选择 MatCap 预览模式，把下载的纹理作为自定义 MatCap 加入 Blender 的 matcaps 目录。

Unity

Unity 中实现 MatCap 需要自定义 Shader。基本原理与 GLSL 相同：在顶点着色器中把法线转换到视图空间，用转换后的 x/y 分量作为 UV 去采样纹理贴图，输出到片段着色器。仓库 README 中提供了对应实现链接可供参考。

写在最后

matcaps 解决的是一个很具体的问题：做 3D 渲染时手边没有合适的材质纹理，或者不想花时间搭光照系统。它不是某个渲染框架，也不提供代码逻辑，纯粹是一个整理好的纹理资源池。

对于 Three.js 开发者来说，MeshMatcapMaterial 加上这个库里的纹理，是快速原型开发的一条捷径。对于 Blender 和 ZBrush 用户，这里的 ZMT 和 PNG 文件可以直接导入使用，不需要额外处理。

如果你在做 WebGL 场景、游戏角色预览、或者产品展示类的 3D 网页，这个库值得收藏备用。

GitHub 地址：https://github.com/nidorx/matcaps (opens in a new tab)