I have been experimenting with mipmaps generation in textures using three.js.
During my texture creation process, I set an image of size 512x512 to mipmaps[0].
According to my understanding, WebGL should utilize this image to generate smaller mipmapped textures. However, I encounter a situation where a black texture is displayed on the screen and error messages like below are thrown:
in chrome
WebGL: drawElements: texture bound to texture unit 0 is not renderable. It may be 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 snippet for creating the texture appears as follows:
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 issue persists even when utilizing a canvas instead of an image.
To clarify:
- Image is power-of-2.
- Image has already been loaded.
Could someone provide guidance on how to troubleshoot this problem?