CODEWITHSUNDEEP
javascriptthree.js
Maciej Wojcik
Maciej Wojcik

Reputation: 2171

ThreeJS issue with resizing images when they are actually as a power of 2

I've got a strange issue regarding the automatic resizing of textures by WebGLRenderer using threejs.

I know that WebGL requires the sizes of textures* to be the power of 2.

*-the textures that are using non-LinearFilter, or have wrapping not as a clamp set

My texture has wrap set as RepeatWrapping and the sie of the texture is 65536 x 512 so this is 2^16 x 2^9

I'm assuming that the size of the texture is correct. However, the console says:

THREE.WebGLRenderer: Texture has been resized from (65536x512) to (16384x128)

It's very bad that the texture is downsized because it's very visible on the quality of rendered texture.

I don't really know what I'm doing wrong. According to the documentation, everything is set correctly.

Is there a possibility to prevent downsizing?

I don't think that's helpful but I'm also including the code of loading textures

const texture = new TextureLoader().load(path);
texture.anisotropy = 2;
texture.magFilter = LinearFilter;
texture.minFilter = LinearFilter;
texture.wrapS = RepeatWrapping;
texture.wrapT = RepeatWrapping;
texture.repeat.set(1 / tilesAmountHorizontally, 1 / tilesAmountVertically);

Upvotes: 2

Views: 1358

Answers (1)

Vsevolod
Vsevolod

Reputation: 31

So you can find out what the maximum size of the device supports

var gl = document.getElementById( "my-canvas").getContext( "experimental-webgl" ); alert(gl.getParameter(gl.MAX_TEXTURE_SIZE))

the texture can be divided and applied in parts

Upvotes: 2

Related Questions