Encountering problems with transparent materials.

[Aneesh-balan]

Hi,

I'm currently working on an animation featuring a 3D model with glass materials (r3f). However, upon loading the model using 'useGLTF', the entire website experiences jerky behavior during scrolling. Upon removing the glass material, everything appears fine. I've tried several solutions, like setting 'depthWrite' to 'false' and reducing the number of lights, but the issue remains unresolved.

I'd greatly appreciate any ideas or suggestions to resolve this issue.

[shaktigit07]

Kindly Use Graphic Card and High-end System Bcz R3f and 3JS use GPU so it is important to provide that much power to run smoothly

[Aneesh-balan]

Do you have any suggestions to optimize the model?

[shaktigit07]

No , You have to change your system ,You can try to find some other way to optimize the code using AI

[Sammy593]

Esto suele suceder porque el modelo usa MeshPhysicalMaterial, el cual llega a usar muchos recursos, en su lugar usa MeshStandardMaterial.
Un ejemplo para reemplazar el material de un modelo .glb puede ser asi:

import { useGLTF } from '@react-three/drei';
import { GLTF } from 'three-stdlib';

export function Model() {
 const { nodes, materials } = useGLTF('/model.glb') as GLTFResult;

  materials['glass'] = new THREE.MeshStandardMaterial({
    color: 'white',
    opacity: 0.15,
    transparent: true,
    roughness: 0.7,
    metalness: 0.1,
  });

  return (
     {/* Tu Mesh aqui */}
   );
}

[NeuroNexusAI]

Yeah, glass materials in 3D WebGL scenes can look stunning, but they often affect site performance, especially during scroll. You might try optimizing the glass shader, lowering real-time reflections, or using transparent: true with proper render order to boost performance. It reminds me of سورة الانفطار مكتوبة, where every action is recorded. In 3D rendering, just like in life, even small elements can have a big impact.