Procedural Mesh - UV-Mapping Issues

Help & Support
,
1

Hello lovely PlayCanvas Team :smiley: ,

I find myself in a bit of a predicament and hope that you can assist me. I am working on a VR application where I generate a procedural mesh for a teleportation beam. Currently, I am attempting to stylize the beam using a material and a texture.

In my opinion, my UVs are set correctly, but I have noticed that the texture is mirrored along the X-axis. To address this, I reversed my UV mapping by assigning the last UV coordinates to the first vertex.

Even though I have resolved the issue, I still wonder why the first vertex cannot simply start with the UV coordinates “0,0.” I have even created a sample project with a basic quad mesh that uses a UV mapping checker texture. I have marked the vertices and the negative Z-axis (WorldForward) to better illustrate the situation. The first vertex has UV coordinates “0,0,” and so on – everything becomes clearer when you look at the project.

https://playcanvas.com/project/1179421/overview/test-mxr

P.S. The texture is correctly positioned when the green 0 is visible in the bottom-left corner and the pink 9 is visible in the top-right corner.

Thank you in advance for your assistance!

2

You need to flip Y, so your

this.verticesUvs = [
    0, 0,
    1, 0,
    0, 1,
    1, 1,
];

should be

this.verticesUvs = [
    0, 1 - 0,
    1, 1 - 0,
    0, 1 - 1,
    1, 1 - 1,
];
3

Yea, i know. But why do i even need to this. WebGL UV-Coordinates are beginning with 0,0.
image
I am just curious why i have to do this. Why are textures mirrored? :slight_smile:

For example, if i would use Direct X, i would understand it, because their mapping beginn in topLeftCorner. But WebGL starts in bottomLeftCorner
image

4

I know that this fixes it, i wrote:
“In my opinion, my UVs are set correctly, but I have noticed that the texture is mirrored along the X-axis. To address this, I reversed my UV mapping by assigning the last UV coordinates to the first vertex.”

This fixed my problem. But why does it work that way. My first initialised vertex should be my start UV-coordinate (0,0), but i have to initialise it with (0,1). But it doesnt make sense, does it?
:smiley:

5

I found actually something to OpenGL:

image

  1. Textures are bottom up in memory. So the first byte of the texture memory is the top-left of the image
  2. The UV Coordinates are bottom up. (0,0) is the bottom left of the texture

If you don’t believe me that textures are stored bottom up in OpenGL, look at the documentation for glTexImage2D. It explicitly states that “The first element corresponds to the lower left corner of the texture image”. You can’t get clearer than that.

That’s quite interesting. It probably works the same for WebGL, does it ?

Here is the source of the text above: Texture Coordinates – D3D vs. OpenGL – PureDev Software

6

@slimbuck is the local expert on this.

7

Alright, ty.

I found a post, which explains the background. I am satisfied now with the answers, that i found there.

Background infos to WebGL UVs:

2 Likes