如何在WebGL中使用MipMap和各向异性过滤优化纹理

前端

2023-10-21 02:13:37

MipMap和各向异性过滤：提升纹理表现力的关键

纹理优化

当使用纹理时，我们经常会遇到纹理过大或过小的情况。纹理过大会导致一个像素对应多个纹素，从而产生烦人的摩尔纹。纹理过小则会导致出现讨厌的马赛克。

MipMap

MipMap是一种巧妙的技术，可以解决纹理过大的问题。它通过生成纹理的多个细节级别（LOD）来实现。LOD较低的纹理包含较少的细节，但占据的内存也更少。当纹理被缩小到较小的尺寸时，可以使用较低的LOD纹理来避免产生摩尔纹。

想象一下当你缩放一张图片时，它会变得模糊，但边缘仍然清晰。MipMap就是通过这种方式工作的，因为它创建了越来越模糊的纹理副本，以适应不同的尺寸。

各向异性过滤

各向异性过滤是一种不同的技术，用于解决纹理过小的问题。它通过使用不同的纹理样本，根据观察角度来计算最终的颜色值，从而消除纹理中的锯齿。

想象一下你站在一条铺有瓷砖的走廊里。当你从远处看瓷砖时，它们看起来是方格状的。但是，当你靠近瓷砖时，你会看到它们实际上是由许多小方块组成的。各向异性过滤就是通过这种方式工作的，因为它使用不同的样本点来创建纹理的更准确表示。

设置MipMap和各向异性过滤

在WebGL中，你可以使用以下代码来设置MipMap和各向异性过滤：

// 创建纹理
var texture = gl.createTexture();

// 绑定纹理
gl.bindTexture(gl.TEXTURE_2D, texture);

// 设置纹理参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// 加载纹理图像
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

// 生成MipMap
gl.generateMipmap(gl.TEXTURE_2D);

// 设置各向异性过滤
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAX_ANISOTROPY_EXT, 16);

示例代码

以下是一个使用MipMap和各向异性过滤的示例代码：

<!DOCTYPE html>
<html>
<head>

<script src="webgl.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var gl = WebGL.getContext("canvas");

// 创建纹理
var texture = gl.createTexture();

// 绑定纹理
gl.bindTexture(gl.TEXTURE_2D, texture);

// 设置纹理参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// 加载纹理图像
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

// 生成MipMap
gl.generateMipmap(gl.TEXTURE_2D);

// 设置各向异性过滤
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAX_ANISOTROPY_EXT, 16);

// 创建着色器程序
var program = gl.createProgram();

// 加载着色器代码
var vertexShaderSource = ...;
var fragmentShaderSource = ...;

// 编译着色器
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 链接着色器程序
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// 使用着色器程序
gl.useProgram(program);

// 设置顶点数据
var vertices = ...;

// 创建顶点缓冲区
var vertexBuffer = gl.createBuffer();

// 绑定顶点缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

// 填充顶点缓冲区
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 设置顶点属性
var positionAttributeLocation = gl.getAttribLocation(program, "position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// 设置纹理坐标数据
var texCoords = ...;

// 创建纹理坐标缓冲区
var texCoordBuffer = gl.createBuffer();

// 绑定纹理坐标缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);

// 填充纹理坐标缓冲区
gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW);

// 设置纹理坐标属性
var texCoordAttributeLocation = gl.getAttribLocation(program, "texCoord");
gl.enableVertexAttribArray(texCoordAttributeLocation);
gl.vertexAttribPointer(texCoordAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// 设置视口
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

// 清除颜色缓冲区
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 绑定纹理
gl.bindTexture(gl.TEXTURE_2D, texture);

// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>