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

three.js textures
ArUn picture ArUn · Mar 17, 2016 · Viewed 7.9k times · Source

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

Margaret Bloom picture Margaret Bloom · Mar 17, 2016

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.

Related questions

Three.js texture / image update at runtime

I am trying to change a cube image at run time by selecting an option from Select Form element. When running the code, the image changes after selecting, but the previous cube and image stays in the scene. How I …

Read More
Custom Texture Shader in Three.js

I'm just looking to create a very simple Fragment Shader that draws a specified texture to the mesh. I've looked at a handful of custom fragment shaders that accomplished the same and built my own shaders and supporting JS code …

Read More
Three.js Update Texture image

I'm using three.js to create a minecraft texture editor, similar to this. I'm just trying to get the basic click-and-paint functionality down, but I can't seem to figure it out. I currently have textures for each face of each …

Read More