WebGL入门（012）：WebGLTexture 简介、使用方法、示例代码

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.内容链接1Openlayers 【入门教程】 - 【源代码+示例300+】 2Leaflet 【入门教程】 - 【源代码+图文示例 150+】 3Cesium 【入门教程】 - 【源代码+图文示例200+】 4MapboxGL【入门教程】 - 【源代码+图文示例150+】 5前端就业宝典 【面试题+详细答案 1000+】

文章目录

在 WebGL 中，

WebGLTexture

是一个表示纹理的对象，用于存储图像数据并在渲染过程中使用。纹理可以应用于几何体表面，以模拟真实世界中的材质外观。纹理可以包含颜色信息、光照信息、透明度信息等，是实现复杂视觉效果的关键。

下面是对

WebGLTexture

的详细说明：

创建 WebGLTexture

要创建一个新的

WebGLTexture

对象，可以使用 WebGL 上下文的方法

createTexture()

：

var texture = gl.createTexture();

绑定 WebGLTexture

在 WebGL 中，必须先将纹理绑定到目标才能对其进行操作。通常使用

TEXTURE_2D

作为目标。

gl.bindTexture(gl.TEXTURE_2D, texture);

设置纹理参数

纹理参数可以控制纹理的行为，例如过滤方式、环绕模式等。这些参数通过

texParameteri

方法设置。

// 设置纹理过滤方式
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);// 设置纹理环绕方式
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

加载纹理数据

纹理数据可以通过

texImage2D

方法加载到纹理对象中。这通常涉及从图像文件中加载数据，或者直接从数组中加载数据。

// 从图像数据加载纹理var image =newImage();
image.src ='path/to/image.png';
image.onload=function(){
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D,0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);};// 从数组数据加载纹理var imageData =newUint8Array([/* ... */]);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D,0, gl.RGBA,4,4,0, gl.RGBA, gl.UNSIGNED_BYTE, imageData);

使用 WebGLTexture

一旦纹理数据加载完毕，就可以在着色器中使用纹理。通常的做法是先绑定纹理到纹理单元，然后在着色器中引用纹理单元。

// 绑定纹理到纹理单元
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);// 在着色器中使用纹理// 通常通过 uniform sampler2D 变量引用
uniform sampler2D u_texture;voidmain(){
  vec4 color =texture(u_texture, v_texCoord);
  gl_FragColor = color;}

示例

下面是一个完整的示例，展示了如何创建纹理，加载图像数据，并使用纹理进行渲染：

// 创建纹理var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);// 设置纹理参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);// 加载纹理数据var image =newImage();
image.src ='path/to/image.png';
image.onload=function(){
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D,0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);// 使用纹理进行渲染// ...};

销毁 WebGLTexture

当不再需要纹理时，可以使用

deleteTexture

方法释放资源。

gl.deleteTexture(texture);

总结

WebGLTexture

是 WebGL 中用于存储图像数据的对象，可以用于模拟各种材质效果。通过正确地创建、配置和使用纹理，可以极大地丰富 WebGL 应用程序的视觉表现力。纹理是实现高级渲染效果的重要组成部分，如光照、反射、折射等。