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?

+1, you should be able to get more precision from it while basically doing the same thing. The other thing worth noting here, are you using jpg? — pailhead
1) If I'm understanding correctly, you're setting both minFilter and magFIlter to THREE.LinearFilter (it is the default value for magFilter). Have you tried other filters, like THREE.NearestFilter? 2) Increasing the number of faces shouldn't have any effect unless you're assigning UVs to the inner vertices, which would prevent location percentage calculations from going too far down the precision rabbit hole. 3) Try some anti-aliasing. What is it going to hurt? — TheJim01
Also, when you're creating your canvas images, make sure it isn't applying its own anti-aliasing: developer.mozilla.org/en-US/docs/Web/API/… — TheJim01
@gman I replaced the bump map with a normal map (changing also the colors, not black and white) and it works perfect, it has much more quality. Post it as an answer so I can accept it :) — Andres

gman gman · Accepted Answer · 2017-05-13T00:56:13

1

votes

Try using a normal map instead of a bump map.

Improve bump map quality in threejs

1 Answers