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

简介: 有些东西,你想找的时侯,怎么也找不到,而有些东西,不经意间,随处可见;本以为这是生活中常见的事情,然而在浩瀚的互联大海中,也是如此。平时的积累是为了一时之需,几分钟的投入,积累起来,也会成为汪洋大海,载起一帆小舟,不至搁浅。

有些东西,你想找的时侯,怎么也找不到,

而有些东西,不经意间,随处可见;

本以为这是生活中常见的事情,

然而在浩瀚的互联大海中,也是如此。

平时的积累是为了一时之需,

几分钟的投入,

积累起来,

也会成为汪洋大海,

载起一帆小舟,

不至搁浅。

平时注一入滴水,

需时拥有太平洋,

广告词很好,

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


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

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


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

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

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

02

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

01

所以我就拼命地對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將圖形調整為最接近的二的次方數,所以現在我們就可以漂亮地將該死的重複貼圖貼在我們該死的模型上啦~!

02



目录
相关文章
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
77 0
|
3天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
11 1
|
10天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
JavaScript
Vue.js学习详细课程系列--共32节(4 / 6)
Vue.js学习详细课程系列--共32节(4 / 6)
35 0
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
64 1
|
2月前
|
数据采集 机器学习/深度学习 JavaScript
画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
51 0