提高 threejs 中的凹凸贴图质量

Question

我有一个平面模型，我在其中应用凹凸贴图纹理来绘制并在其上放置一些文本。我使用的代码是这样的：

loadedMesh.material.bumpMap = new THREE.Texture(canvas);
loadedMesh.material.bumpScale = 1;
loadedMesh.material.bumpMap.wrapS = loadedMesh.material.bumpMap.wrapT = THREE.ClampToEdgeWrapping;
loadedMesh.material.bumpMap.minFilter = THREE.LinearFilter;
loadedMesh.material.bumpMap.needsUpdate = true;
loadedMesh.material.needsUpdate = true;

场景中有模型和 4 个启用了阴影的平行光。凹凸贴图效果很好，但质量真的很差。凹凸贴图大小为 2048x2048，我期待更好的质量。这里有一些图片：

如您所见，它像素化程度很高，增加纹理大小并没有太大改善。如果从定向光到模型的入射角发生变化（例如，通过旋转模型），质量也会发生变化。

凹凸贴图只是一个纯黑白图像，给图像添加一些抗锯齿可以提高质量吗？我知道凹凸贴图只会修改光线的行为方式，不会修改几何体，但我在某些网站上读到，增加模型的面数可以改善凹凸贴图（而不是置换贴图）的细节，这可以吗工作？

Answer 1

尝试使用法线贴图代替凹凸贴图。

提高 threejs 中的凹凸贴图质量

Improve bump map quality in threejs

javascript

three.js

bump-mapping