改善threejs中的凹凸贴图质量

时间:2017-05-12 00:01:55

标签: javascript three.js bump-mapping

我有一个平面的模型,我正在应用凹凸贴图纹理来绘制并在其上放置一些文字。我正在使用的代码是:

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,我期待质量更好。这里有一些图片:

https://cloud.google.com/functions/quotas

enter image description here

enter image description here

正如您所看到的那样,它非常像素化并且增加纹理尺寸并没有太大改善。如果从定向灯到模型的入射角改变(例如,通过旋转模型),质量也会变化。

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

1 个答案:

答案 0 :(得分:0)

尝试使用法线贴图而不是凹凸贴图。