REFLECTION_ROUGHNESS_BLUR error on UMD version

[astraccia]

Hi there. I'm trying to adapt Billboard Reflection to run with Aframe and it's throwing this error when I try to apply the shader on the ground (reflective) mesh:

Uncaught TypeError: Cannot set properties of undefined (setting 'REFLECTION_ROUGHNESS_BLUR')
    at BillboardReflection.enableReflection (BillboardReflection.js:298:48)

Here's my code:

const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

const geometry2 = new THREE.PlaneGeometry( 2, 2, 2 );
const material2 = new THREE.MeshNormalMaterial();
const ground = new THREE.Mesh( geometry2, material2 );
ground.rotation.set(-1.5, 0, 0);
ground.position.set(0, -0.5, 0);
scene.add( ground );

const billboardReflection = new BillboardReflection();
billboardReflection.roughnessBlur = false;
let reflect = billboardReflection.create(mesh);
ground.material.onBeforeCompile = shader => billboardReflection.enableReflection(shader, { roughnessMapBlur: false })

Am I doing something wrong here?

Thanks!

[fariskas]

having the same issues as well. but setting the materials used to MeshStandardMaterial solves the console error but i still cant have the ground to reflect the cube.

did you manage to figure it out?

[astraccia]

Same thing here... Changed the material to MeshStandardMaterial solved the REFLECTION_ROUGHNESS_BLUR issue, but the reflection doesn't work at all.

[0beqz]

The issue seems to be that shader.defines can be undefined during onBeforeCompile although I always expected it would be an object. So I try to assign REFLECTION_ROUGHNESS_BLUR to it which results in that error.

I've merged a PR that sets shader.defines to an empty object in case it is undefined so that we can always assign REFLECTION_ROUGHNESS_BLUR to it.

Let me know if that resolves your issue.

[fariskas]

I did a test with the latest version with three 139. same issues whereby i cant get the reflection to work. No more errors logged thogh if im not using MeshStandardMaterial

// MESH
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
const material = new THREE.MeshStandardMaterial({});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const geometry2 = new THREE.PlaneGeometry(2, 2, 2);
const material2 = new THREE.MeshStandardMaterial({ metalness: 0.7, roughness: 0.1 });
const ground = new THREE.Mesh(geometry2, material2);
ground.rotation.set(-1.5, 0, 0);
ground.position.set(0, -0.3, 0);
scene.add(ground);

const billboardReflection = new BillboardReflection();
let reflect = billboardReflection.create(mesh);

ground.material.onBeforeCompile = (shader) => {

    billboardReflection.enableReflection(shader, {
        roughnessMapBlur: true,
        roughnessMapBlurIntensity: 0.85,
        roughnessMapBlur: true,
    });
};

[0beqz]

Hey, can you confirm whether the issue was fixed in the latest commit? It addresses a few issues with planes that were created in three.js (and not imported from a GLB for example).

[fariskas]

Unfortunately still no reflection for me with the same set up as above. on UMD version btw.

i also tried the demo repo youve recently made. same issues there as well