How to disable three.js to resize images in power of two?

Question

three.js automatically resizes the texture image, if it is not power of two. In my case am using a custom canvas as texture , which is not power of two.while resizing makes the texture not appearing properly.Is there any way to disable the resizing of the images in three.js

Answer 1

three.js actually is trying to do you a favor.

Since it is open source we can read the source code of WebGLRenderer.js and see that the setTexture method calls the (non public visible) method uploadTexture.

The latter has this check:

if ( textureNeedsPowerOfTwo( texture ) && isPowerOfTwo( image ) === false ){

    image = makePowerOfTwo( image );
}

Which is quite explanatory itself.

You may wonder now what textureNeedsPowerOfTwo actually checks. Let's see.

function textureNeedsPowerOfTwo( texture ) {

        if ( texture.wrapS !== THREE.ClampToEdgeWrapping || texture.wrapT !== THREE.ClampToEdgeWrapping ) return true;
        if ( texture.minFilter !== THREE.NearestFilter && texture.minFilter !== THREE.LinearFilter ) return true;

        return false;
}

If you use wrapping for the texture coordinated different from clamp or if you use a filtering that is not nearest nor linear the texture gets scaled.

If you are surprised by this code I strongly suggest you to take a look at the MDN page on using textures.

Quoting

The catch: these textures [Non Power Of Two textures] cannot be used with mipmapping and they must not "repeat" (tile or wrap).

[...]

Without performing the above configuration, WebGL requires all samples of NPOT [Non Power Of Two] textures to fail by returning solid black: rgba(0,0,0,1).

So using a NPOT texture with incorrect texture parameters would give you the good old solid black.

---

Since three.js is open source, you can edit your local copy and remove the "offending" check.

However a better, simpler, and more maintainable approach is to simply scale the UV mapping. After all it is there just for this use case.