WebGL 赋能 3D 效果：纹理的强大运用

2023-11-04 08:06:47

引言

在上一节课中，我们介绍了纹理的相关内容，并使用 WebGL 进行了2D的实现。今天，我们将延续上节课的内容，探讨纹理在 3D 图形中的实现。同样，我们将吸取 MDN-Tutorial 的模式，相信这样的学习方式会让您受益匪浅。

纹理在 3D 图形中的作用

纹理是计算机图形学中不可或缺的一部分，它可以为 3D 物体添加逼真的细节和视觉效果。纹理本质上是图像数据，可以是颜色、光照、凹凸或其他属性。通过将纹理应用于 3D 模型的表面，我们可以显著提升模型的真实感。

WebGL 中纹理的使用

WebGL 中的纹理使用与 2D 图形中的纹理使用非常相似。首先，我们需要创建一个 WebGL 纹理对象，然后将图像数据上传到该对象。接下来，我们需要将纹理对象绑定到 WebGL 上下文，并设置纹理参数，例如纹理过滤模式和环绕模式。最后，我们可以使用纹理坐标将纹理应用于 3D 模型的表面。

具体示例

为了更好地理解纹理在 WebGL 中的使用，让我们通过一个具体示例来进行演示。我们将创建一个 WebGL 程序，并在其中加载一个 3D 模型并应用纹理。

首先，我们需要创建一个 WebGL 上下文。我们可以使用以下代码来创建 WebGL 上下文：

const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

接下来，我们需要加载 3D 模型。我们可以使用以下代码来加载 3D 模型：

const model = new THREE.ObjectLoader().load('model.gltf');

现在，我们需要创建一个 WebGL 纹理对象。我们可以使用以下代码来创建一个 WebGL 纹理对象：

const texture = gl.createTexture();

接下来，我们需要将图像数据上传到 WebGL 纹理对象。我们可以使用以下代码来将图像数据上传到 WebGL 纹理对象：

gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

现在，我们需要将 WebGL 纹理对象绑定到 WebGL 上下文。我们可以使用以下代码来将 WebGL 纹理对象绑定到 WebGL 上下文：

gl.bindTexture(gl.TEXTURE_2D, texture);

最后，我们需要设置 WebGL 纹理对象的参数。我们可以使用以下代码来设置 WebGL 纹理对象的参数：

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.generateMipmap(gl.TEXTURE_2D);

现在，我们可以使用纹理坐标将纹理应用于 3D 模型的表面。我们可以使用以下代码来使用纹理坐标将纹理应用于 3D 模型的表面：

const aPosition = gl.getAttribLocation(program, 'a_position');
const aTexCoord = gl.getAttribLocation(program, 'a_texCoord');
const uSampler = gl.getUniformLocation(program, 'u_sampler');

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition);

gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
gl.vertexAttribPointer(aTexCoord, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aTexCoord);

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(uSampler, 0);

gl.drawArrays(gl.TRIANGLES, 0, vertexCount);

现在，我们可以运行 WebGL 程序，并在其中渲染 3D 模型。我们可以使用以下代码来运行 WebGL 程序：

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

gl.useProgram(program);

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition);

gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
gl.vertexAttribPointer(aTexCoord, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aTexCoord);

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(uSampler, 0);

gl.drawArrays(gl.TRIANGLES, 0, vertexCount);