Lighting artifacts with gltf model

[yaroslavnikiforov]

Hi guys! Does anyone have any ideas about what can be causing such artifacts? I got them once while switching between apps on iOS. I can’t reproduce this but wonder what is broken here.

Here is a code sample which is used with relevant npm packages versions: elegant-galois-fznqx - CodeSandbox

And here are examples how it usually looks like:

[mjurczyk]

Does the scene use any fancy screen-space effects - reflection / refraction - or transmission?

[yaroslavnikiforov]

ior property of the material doesn’t have a default value. And the material has such configuration:

const skinMaterial = new MeshPhysicalMaterial({
    map: skinTexture,
    normalMap: normalTexture,
    color: 0xddd7d7,
    emissive: 0x20202,
    transmission: 0,
    roughness: 0.6,
    metalness: 0,
    normalScale: new Vector2(1, -1),
    ior: 1.4,
})

[donmccurdy]

It looks like this model has alpha blending enabled, when it should be opaque. If you’re using Blender to create the file you’d need to set Alpha Mode to “Opaque”. In three.js that’s similar to:

material.transparent = false;
material.depthWrite = true;

[yaroslavnikiforov]

Actually, alphaMode is set to OPAQUE in gltf, and also material has transparent property set to false and depthWrite is true.

[mjurczyk]

@yaroslavnikiforov

ior: 1.4,

Why set IOR at all if the element is opaque ?

Two things you can try as well:

1. Set the material to MeshBasicMaterial or MeshLambertMaterial. See if the issue still happens.
2. Set material.side to Three.FrontSide on every material on the model. It is related to an unending war led by the double-sided materials against mobile devices that has been happening from the dawn of time (and also double-sided materials simply have issues on some phones and render super weird.)

[yaroslavnikiforov]

The reason for the ior property is not being default is that I need a transmission blur effect (I reach it using a combination of ior, transmission, and roughness properties) and transmission property is dynamic. So transmission changes from 0 to 0.6. That’s why I use MeshPhysicalMaterial.
But currently, I don’t change transmission yet. So this issue happened when transmission was disabled.

I will try a suggestion with material.side, it sounds promising. Don’t think I will be able to check if that helps because it is hard to reproduce the issue.

Thanks for your replies @mjurczyk @donmccurdy .

[mjurczyk]

@yaroslavnikiforov

I need a transmission blur effect

Wild guess. If this this transmission (just with more roughness / opaqueness), then there seem to be some resolution issues - I haven’t checked the shader source myself, but it seems like the resolution of the transmission shader isn’t adjusting dynamically when you’re resizing the viewport:

Before resize:

After resize:

Switching apps in iOS does change their viewport size for a split second - which may cause that transmission shader to render at a very tiny resolution - which then, applied to the model, is rendered as a weird artefact.