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贴图代码

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

// 图片转换成Canvasvar 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换成canvasgl.uniform1i(u_Sampler,0);

获取2的n次幂数值 

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