Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fragment shader error resulting in black objects #25

Closed
bryndsey opened this issue Feb 13, 2024 · 3 comments
Closed

Fragment shader error resulting in black objects #25

bryndsey opened this issue Feb 13, 2024 · 3 comments

Comments

@bryndsey
Copy link

I am using N8AO via @react-three/postprocessing. On most devices - both mobile and desktop - it works well.

However, I recently got a Pixel Fold device, and noticed that all of the objects utilizing n8ao are completely black. (It may be worth noting that the objects seem to be black specifically because I'm using the default black color for the AO. If I change the AO color, then the objects just become "tinted" with the chosen color.)

Inspecting the device, I see the following error(s):

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Program Info Log: Fragment shader is not compiled.

0:125: S0032: no default precision defined for variable 'vec2[4]'0:125: S0032: no default precision defined for variable 'vec2[4]'
Screenshot 2024-02-12 at 7 23 42 PM

If I remove this effect, the issue goes away (though I obviously lose my AO).

Based on the error, I tried setting a default precision on the whole gl object I'm providing to my r3f Canvas, but that doesn't seem to fix it. I also tried using a React error boundary around the effect so it could be disabled in cases where it wouldn't work, but I'm guessing the error is happening outside of what React sees, so it didn't fix it.

I verified that my device supports WebGL2.

I tried on Chrome, Firefox, and the Samsung browser on the Pixel Fold, and they all exhibit the same behavior on that device.

Working (Macbook Pro) Not working (Pixel Fold)
Screenshot 2024-02-12 at 7 42 06 PM image

Live website

I know there are several layers of abstraction at play (react-postprocessing, postprocessing, react-three-fiber), but it seems that using other effects don't exhibit the same issue, so I'm assuming it's something to do with this effect. I'm happy to file this elsewhere if the issue isn't here though.

@N8python
Copy link
Owner

Just need to specify a precision. Let me go do that now.

@N8python
Copy link
Owner

This is probably fixed w/ version 1.8.1 - can you check?

@bryndsey
Copy link
Author

I just tried it out, and it seems to be working now. Thanks for the quick fix!

Now to wait for the postprocessing library to update with this new version (since I had to add the effect manually to use this version) 😅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants