Improve bump map quality in threejs

Question

I have a model with a flat surface where I'm applying a bump map texture to draw and put some text on it. The code I'm using is this:

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 has the model and 4 directional lights with shadow enabled. The bump map works great but the quality is really bad. The bump map size is 2048x2048, I was expecting much better quality. Here some images:

As you can see it's very pixelated and increasing the texture size doesn't improve it much. The quality also varies if the incidence angle from the directional lights to the model changes (for example, by rotating the model).

The bump map is just a pure black and white image, could adding some anti-alias to the image improve the quality? I understand that the bump map only modifies the way the light behaves, it doesn't modify the geometry but I read on some site that increasing the number of faces of the model could improve the bump map (not displacement map) detail, could this work?

Answer 1

Try using a normal map instead of a bump map.