An error when try to use mipmaping in three.js

问题:

I'm trying to use mipmaps generation in three.js textures.

When creating a texture I assign an image of size 512x512 to mipmaps[0].
Thus if my understanding is correct this image should be used by WebGL to generate smaller mipmaps textures. But then I see a black texture rendered and errors like this:

in chrome

WebGL: drawElements: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled.

in firefox

Error: WebGL: A texture is going to be rendered as if it were black, as per the OpenGL ES 2.0.24 spec section 3.8.2, because it is a 2D texture, with a minification filter requiring a mipmap, and is not mipmap complete (as defined in section 3.7.10).

The code for creating a texture looks like:

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;
};

The same problem using a canvas instead of an image.

To clarify:

• image is power-of-2
• image already loaded

Can someone give me a hind where to dig this problem to?

回答1:

Problem solved. I have understood my mistake. I was confused by an empty texture's mipmaps array after rendering and decided that mipmaping does not working. In fact it should be empty as webgl does not return generated stack of images.