If the magFilter
of a bump map in Three.js is set to THREE.NearestFilter
, a weird grid artifact appears on the object. The grid's spacing is equivalent to the bump map pixels. As soon as the magFilter is put back to default (THREE.LinearFilter
) everything is fine.
I, however, need to disable filtering since I'm calculating a height value out of an RGB encoded height map.
Interestingly, when trying out a random normal map, setting the magFilter
to NearestFilter
produces no such artifacts.
Tried this with and without shadow mapping, with various bump maps and normal maps. Aim would be to get rid of them.
——
EDIT: An example (not my code but for demonstration) https://codepen.io/Mombasa/pen/ivdyC
With linear filtering, things look perfect:
Just by adding bmap.magFilter = THREE.NearestFilter;
after line 14 – i.e., disabling linear filtering, the bump mapping gets kinda reduced to the outlines of the bump-mapping affected areas.