UnrealBloomPass effect error/bug

[jasonh9]

running into an error with the UnrealBloomPass post processing effect

implementation is as follows,

import "./App.css";
import React, { useEffect, useRef } from "react";
import { ForceGraph3D } from "react-force-graph";
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js";

function App() {
const fgRef = useRef();

useEffect(() => {
const bloomPass = new UnrealBloomPass();
bloomPass.threshold = 4;
bloomPass.strength = 1;
bloomPass.radius = 0;
fgRef.current.postProcessingComposer().addPass(bloomPass);
}, []);

....

return (
<>

</>
);

...

---

hook.js:608 THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Material Name:
Material Type: ShaderMaterial

Program Info Log: Fragment shader is not compiled.
�

FRAGMENT

ERROR: 0:85: 'luminance' : no matching overloaded function found
�

80:
81: void main() {
82:
83: vec4 texel = texture2D( tDiffuse, vUv );
84:

85: float v = luminance( texel.xyz );
86:
87: vec4 outputColor = vec4( defaultColor.rgb, defaultOpacity );
88:
89: float alpha = smoothstep( luminosityThreshold, luminosityThreshold + smoothWidth, v );
90:
91: gl_FragColor = mix( outputColor, texel, alpha );

[vasturiano]

@jasonh9 can you make a simple reproducible example on https://codesandbox.io/ ?

[jasonh9]

@vasturiano thanks for the comment, heres a what I have

https://codesandbox.io/p/live/99fbf006-b308-4223-a441-00ba6f2f8b0e

[jasonh9]

I applied the GlitchPass, and it is working as expected.

[vasturiano]

I applied the GlitchPass, and it is working as expected.

@jasonh9 do you mean that the GlitchPass works, but the BloomPass doesn't, when applied the exact same way?

[vasturiano]

Also, it's recommended to import the component like this instead:

import ForceGraph3D from "react-force-graph-3d";