Three.js: Sampling with uv2 fails in IE11 and Edge

[Astrak]

Sampling with the uv2 attribute (for AO maps, lightmaps) is broken in IE11 and Edge. The issue is described at http://codepen.io/Astrak/pen/OpwEZj. The experiment uses a MeshStandardMaterial with few maps (color, normal, roughness, metalness and a PMREM envmap) and an AO map. You can see the expected render with any other browser. But if one tries on IE11 or Edge the result is :

The problem gets fixed if uv is used for sampling instead of uv2.

Three.js version

• [x] Dev
• [x] r84
• [x] r83...

Browser

• [x] IE11
• [x] Edge

OS

• [x] Windows

(Note : I've failed to write a custom material without uv2 from the standard one via ShaderMaterial to show both results in the same experiment. This led me to ask the correct way for this on stackoverflow, reproduced on the three.js forum.)

[mrdoob]

@bhouston do you have a Windows machine at hand?

[looeee]

Here's my result - Edge is left, Chrome right

Microsoft Edge 38.14393.0.0

[Astrak]

Indeed I just went to the mall to test on few windows 10 PC, the issue did not appear. The Edge version was 38.14393.0.0 too.

My Edge is 20.10240.16384.0 and IE11 is 11.0.10240.16231.

Just tested on a friend's Windows 7 machine with IE11 (unknown version) : screwed AO map also

So it seems to happen on old Edge builds and IE11.

It has been a problem for a customer whose machines are all win7/IE11 obviously :)

[bhouston]

I get the issue in IE11 default in Windows 10:

This is a test Windows 10 machine that just has the default installation settings as of 10 months ago.

Given the other information, it apperas that this is fixed in more recent versions of IE11.

This did not reproduce in Edge.

[bhouston]

So to debug this I would try to identify if the issue is in the vertex shader or the fragment shader or in the data flow (uploading of the data.)

(1) I would try modifyng the vertex shader to pass UV2 to both UV1 and UV2 and see if at least the OA map looks right. Basically this would allow ruling out the issue is with the upload of the UV2 data.

(2) I would then undo that change and then look to force UV2 in the fragment shader to the AO map and avoid any logic with regards to that enabling UV2 -- no defines or anything, because they could be the problem.

(3) If I can force it I would add back the logic to conditionally define UV2s in the fragment shader and see if they work and which is failing.

To sum up: Main Memory -> Vertex Shader -> Fragment Shader. I would ensure that the data can be fine in each stage. When I can not get the right data in one stage then I would look at what conditions or modifications to the data that are there and see if I can remove them and if that helps. Basically it is a search approach. I think it would take a couple hours to do.

I've done this before for the Nexus 5 issues and the PBR shader issues.

[Astrak]

I finally gave those tests a go this morning.

• (1) Upload is ok : using uv2 as input of both vUv and vUv2 outputs a correct render.
• (2) Removing every uv2, vUv2, aoMap and lightmap defines had no effect on the result, so I did not go on to (3).

But as I was playing with (1) I noticed the following behaviour :

• Using uv as input of vUv and uv2 as input of vUv2 gives a broken render
• Using uv as input of vUv and vUv2 gives a correct render
• Using uv2 as input of vUv and vUv2 gives a correct render
• Using uv2 as input of vUv and uv as input of vUv2 gives a broken render.

In other words : using only one attribute for both vUv and vUv2, whether it be uv or uv2, gives a correct render. Using both attributes gives a broken render.

Additionnaly I've been noticing that the patterns of the "broken" sampling are the same. @WestLangley deleted his post but earlier asked for a screenshot of a render of the material applied to a plane, I began to think that time had come to try it. It appears the second attribute, whether it is uv or uv2, that is used for sampling, is... shifted to the left, its first value 'x' is slightly increased. Not kidding :

Thus Im curious about what would happen if one samples roughnessmaps and metalnessmaps using more sampling attributes like uv3 and uv4 ! Anyway I would deduce it is an internal IE issue ?

[Astrak]

I did not find any related issue on the Edge issue tracker so I posted one https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11403668/.

We could address the issue by making the use of uv2 optional, in a material parameter, like useUv2 ? @mrdoob

[mrdoob]

Seems like the edge team has assigned the bug.

[Mugen87]

Closing. This issue won't be fixed in the library.

[Astrak]

For the record, Microsoft Edge's team has decided not to fix it: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11403668/ :disappointed:

[bhouston]

Doesn't matter. Microsoft Edge is replacing their browser with WebKit/Blink and I think ANGLE will come with it.

[bhouston]

https://www.tomshardware.com/news/microsoft-edge-google-chrome-chromium,38192.html

[LENINGOLD]

ease fix:
model.geometry.attributes.uv2 = model.geometry.attributes.uv2.clone();