纹理单元的最强大打开方式：WebGL

前端

2023-01-30 08:36:24

纹理单元：在 3D 图形中增添真实感

3D 模型的真实感是图形技术的一大追求，纹理单元在其中扮演着至关重要的角色。纹理单元允许您为模型添加各种纹理，赋予它们更逼真的视觉效果。

什么是纹理单元？

纹理单元是 WebGL 中的一种特殊对象，用于存储纹理数据并将其与渲染器关联。纹理单元的编号从 0 开始，具体数量取决于您的显卡支持的情况。

如何使用纹理单元？

1. 激活纹理单元

使用 activeTexture() 函数激活纹理单元：

gl.activeTexture(gl.TEXTURE0); // 激活纹理单元 0

2. 设置纹理数据

使用 texImage2D() 函数设置纹理数据：

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data); // 设置 2D 纹理数据

3. 使用着色器程序

着色器程序定义了纹理如何应用于模型。使用 useProgram() 函数：

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

4. 绘制模型

使用 drawElements() 函数绘制 3D 模型：

gl.drawElements(gl.TRIANGLES, indexCount, gl.UNSIGNED_SHORT, 0); // 绘制三角形模型

示例代码：

// 激活纹理单元 0
gl.activeTexture(gl.TEXTURE0);

// 创建 2D 纹理
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// 设置纹理图像数据
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

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

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

// 获取纹理采样器 uniform 变量
const samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");

// 将纹理单元 0 绑定到采样器 uniform 变量
gl.uniform1i(samplerUniform, 0);

// 绘制模型
gl.drawArrays(gl.TRIANGLES, 0, numVertices);