Question

我试图在three.js纹理中使用mipmaps生成。

创建纹理时，我将大小为512x512的图像指定给mipmap [0] 因此，如果我的理解是正确的，WebGL应该使用此图像来生成较小的mipmaps纹理。但后来我看到一个黑色纹理渲染和错误如下：

in chrome

WebGL：drawElements：绑定到纹理单元0的纹理不是渲染。它可能不是2的幂并且具有不兼容的纹理过滤或不是纹理完整的＆＃39;。或者纹理是Float或半浮点型带线性滤波，OES_float_linear或 OES_half_float_linear扩展未启用。

在Firefox中

错误：WebGL：纹理将呈现为黑色，根据OpenGL ES 2.0.24规范第3.8.2节，因为它是2D 纹理，需要mipmap的缩小过滤器，而不是 mipmap完成（如3.7.10节所定义）。

创建纹理的代码如下：

var texture = THREE.ImageUtils.loadTexture( 'images/512.png', undefined, function() {
    texture.repeat.set( 1, 1 );
    texture.mipmaps[ 0 ] = texture.image;
    texture.generateMipmaps = true;
    texture.needsUpdate = true;
};

使用画布而不是图像的同样问题。

澄清：


image is power-of-2

已加载图片

有人可以告诉我在哪里挖掘这个问题吗？

Answer 1

问题解决了。我理解了自己的错误。渲染后我被一个空纹理的mipmaps数组弄糊涂了，并认为mipmaping不起作用。实际上它应该是空的，因为webgl不会返回生成的图像堆栈。

尝试在three.js中使用mipmaping时出错

1 个答案: