threejs - normalize UV coordinates to 0 and 1 issue

Question

i have a model with UV coordinates less than 0 and greater than 1. im trying to normalize these coordinates into the range 0 and 1 but with bad results. at moment im using this function to convert any UV coordinate into my target range

private convertNumberToUV(numb:number) {
    let converted = 0;

    if(numb < 0 || numb > 1) {
      if(numb < 0){ numb = -numb; }
      converted = numb - Math.floor(numb);
    }
    else if(numb > 1){
      converted = numb - Math.floor(numb)
    }
    else {
      converted = numb;
    }


    return converted;
}

the result is this

but the expected result is this

where im wrong?

@pailhead, my goal is to port the first texture onto the atlas with normalized UV points. My question is if could work in this way. I normalize the first UV coordinates to 0 and 1 and to avoid the "stretch" effect i also repeat the texture onto the second atlas for a number of times equal to what was done with the "repeat" function

yes original texture is tiled and coordinates go from -3 to +5, but i paste the original texture into a bigger atlas texture. This last texture have coordinates from 0 to 1, for this motive i want to convert the tiled coordinates into the new range — Diagonal Think, Apr 19 '18 at 14:48
im not sure if this is supposed to work like this. In a shader you could use `fract` to modulate the uvs, but depending on how they're laid out, is it indexed and such i imagine this would cause weird effects. I imagine a wall thats has 3 segments and u values of `[0,1.5,3]`. Running your logic on this would yield `[0,0.5,0]` which would look like a big strech, and then a mirror back to the start. Also, are you ever going to hit your second condition? — pailhead, Apr 19 '18 at 16:55

score 1 · Answer 1 · answered Apr 19 '18 at 20:52

1

Imagine you have a wall with a window and it's planar mapped. It's scaled such that one corner is at UV(0,0) and another is at UV(3,1). Let's just focus on the U dimension, and observe where the window is. One edge is at U(1.5) and the other can be at U(2).

|0|---|1.5|-|2|--|3| <- a slice through the wall, U axis

If we map a brick texture onto this, and set myTexture.wrapS = THREE.RepeatWrapping the brick will be uniformly distributed across the wall and repeat 3 times in that process.

If you modulate these uvs the way you do, you would end up with something like this

|0|-[0.5]-|0||0|

Which would produce senseless but predictable results. The left half of the texture would be stretched all the way to the window. Then under and above the window it would display the same half but in reverse, the remaining bit of the wall would show just horizontal lines and no brick texture since it's stretched to infinity.

answered Apr 19 '18 at 20:52

pailhead

5,162
2
25
46

then i think that if i want to paste a repeated texture into a bigger atlas (without RepeatWrapping) i must paste this texture for the number of times it is repeated and then I could normalize the uv points. For example if a texture is repeated for 5 times and i copy this texture for 5 times onto an atlas at this point if i use UV coordinates from 0 and 1 I will actually use all the texture that was previously repeated – Diagonal Think Apr 20 '18 at 08:40
I'm actually not sure what you're referring to there :) care to elaborate? – pailhead Apr 20 '18 at 17:28
okay. i edited my main post in the end. it seems that threejs does not help so much in this case. the models have been designed to be loaded individually, while I would like to load more in a single geometry and in a single texture – Diagonal Think Apr 20 '18 at 18:46
I think you might have to use GLSL in order to achieve this. – pailhead Apr 20 '18 at 19:56
1

Either look into `THREE.ShaderMaterial` or `Material.onBeforeCompile` – pailhead Apr 20 '18 at 19:57
maybe the solution is this. i will see. very thanks for availability. is it not possible to send private messages on SO? I wanted to send you a link – Diagonal Think Apr 20 '18 at 20:35
There is not. Are you familiar with the three.js forum and slack?https://discourse.threejs.org/ https://threejs.slack.com/messages/C0AR9959Q – pailhead Apr 20 '18 at 20:48
im joined to threejs forum. my nickname is Diagonal_Think – Diagonal Think Apr 21 '18 at 09:46

threejs - normalize UV coordinates to 0 and 1 issue

1 Answers1