WebGL贴图 -- 支持非2的n次幂数值的图

WebGL贴图 

手里有一张图：2000x2048

在WebGL无法显示。原因是WebGL只支持2的n次幂数值的图

比如，高度和宽度符合以下规则

2^0=1
2^1=2
2^2=4
2^3=8
2^4=16
2^5=32
2^6=64
2^7=128
2^8=256

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D,texture);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,image); // image为图片元
gl.uniform1i(u_Sampler,0);

ThreeJs得到提示

THREE.WebGLRenderer: Texture has been resized from XXXXX to YYYY提示

Three贴图的时候会有如下的提示

three.js:20278 THREE.WebGLRenderer: Texture has been resized from (2000x2048) to (1024x2048).

修改WebGL贴图代码

上面的代码修改成如下，好用了。

// 图片转换成Canvas
var canvas = document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' );
canvas.width = floor(image.width);
canvas.height = floor(image.height);
var context = canvas.getContext( '2d' );
context.drawImage( image, 0, 0, canvas.width, canvas.height );

// WebGl的贴图代码
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D,texture);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE, canvas); // image换成canvas
gl.uniform1i(u_Sampler,0);

获取2的n次幂数值 

function floor(value) {
	return Math.pow( 2, Math.floor( Math.log( value ) / Math.LN2 ) );
}