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 ) );
}