N8AO produces THREE.WebGLProgram: Shader Error 0

[tonyblu331]

As soon as I disable, it works. Even on the simplest of scenes.

`import { Canvas, useFrame } from '@react-three/fiber';
import { useRef } from 'react';
import { EffectComposer, N8AO } from '@react-three/postprocessing';

const Box = () => {
const meshRef = useRef();

useFrame(() => {
meshRef.current.rotation.x += 0.01;
meshRef.current.rotation.y += 0.01;
});
return (




);
};
function App() {
return (
<div style={{ width: '100vw', height: '100vh' }}>








);
}

export default App;`

It works with SSAO, but because SSAO doesn't work with instances, I need N8AO. I also had the issue in the past where N8AO will give black artifacts in some devices.

My GPU drivers are up-to-date (RTX 3080) and I have tried with three different drivers.

[N8python]

Make sure you are using three.js r167 or earlier - as that is what is currently supported. 1.9 will bring support for r168.

[N8python]

What version of N8AO are you using? The modern version doesn't use that legacy function.

[tonyblu331]

I have tried using r167 and as well implementing the new way how the Git docs says, but still I face the same issue.

Tho I tried this approach and it runs `import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { useRef, useEffect } from "react";
import { EffectComposer, RenderPass } from "postprocessing";
import { N8AOPostPass } from "n8ao";

const Box = () => {
const meshRef = useRef();

useFrame(() => {
meshRef.current.rotation.x += 0.01;
meshRef.current.rotation.y += 0.01;
});

return (

<boxGeometry args={[1, 1, 1]} />


);
};

const Effects = () => {
const { gl, scene, camera, size } = useThree();
const composer = useRef();

useEffect(() => {
composer.current = new EffectComposer(gl);

const renderPass = new RenderPass(scene, camera);
composer.current.addPass(renderPass);

const n8aoPass = new N8AOPostPass(scene, camera, size.width, size.height);
composer.current.addPass(n8aoPass);

composer.current.setSize(size.width, size.height);

}, [gl, scene, camera, size]);

useFrame(() => composer.current?.render(), 1);

return null;
};

function App() {
return (
<div style={{ width: "100vw", height: "100vh" }}>






);
}

export default App;
`

[tonyblu331]

But I also have the question and concern, why in some devices when I ship a previous configurator I was using N8AO and I had to replace them, as during the testing part specifically on iOS devices it models appeared black, but on android and windows they were working fine. (At least the ones I tested on)

[N8python]

Okay - but that line of code isn't even part of N8AO anymore. You must be using an older version.

[N8python]

But I also have the question and concern, why in some devices when I ship a previous configurator I was using N8AO and I had to replace them, as during the testing part specifically on iOS devices it models appeared black, but on android and windows they were working fine. (At least the ones I tested on)....

I need more info here. Any errors on those devices?

[ayan4m1]

@N8python Three.js 0.167.0 and n8ao 1.8.4 give me the Shader Error described above in Chrome and Firefox - you can repro by cloning https://github.com/ayan4m1/leela-memorial and upgrading n8ao/three in package.json:

$ npm ls three
[email protected] C:\code\my-project
├─┬ @react-three/[email protected]
│ ├─┬ @monogrid/[email protected]
│ │ └── [email protected] deduped                                <<<<<
│ ├─┬ @react-spring/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├── [email protected] deduped
│ └─┬ [email protected]
│   ├── [email protected] deduped
│   └─┬ [email protected]
│     └── [email protected] deduped
├─┬ @react-three/[email protected]
│ └── [email protected] deduped
├─┬ @react-three/[email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ [email protected]                                                <<<<<
│ └── [email protected] deduped
└── [email protected]

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Material Name: 
Material Type: ShaderMaterial

Program Info Log: Must have a compiled fragment shader attached:
SHADER_INFO_LOG:
ERROR: 0:355: 'LinearTosRGB' : no matching overloaded function found

<EffectComposer disableNormalPass>
  <N8AO aoRadius={0.25} intensity={2} />
</EffectComposer>

[N8python]

I'm sorry - but that code simply doesn't exist in the codebase anymore. You can't be using the latest version.

[ayan4m1]

The only thing I can think of is that it's somehow related to my use of Gatsby. I have cleared Gatsby's cache and removed my node_modules directory. I have checked node_modules/n8ao/dist/N8AO.js and it contains sRGBTransferOETF, so I have no idea how it is seeing the old code either. I was hoping you might have some further insight. Thanks anyway, I guess I'll just wait to see if 1.9 changes anything.

[ayan4m1]

Wow... ok, so apparently @react-three/postprocessing uses an ancient version of n8ao...

From their package.json:

  "dependencies": {
    "buffer": "^6.0.3",
    "maath": "^0.6.0",
    "n8ao": "^1.6.6",
    "postprocessing": "^6.32.1",
    "three-stdlib": "^2.23.4"
  },

This seems to be causing my issue. Looks like your users may need yarn resolutions in order to work around this. Wish I realized that I was importing N8AO from r3p. So if you don't want to have to have a useFrame hook, we need to get react-three/postprocessing to bump their n8ao, or more likely make it a peerdep so this issue doesn't happen without creating more noise moving forward.

To be clear, using N8AOPostPass manually should work, but the react-three/postprocessing N8AO convenience component for EffectComposer is currently broken with three r167 because that version has a copy-pasted version of N8AO 1.6.x in it.

[N8python]

That's on the r3p people I'm afraid - maybe take it up there?

[ayan4m1]

Sure, thanks.

[verekia]

Hmm, R3P lists n8ao with"^1.6.6" which actually installs 1.9.2 because of the caret version. If you are stuck on a previous version of n8ao due to the R3P dep, maybe update your lockfile to get 1.9.2.