Weird texture artifacts (noise) when rendering textures

Hello! During my work with three.js, I ran into the texture rendering issue. Whenever I’m using textures loaded from my GLTF model there is some sort of weird texture noise happening (red circles in the picture). But when I overwrite original textures with new materials, the noise disappears (blue circle in the picture). Would anyone be able to help me please? Thank you in advance for any advice!

// Load macOS window model
        // Resource URL
        `${ THEME_DIR }/assets/models/window.gltf`,
        // Called when the resource is loaded
        function (gltf) {
            // Configure model
   = 'window';
            gltf.scene.position.set(-3.8, 3.2, -1.2);

            // Traverse model
            gltf.scene.traverse(n => {
                if (n.isMesh) {
                    let material;

                    // Set material
                    material = new THREE.MeshStandardMaterial({
                        color: 0xFFFFFF,
                        roughness: .15,
                        metalness: .45,
                        envMap: textureCube

                    // Convert to SRGB

                    // Assign
                    // n.material = material;

                    // Makes shadow possible
                    n.castShadow = true;
                    n.receiveShadow = true;

            // Add model to the scene

Do the artifacts disappear if you disable shadows?

Your screenshots look like self-shadowing artifacts which can be mitigated in various ways e.g. by modulating the light.shadow.bias property.

1 Like

Many thanks! Removing those two lines solved the issue! :blush: Thank you!

1 Like