GLB frosted glass material only marginally affect primitives, doens't affect <a-text> or <a-image> #5514
Description
Description:
I imported an object created in blender where it has different index of refraction and transmission to show as a frosted glass
however, it only affect primitives like boxes and spheres but it doesn't affect itself, as if I put a copy of it behind, it doesn't affect text, and it doesn't affect images, so pretty much any element that is 2D doesn't get blur.
I tried playing with the material and changing parameters but I still can't get refraction to work.
- A-Frame Version:1.5.0
- Platform / Device: chrome/quest2
- Reproducible Code Snippet or URL:
`<a-box position="0 -0.3 -4"></a-box>
<a-gltf-model id="postContent" src="#blenderModel" scale="1.5 1.5 1.5" position="0 0 -50" visible="false" pinch-click>
</a-gltf-model>
<script>
const modelEl = document.querySelector("a-gltf-model#postContent");
modelEl.addEventListener("model-loaded", () => {
console.log("event triggered");
const model = modelEl.getObject3D("mesh");
console.log("event model", model);
model.traverse((child) => {
console.log("event child", child);
if (child.isMesh) {
const material = child.material;
//Modify material properties
material.ior = 1.9; // Index of Refraction
material.roughness = 0.3; // Roughness
material.transmission=1;
material.color.set("gray"); // Diffuse color (red)
// Emissive color (green)
material.needsUpdate = true;
}
});
});
</script>`