Parallax map in physical material got wired small line on steps

I was trying to add a parallax map extends MeshPhysicalMaterial, it worked somehow but I got some problems:
https://codesandbox.io/p/sandbox/three-js-parallaxmap-physicalmateiral-zygw7q?file=%2Fsrc%2Findex.ts%3A587%2C21

the first is that, I set the camera position uniform as a static uniform and didn’t update any camera position data as uniform to shader, but it worked.

second, I got small lines on the surface, and the lines number depends on the number of layers.

my code is based on https://apoorvaj.io/exploring-bump-mapping-with-webgl/
image

and I find some example related to this topic:


https://techbrood.com/threejs/examples/webgl_materials_parallaxmap.html
and it shows the same issue as the second I metiond
and the second issue happens in my work M3 MBP but it did’t show up on my android phone/windows 11 pc with RTX3070ti / iphone 12. I don’t know if it is percision related or some default settings difference.

any information are welcome

May be related - most likely a precision issue.

It hasn’t the addition of extra searches that increase the precision dynamically. If you look at the example you see it also gets visible layers on steep angles, you can hide by increasing the steps, if the issue disappears by increasing the steps it’s related to that. But might be also related to interpolation precision issues.

You see the staircase with too little steps resulting in gaps at steeper angles on top

If you say it appears on your phone only it might be the latter as especially on interpolation likely is lower.

But in your example i don’t have the artifacts you have


Windows Chrome RTX 4090

thank you for your infomation, I’v set the step to 32 in my example, and the line artifacts happend on M3 MBP, and my windows pc don’t have the artifacts too. so maybe its because on M3 MBP, the percision is lower? how it could happend , I find out the lower hight on height map were fine(the white part).

It doesn’t seem like general precision then but rather hardware related or at least both then. You can try track down the issue by removing parts, or securing parts from division by zero and such to track down the part causing the artifacts.

Also trying to change the height or normal map for testing, if you say the artifacts occur only at low values /blacks this can be also a precision issue, could be the case for instance if the heightmap was not linear so banding in blacks occur.

1 Like