[three.js] 解決貼圖無法重複的問題 Solving with Texture RepeatWrapping Fail Issue

今天開發three.js專案的時候遇到了一個該死的問題，就是模型上的貼圖一直無法如願的作Repeating，不管我怎麼改，不管我怎麼貼，就是無法重複貼圖。

(正常的重複貼圖應該要是這樣)

(但結果一直是這樣，Mesh的兩端一直無法重複做貼圖)

所以我就拼命地對Texture改參數、查Document，總共耗了約4個多小時還是徒勞無功之後，我才認命地開始Google相關Issue。而這個Issue也真不好找，用了好多種關鍵字才找到最後的答案。

以下是相同Issue:

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

 

最後是three.js中的共同作者在文中回答:

About the texture repeat problem: WebGL only supports the repeat wrapping mode for power-of-two textures. Your ground texture is 401×401. You’ll need to resize it to 256×256 or 512×512 to get the desired effect. Three.js silently overrides the wrapping mode to clamp to edge if the texture is not power-of-two.

 

重重地往我臉上揍了一拳，才讓我想起當年在寫OpenGL ES的時候也遇過這個問題。也就是說，在這種輕量級的3D Rendering當中，WebGL為了讓圖形的處理可以保持在一定的效能，而無法支援NPOT Texture (Non-Power-of-Two)，也就是貼圖的單邊解析度，必須是二的次方才行，比如 (64×64), (256×256) 或 (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.

原因是為什麼呢？依照官方的文件，應是Mipmap Generation以及Shader Execution的關係。

而官方也提出了相對應的方法:

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. image is an HTML image object that has been fully loaded; its onload handler has already been called.

也就是你可以用API將圖形調整為最接近的二的次方數，所以現在我們就可以漂亮地將該死的重複貼圖貼在我們該死的模型上啦～！