Compensate bump map artifacts from customized shader

I replaced three’s internal phong shader “bumpmap_pars_fragment” with custom bump mapping where I create a bump map out of an RGB encoded height map which looks like this:

To get a height value per pixel, the R channel is multiplied by 65536.0, G with 256.0 , then height = R + G + B.

This works smoothly beside the following artifacts. I could narrow it down to relate with the G (green) channel – as the G has a discontinuity (compensated by the R channel shifting analogically):

It does not matter whether shadows are enabled or not.

The artifacts change their appearance (slightly) as soon as dFdx/dFdy values are manually scaled up or down. But they never disappear.

EDIT: I’m pretty sure this is caused by the bump map’s default magFilter = LinearFilter; which obviously won’t work properly around the discontinuity in the green channel (as it can be seen in the picture at the top of the post).

So when I set the texture’s magFilter = NearestFilter;, the artifacts disappear – but this grid appears:

Anyone has an idea why this grid is appearing? Or are ther any other approaches on how to achieve a smooth bump map from my height map? Many thanks :pray:

Could I manipulate the texture2D call/edit the phong shader to only bilinear filter the R and B channel and leave the G channel at nearest … ? :thinking: Without losing too much performance?

Tilting the camera with magFilter = THREE.NearestFilter; makes the grid disappear towards the horizon.

When using a normal map, no such grid appears, also with magFilter = THREE.NearestFilter active.

Why are these artifacts appearing with bump maps but not with normal maps using NearestFilter?