0

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:

enter image description here

enter image description here

enter image description here

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?

gman
  • 100,619
  • 31
  • 269
  • 393
Andres
  • 6,080
  • 13
  • 60
  • 110
  • Use a normal map instead? – gman May 12 '17 at 02:34
  • +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 May 12 '17 at 05:41
  • 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 May 12 '17 at 20:37
  • Also, when you're creating your canvas images, make sure it isn't applying its own anti-aliasing: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled – TheJim01 May 12 '17 at 20:40
  • @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 May 12 '17 at 23:39

1 Answers1

2

Try using a normal map instead of a bump map.

gman
  • 100,619
  • 31
  • 269
  • 393