Error in Three.js Component after Version 0.148

Questions
1

I recently encountered an issue with one of my components after updating Three.js from version 0.148. The component works as expected in version 0.148, but after updating to the latest version, I noticed a bug.

import { Effects } from "@react-three/drei";
import { extend, Object3DNode } from "@react-three/fiber";
import { UnrealBloomPass } from "three-stdlib";

extend({ UnrealBloomPass });

declare global {
  namespace JSX {
    interface IntrinsicElements {
      unrealBloomPass: Object3DNode<UnrealBloomPass, typeof UnrealBloomPass>;
    }
  }
}

const PostProgress: React.FC = () => {
  return (
    <Effects disableGamma>
      <unrealBloomPass threshold={1} strength={5} radius={1} />
    </Effects>
  );
};
export default PostProgress;

Error in console:

FRAGMENT

ERROR: 0:160: 'vUv' : undeclared identifier
ERROR: 0:160: 'texture' : no matching overloaded function found
ERROR: 0:160: 'rgb' : field selection requires structure, vector, or interface block on left hand side
ERROR: 0:160: '=' : dimension mismatch
ERROR: 0:160: '=' : cannot convert from 'highp float' to 'highp 3-component vector of float'
ERROR: 0:160: 'vUv' : undeclared identifier
ERROR: 0:160: 'vUv' : undeclared identifier

155: return f0 * ( 1.0 - fresnel ) + ( f90 * fresnel );
156: } // validatedvarying vec2 vUv;
157: uniform sampler2D colorTexture;
158: uniform vec2 texSize;uniform vec2 direction;

//...many many glsl

Now, I keep using version 0.148 and everything goes OK

I would appreciate any suggestions, workarounds, or insights into what might be causing this issue. Thank you in advance for your help!

2

three had a breaking change that affects shaders. try updating stdlib and drei, if it persist it must be out of date. you can make that pr yourself if you want or open an issue so someone does it.

it makes little sense to use threes postpro though, all you’re getting is a slow performing old effect composer that isn’t maintained. use pmndrs/postprocessing instead. here’s a selective bloom example

2 Likes
3

uVu was apparently replaced with vMapUv

Before:

diffuseColor.a *= texture2D(alphaMap, vUv).r;

After:

diffuseColor.a *= texture2D(alphaMap, vMapUv).r;

Relevant Github comment: r151 throws error when THREE-CustomShaderMaterial is based on materials that have a map · Issue #25742 · mrdoob/three.js · GitHub

1 Like