[three.js] 地图不能解决重复的问题 Solving with Texture RepeatWrapping Fail Issue

最新推荐文章于 2024-10-24 22:10:16 发布

weixin_33811961

最新推荐文章于 2024-10-24 22:10:16 发布

阅读量230

点赞数

有些事情，如果你正在寻找侯，怎么也找不到。

有的东西，不经意间，到处；

我认为这是生活中常有的事。

然而，在互联网的浩瀚大海，这同样适用。

正常的一小会儿的积累，

投入少，

积累，

洋大海，

载起一帆小舟，

不至搁浅。

平时注一入滴水，

需时拥有太平洋，

广告词非常好，

然而它真正的意义又有几人能真正领悟呢！

附一个不错的 threejs 开源链接：

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

[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將圖形調整為最接近的二的次方數，所以現在我們就能够美丽地將該死的重複貼圖貼在我們該死的模型上啦～。