Three.js: Examples: Replace UV debug texture.

[Mugen87]

Description of the problem

UV_Grid_Sm.jpg is actually wrong because (0,0) is located bottom left not top left. This was already reported here #13936.

Since then I've noticed this texture lead multiple times to confusion. We should definitely replace it with a correct visualization of the UV space.

Does anyone like to contribute a royalty-free texture that we can use in the project? @looeee did make a suggestion in #13936 however it was unfortunately not accepted.

@WestLangley It would be great if you can define what you mean with "more-conventional reference map"^^.

Three.js version

• [x] Dev
• [x] r106
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[WestLangley]

UV_Grid_Sm.jpg is actually wrong
(0,0) is located bottom left not top left.

Actually, I would not say that.

three.js does not impose a particular uv convention. Note that by the GLTF convention, uv (0, 0) is located in the upper-left, and GLTFLoader works just fine.

three.js just expects uv (0, 0) to be located at the start of the texture buffer. Texture.flipY can be used to control that.

The "correct" UV reference map is one that is consistent with your geometry.

Maybe we should have two example uv reference textures: uv_grid_opengl and uv_grid_directx. There are plenty online, if you can find one that is royalty-free.

[Mugen87]

Maybe we should have two example uv reference textures: uv_grid_opengl and uv_grid_directx.

I'm fine with that. Nevertheless, since geometry generators like PlaneGeometry are not compatible with the current version of UV_Grid_Sm.jpg, the status quo is not satisfying. And apart from glTF, the common perception of three.js UV space is the lower left convention. At least I made this experience with many three.js users.

[looeee]

three.js does not impose a particular uv convention.

The issue here is not what convention we are using, it's that the UV test texture is used in many examples and in most of them, presumably, the UV coordinates written on the texture don't match up to the UV coordinates of the geometry it's displayed on. We should fix that.

Texture.flipY can be used to control that.

That's a simple fix - we can just update the examples to flip the texture. Perhaps this would be a bit confusing to users though? Also the numbers would be upside down.

[sciecode]

Not sure if it falls under the "more-conventional reference map" case, but I've made this UV Test Grid a while back, upon noticing the problem with the current one.

I could easily re-create the directx version, as well as fix any problems it currently has.

Live Example

[Mugen87]

@sciecode Perfect! It would be great if you can contribute both files and fix the examples 👍

[sciecode]

Sure, no problem.
Any suggestions for the grids before I setup the PR?

[Mugen87]

I think it's totally sufficient to just replace the textures. It seems you also changed the camera setup in the raycaster example.

Any suggestions for the grids before I setup the PR?

What do you mean by that?^^

[sciecode]

I think it's totally sufficient to just replace the textures. It seems you also changed the camera setup in the raycaster example.

Oh yes, I changed the camera setup to better showcase the texture, I won't be pushing this change.

Any suggestions for the grids before I setup the PR?

What do you mean by that?^^

Just wondering if anyone has any suggestions on how to improve the texture, I didn't feel the need to add the extra grid divisions that are present on the original texture, but perhaps there is a underlying reason for that.

Different color scheme, different font, bigger text... that sort of stuff.

[Mugen87]

I personally think it looks good 😊

[looeee]

Just wondering if anyone has any suggestions on how to improve the texture

Looks great to me too.