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

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

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

---

在 WebGL 2 中，WebGLSampler 是一个用于描述纹理采样器配置的对象。采样器允许开发者定义一组规则来控制如何从纹理中采样像素值。这些规则包括纹理过滤方式、纹理环绕模式等。通过使用 WebGLSampler，可以更灵活地控制纹理采样行为，这对于提高渲染质量和性能非常有用。

创建 WebGLSampler

要创建一个新的 WebGLSampler 对象，可以使用 WebGL 上下文的方法 createSampler：

var sampler = gl.createSampler();

配置 WebGLSampler

一旦创建了 WebGLSampler，就需要设置其纹理参数。这可以通过 samplerParameteri 和 samplerParameterf 方法来完成。

gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, gl.REPEAT);

使用 WebGLSampler

一旦配置好 WebGLSampler，就可以在着色器中使用它。首先需要将采样器绑定到纹理单元，然后在着色器中引用该纹理单元。

// 绑定采样器到纹理单元
gl.activeTexture(gl.TEXTURE0);
gl.bindSampler(0, sampler);

// 在着色器中使用采样器
uniform sampler2D u_texture;
uniform sampler2D u_sampler;
void main() {
  vec4 color = texture(u_texture, v_texCoord, u_sampler);
  gl_FragColor = color;
}

示例

下面是一个完整的示例，展示了如何创建 WebGLSampler，配置采样器参数，并在着色器中使用它：

// 创建采样器
var sampler = gl.createSampler();

// 设置采样器参数
gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, gl.REPEAT);

// 绑定采样器到纹理单元
gl.activeTexture(gl.TEXTURE0);
gl.bindSampler(0, sampler);

// 加载纹理
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.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

// 使用采样器进行渲染
// ...

总结

WebGLSampler 是 WebGL 2 中用于定义纹理采样行为的对象。通过使用 WebGLSampler，可以更精细地控制纹理采样的方式，这对于实现高质量的渲染效果和优化性能非常重要。正确地配置和使用采样器可以帮助开发者更好地控制纹理的显示方式，特别是在处理高分辨率纹理或多纹理渲染场景时。