JavaScript WebGL中使用图片的玄机

2023-11-26 04:09:42

JavaScript WebGL使用图片渲染画面，让很多萌新都不知所措，有很多细节需要注意，更别说真正的实现 WebGL 开发，其中一个就是设置颜色效果始终有限，当你想到使用图片时，你就会遇到纹理的使用。

纹理是什么？

在计算机图形学中，纹理是应用于3D模型表面的位图。位图是一张二维图像，由一系列像素组成。每个像素都有一个颜色值和一个透明度值。纹理可以用来给3D模型添加细节，使其看起来更加真实。

如何在WebGL中使用纹理

要使用纹理，首先必须创建一个纹理对象，然后才能将图片加载到纹理对象中。

创建一个纹理对象

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.generateMipmap(gl.TEXTURE_2D);
  gl.bindTexture(gl.TEXTURE_2D, null);
};
image.src = "image.jpg";

应用纹理到3D模型

gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.uniform1i(samplerLocation, 0);