[Three. js] solves the problem of being unable to repeat without using Texture RepeatWrapping Fail Issue

There are some things you can't find when you want to find,

And some things, inadvertently, can be seen everywhere;

I thought this was a common thing in my life,

However, this is also true in the vast interconnected sea.

The usual accumulation is for temporary needs,

Several minutes of investment,

Accumulated,

It will become a vast ocean,

Take a sail boat,

Not stranded.

Note a drop of water at ordinary times,

You need to have the Pacific Ocean,

Advertisement words are good,

However, there are several people who can really understand its true meaning!

A good threejs open source link is provided:

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

[Three. js] solves the problem of being unable to repeat without using Texture RepeatWrapping Fail Issue

Three is released today. when I was in the js case, I encountered a serious problem, that is, the models on the model had never been capable of performing Repeating. No matter how I change it, no matter how hard I do it, I cannot repeat it again.

(This should be the case for normal Heavy Duty requests)

(But as a result, the two ends of the Mesh have been unable to duplicate them for failover)

So I tried my best to modify Texture's data and check the Document. It took about four or more hours, but it was still just because I could not do anything, I started to talk to Google about Issue. This Issue is not easy to find. It uses many irrelevant words to find the final answer.

The following are the same Issue:

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

 

The following is the co-author in three. js:

About the texture repeat problem: WebGL only supportsrepeatWrapping mode for power-of-two textures. your ground texture is 401 × 401. you'll need to resize it to 256x256 or 512x512 to get the desired effect. three. js silently overrides the wrapping modeclamp to edgeIf the texture is not power-of-two.

 

I had a hard punch in my workshop to remind me of this problem when I used OpenGL ES. That is to say, in this kind of 3D Rendering of batch computing, WebGL ensures the processing efficiency of linear processing, however, NPOT Texture (Non-Power-of-Two) cannot be supported, that is, the single-cell resolution of zookeeper must be the second Power, for example (64 × 64 ), (256 × 256) or (512 × 256), (32 × 64 ).

 

While OpenGL 2.0 and later for the desktop offer full support for non-power-of-two (NPOT) textures, OpenGL ES 2.0 and WebGL have only limited NPOT support.

Why? According to the official file, it should be the relationship between Mipmap Generation and Shader Execution.

The official team also proposed corresponding methods:

However, if your application requires the REPEAT wrap mode for correctness, you can easily resize the image to the next largest power of two dimensions using DOM APIs. here is an example of how to do this.ImageIs an HTML image object that has been fully loaded; itsOnloadHandler has already been called.

That is, you can use an API to convert the nearest second power, so now we can pretty well repeat the dead model here ~!