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' }}>

</div>

); }

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 (

); };

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" }}>

</div>

); }

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
my-project@0.1.0 C:\code\my-project
├─┬ @react-three/drei@9.112.0
│ ├─┬ @monogrid/gainmap-js@3.0.5
│ │ └── three@0.167.0 deduped                                <<<<<
│ ├─┬ @react-spring/three@9.6.1
│ │ └── three@0.167.0 deduped
│ ├─┬ camera-controls@2.7.4
│ │ └── three@0.167.0 deduped
│ ├─┬ maath@0.10.7
│ │ └── three@0.167.0 deduped
│ ├─┬ meshline@3.2.0
│ │ └── three@0.167.0 deduped
│ ├─┬ three-mesh-bvh@0.7.1
│ │ └── three@0.167.0 deduped
│ ├─┬ three-stdlib@2.29.11
│ │ └── three@0.167.0 deduped
│ ├── three@0.167.0 deduped
│ └─┬ troika-three-text@0.49.0
│   ├── three@0.167.0 deduped
│   └─┬ troika-three-utils@0.49.0
│     └── three@0.167.0 deduped
├─┬ @react-three/fiber@8.17.6
│ └── three@0.167.0 deduped
├─┬ @react-three/postprocessing@2.16.2
│ ├─┬ maath@0.6.0
│ │ └── three@0.167.0 deduped
│ ├─┬ postprocessing@6.36.1
│ │ └── three@0.167.0 deduped
│ └── three@0.167.0 deduped
├─┬ n8ao@1.8.4                                                <<<<<
│ └── three@0.167.0 deduped
└── three@0.167.0

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.