I am facing a challenge with a model that has a flat surface where I am trying to apply a bump map texture to add some text. The code snippet I am using for this task is as follows:
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;
The scene includes the model and four directional lights with shadows enabled. While the bump map effect works, I am disappointed by the low quality of the output. Despite using a bump map size of 2048x2048, the expected high-quality result is not achieved. Here are some example images:
https://i.sstatic.net/lf8wj.png
https://i.sstatic.net/nDkHB.png
https://i.sstatic.net/fCdHB.png
As seen in the images, the texture appears pixelated, and even increasing the size does not significantly enhance the quality. Moreover, the quality seems to vary when the angle of incidence from the directional lights changes (e.g., through rotation of the model).
Given that the bump map is only a black and white image, would adding anti-aliasing improve the overall quality? I have read suggestions about increasing the number of faces of the model to enhance the bump map detail (not displacement map); is this approach recommended?