Weird texture artifacts (noise) when rendering textures

Questions
1

3
31354×1376 78.7 KB

2
2600×776 149 KB

1
11140×928 99 KB

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
    gltfLoader.load(
        // Resource URL
        `${ THEME_DIR }/assets/models/window.gltf`,
        // Called when the resource is loaded
        function (gltf) {
            // Configure model
            gltf.scene.name = '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
                    material.color.convertSRGBToLinear();

                    // Assign
                    // n.material = material;

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

            // Add model to the scene
            group.add(gltf.scene);
        }
    );
2

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
3

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

1 Like