请问为什么在webgl我换成自己的纹理图片就报错了呢

发布于 2023-03-14 13:29:52

请求大家帮忙看看呀

查看更多

关注者
0
被浏览
695
Jsonco
Jsonco 图形社区官方人员 2023-03-14
奔驰的蜗牛

12345.png

在WebGL中,图片的宽度和高度必须是2的幂次方(如2、4、8、16、32、64等)。如果加载的图片不是2的幂次方,则WebGL会自动将其转换为最接近的2的幂次方大小,但会影响渲染效果和性能。如果你加载的图片不是2的幂次方,有以下几种解决方案:
调整图片大小:可以使用图片编辑软件(如Photoshop等)将图片的宽度和高度调整为2的幂次方大小,然后再加载到WebGL中。
2.使用纹理重复(Texture Repeat)或纹理裁减来设置。对于水平和垂直方向上的重复,需要使用gl.TEXTURE_WRAP_S和gl.TEXTURE_WRAP_T参数分别指定。可以使用以下常量来指定重复或截取:
gl.REPEAT:重复纹理
gl.CLAMP_TO_EDGE:裁剪到纹理的边缘
var texture = gl.createTexture();
var image = new Image();
image.onload = function() {
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
}
image.src = 'my-image.png';在上面的示例代码中,我们使用gl.TEXTURE_2D来指定纹理类型,并且在加载图像后,设置纹理的Wrapping属性为gl.REPEAT。如果要将纹理裁剪到边缘,只需将gl.REPEAT更改为gl.CLAMP_TO_EDGE即可。具体API应用我建议你可以参考下面连接:
https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/texParameter

1 个回答

撰写答案

请登录后再发布答案,点击登录

发布
问题

分享
好友

手机
浏览

扫码手机浏览