Grid artifacts when disabling linear filtering on bump map in Three.js

218 views Asked by At

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.

bump map 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:

enter image description here

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.

enter image description here

0

There are 0 answers