texImage2D:宽度或高度超出范围,Chrome 24。

7

我刚开始研究 Three.js 的优点。

在尝试使用纹理渲染球体时,我遇到了一个问题。

我创建了一个全景照片图像并尝试将其加载到球体上。

我正在使用内置于 Three.js 中的 WebGL 渲染器(从 GIThub 获取了最新的 zip 文件)。

有两件事让我感到困惑:

  1. 球体包括纹理在内在 Firefox 和 Safari 中完美地呈现,但在 Chrome(24.0.1312.52)中却没有呈现。
  2. 当我尝试另一张图片时,例如 @kennydude 在 github 上的示例,它在所有三个测试浏览器中都能正常工作。

在 Chrome 中出现错误的唯一迹象是这个警告:

WebGL:INVALID_VALUE:texImage2D:宽度或高度超出范围

我的脚本完全基于 @kennydude 的示例。我将错误追溯到 Three.js 文件 r. 55 的第25330行。那是我能到达的最远的地方。

为了在 Chrome 中运行 webGL,我禁用了黑名单(我的 GPU 出现在该列表中)。

有什么想法吗?任何帮助都将不胜感激。


顺便提一下,您可以在http://www.in2systems.nl/diensten/上尝试这个有故障的图像。 - Bart
5
这条信息的意思是纹理的大小超过了GPU的安全支持范围。一些GPU驱动程序在纹理过大时会出现错误。您可以通过调用gl.getParameter(gl.MAX_TEXTURE_SIZE)来检查允许的最大大小。如果要加载的纹理过大,请考虑创建画布,将图像绘制到画布上进行调整大小,然后从画布中创建纹理。 - gman
这张图片确实比我的浏览器中的MAX_TEXTURE_SIZE 4096要大。我将应用调整大小来解决这个问题。干杯,gman! - Bart
1个回答

5

尝试将图像缩放到2的幂大小,例如4096x1024。


谢谢,那就是诀窍。我只需要将宽度设置为2的幂大小,并根据原始比例设置高度即可。谢谢!!! - Bart

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接