[Three.js] Solve the problem of the map is not repeated solving with Texture repeatwrapping Fail Issue

There's something you can't find when you want to find it,

And some things, inadvertently, everywhere;

I thought it was a common thing in life,

But in the vast interconnected sea, so too.

The usual accumulation is for a moment's need,

A few minutes of input,

Accumulate,

Will be an ocean,

Carrying a boat,

Not to be stranded.

Usually note a drop in water,

When you have the Pacific Ocean,

The advertisement word is very good,

However, it really means that a few people can really understand it!

Attach a nice Threejs open source link:

Https://github.com/rmx/threejs-collada

[Three.js] Solve the problem of the map is not repeated solving with Texture repeatwrapping Fail Issue

Today, when the three.js was launched, it was a dead question, that the stickers on the model had never been repeating, no matter what I did, no matter what I did, I could not duplicate the map.

(Normal re-map should be like this)

(But the result has always been that the two ends of the mesh have been unable to repeat the map)

So I tried desperately to change the number of texture, check the document, total consumption of about 4 hours or more after the labor of the work, I only then began to think of the fate of Google-related issue. And this issue is really not easy to find, with a lot of key words before finding the final answer.

The following are the same issue:

Https://github.com/rmx/threejs-collada/issues/16

Finally, the co-authors in the three.js replied in the text:

About the texture repeat PROBLEM:WEBGL is supports the repeat wrapping mode for power-of-two textures. Your ground texture is 401x401. You'll need to resize it to 256x256 or 512x512 to get the desired effect. Three.js silently overrides the wrapping mode to clamp to edge if the texture are not power-of-two.

The heavy punch in my face reminded me of this problem when I was writing OpenGL ES in the year. That is to say, in this lightweight 3D rendering, WEBGL is designed to maintain a certain level of performance, without supporting Npot Texture (Non-power-of-two), which is the single-side resolution of the decal, which must be a two-time line, such as ( 64x64), (256x256) or (512x256), (32x64).

While OpenGL 2.0 and later for the desktop offer full support for non-power-of-two (npot) textures, OpenGL ES 2.0 and WEBG L has only limited npot support.

What is the reason? According to the official documents, the relationship between mipmap generation and shader execution.

And the authorities have proposed the opposite approach:

However, if your application requires the REPEAT wrap mode for correctness, you can easily resize the image to the next LA Rgest power of dimensions using DOM APIs. Here's an example of what to do. Image is a HTML image object that has been fully loaded; Its onload handler have already been called.

That is, you can use the API to adjust the graph to the nearest two, so now we can nicely paste the dead duplicate stickers on the model we should die!