# Parallax map in physical material got wired small line on steps

**URL:** <https://discourse.threejs.org/t/parallax-map-in-physical-material-got-wired-small-line-on-steps/60099>\
**Category:** Questions\
**Tags:** textures, materials\
**Created:** [January 9, 2024, 9:54am UTC](https://discourse.threejs.org/t/parallax-map-in-physical-material-got-wired-small-line-on-steps/60099 "2024-01-09T09:54:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![towrabbit](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/towrabbit/32/6955_2.png) [@towrabbit](https://discourse.threejs.org/u/towrabbit)\
**Post date:** [January 9, 2024, 9:54am UTC](https://discourse.threejs.org/t/parallax-map-in-physical-material-got-wired-small-line-on-steps/60099/1 "2024-01-09T09:54:09Z")

</div>

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](https://codesandbox.io/p/sandbox/three-js-parallaxmap-physicalmateiral-zygw7q?file=%2Fsrc%2Findex.ts%3A587%2C21)

 ![0ac7f41c81e9c38d1a34ff867ec7ce66](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/a/ea9ba1645152b3c2510a884d944b90e4e0219962.jpeg)

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.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/4/34adb0d928c8853627a8f1f9feb02d3feaf7988e.jpeg)

my code is based on [https://apoorvaj.io/exploring-bump-mapping-with-webgl/](https://apoorvaj.io/exploring-bump-mapping-with-webgl/)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/d/8d66f86fd9fdfed5fe2f9cea333b9ae0c18db392.jpeg)

and I find some example related to this topic:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/e/3e0ad27d37cf35bdbf09ef172f298e698851e959.jpeg)  
[https://techbrood.com/threejs/examples/webgl\_materials\_parallaxmap.html](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

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [January 9, 2024, 10:01am UTC](https://discourse.threejs.org/t/parallax-map-in-physical-material-got-wired-small-line-on-steps/60099/2 "2024-01-09T10:01:27Z")

</div>

[May be related](https://discourse.threejs.org/t/terrain-height-map-banding/53849) - most likely a precision issue.

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [January 9, 2024, 10:17am UTC](https://discourse.threejs.org/t/parallax-map-in-physical-material-got-wired-small-line-on-steps/60099/3 "2024-01-09T10:17:18Z")

</div>

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

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/7/17fdc7616803fe541dab2cf8e044aa80e2b692bb.jpeg)

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

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/b/7baa5935cf8a5469b3235d6390afa069315d7caa.jpeg)  
Windows Chrome RTX 4090

---

<div class="post-metadata">

**Author:** ![towrabbit](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/towrabbit/32/6955_2.png) [@towrabbit](https://discourse.threejs.org/u/towrabbit)\
**Post date:** [January 9, 2024, 11:13am UTC](https://discourse.threejs.org/t/parallax-map-in-physical-material-got-wired-small-line-on-steps/60099/4 "2024-01-09T11:13:04Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [January 10, 2024, 8:44am UTC](https://discourse.threejs.org/t/parallax-map-in-physical-material-got-wired-small-line-on-steps/60099/5 "2024-01-10T08:44:37Z")

</div>

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.