Texture mistake


image

I wanted to map the surface generated by the data, so I customized the uvs of the mesh, but the result of the map looked strange, I don’t know what I did wrong

const uvs = [
            0,
            0,
            0,
            0.20000000298023224,
            0,
            0.4000000059604645,
            0,
            0.6000000238418579,
            0,
            0.800000011920929,
            0,
            1,
            1,
            0,
            1,
            0.20000000298023224,
            1,
            0.4000000059604645,
            1,
            0.6000000238418579,
            1,
            0.800000011920929,
            1,
            1
        ]

Manual provision of UVs is risky (and cumbersome). Instead of:

const uvs = [
            // 24 lines of numbers
         ]

try to calculate the UVs like this:

const uvs = [];
for( var v of vertices )
   uvs.push( v[0]/15, v[1]/40 );

Note, that this is not a general solution. It is only a demonstration that works for the specific object in your code.

2 Likes

Thank you very much for your answer, which has solved my problem. I always thought that the calculation of texture map coordinates is always 0-1 or 1-0 to assign, but I never thought that it is possible to set texture coordinates in this way. Please tell me more, why I set texture coordinates in accordance with 0-1 and the effect is not right, but you set them is right, although the problem has been solved. But I didn’t understand

For textures important are not only the end UV coordinates, but also all intermediate coordinates. See the attached image:

  • A – initially all texture coordinates are from 0 to 1
  • B – when a texture is used on an object, it stretches and intermediate coordinates (0.2, 0.4, 0.6, 0.8) also stretch
  • C – when several copies of a texture are used, it is done my using coordinates outside interval [0,1]; in this case, coordinates are from 0 to 5
  • D – note, that each piece of the texture still uses only values from 0 to 1; this is because GPU uses only the fractional part of the coordinates
  • E – imagine that intermediate coordinates are not equally distributed; in this case the image of the texture will shrink or extend, because it follows strictly the intermediate coordinates (i.e. the fractions)
  • F – even if the texture is scaled, the distortion will continue to be visible, because uneven fractions will be stretched to larger still uneven fractions (this is what happens in your case)
  • G – if you look at the individual patched of the texture, each spans always from 0 to 1; but the fractions in [4,5] are condensed.

1 Like

Just an option for a hatch effect: Would you have a idea to fix the texture size on different size shapes? - #2 by prisoner849

2 Likes

OH,your explanation is easy to understand, which gives me a new understanding of texture, thank you for your patient answer, I admire your knowledge

1 Like

Thank you for your example, it helped me a lot