Streaks appear after postprocessing is enabled on apple devices(iphone、macbook)

Questions
,
1

It runs well before I add LUTPass.
before add lutpass
But after I add LUTPass, black streaks appear on the screen.
Xnip2023-08-22_16-49-34
How to fix this problem?

2

Do you also see this issue with the official demo? three.js webgl - 3d luts

Besides, do you mind sharing more information about your devices e.g. OS version, GPU and with what browsers you have tested?

3

Macbook pro 2018 intel cpu
Radeon Pro 560X 4 GB
And I test it on iphone11. Also have this problem.
But my Android phone Redme k40 pro (Snapdragon 888) is ok.

I found that this problem is not only caused by enabling lutpass, but also other post-processing passes, such as SMAAPass

4

What is the macOS and iOS version of both devices?

5

I tried to replace the model in this example with my model, and this problem also exists.
I also tried to write a simple shader. In the fragmentShader, the color of the picture is directly output, and there will be such a result.
code like this:

vertexShader: /* glsl */ `
      precision highp float;
      varying vec2 vUv;
      void main() {
        vUv = uv;
        gl_Position = vec4( position, 1.0 );
      }
`
  fragmentShader: /* glsl */ `
      precision highp float;
      uniform sampler2D tDiffuse;
      varying vec2 vUv;
    
      void main() {
        vec4 originalColor = texture2D(tDiffuse, vUv);
        gl_FragColor = originalColor;
      }
`
6

Macos is 13.5
iphone 11 ios 17.0 beta
and iphone 14 pro ios 16.5.1

7

Currently I have adopted a way to temporarily fix this problem. After I scaled the model to a small value (0.05), it behaved normally in most cases. But if my camera is far away, this problem will still exist.

8

Maybe this issue is related to depth precision. Do you see any improvements by enabling logarithmic depth buffer? You can do this by setting the logarithmicDepthBuffer ctor parameter of WebGLRenderer to true.

9

Yes, the first thing I thought of when I found this problem was the problem of depth precision.
I tried setting the WebGLRenderer’s logarithmicDepthBuffer property to true, but that didn’t help the end result.
I also tried setting the side property of all materials to FrontSide, but only a small part of the stripes disappeared, and most of the stripes still existed.
Now I know that the black stripes are caused by aoMap. After I set aoMapIntensity to 0, the black stripes disappear, but the frame is still abnormal.
Xnip2023-08-23_10-44-56

10

Any chances to demonstrate the issue with a live example?

11

I have solved this problem by using logarithmicDepthBuffer. It didn’t work before because I set it wrong. I didn’t set it when constructing WebGLRenderer, but set the property of renderer directly. What a stupid mistake.
Thank you for your reply.

1 Like