WebGL贴花：让你的 3D 对象焕发生机

2024-01-05 20:55:48

前言

WebGL 是一个强大的工具，它可以用来创建引人入胜且互动性强的 3D 图形。通过利用纹理贴花，我们可以让我们的 WebGL 对象更加逼真和有吸引力。

贴花原理

纹理贴花是一种将图像或纹理应用到 3D 对象 поверхностей 的技术，从而为它们增加额外的细节和纹理。这类似于我们在现实世界中将贴花应用到物体上的方式，例如汽车上的贴花或墙上的壁画。

GLSL 着色器

在 WebGL 中，纹理贴花是通过 GLSL 着色器实现的。具体来说，我们使用内建的 texture() 函数从纹理中采样颜色。该函数的第一个参数是纹理采样器（表示纹理的位置），第二个参数是纹理坐标。

vec4 color = texture(sampler2D, textureCoord);

纹理贴花步骤

将纹理贴花应用到 WebGL 对象的过程涉及以下步骤：

创建一个纹理： 使用 WebGLRenderingContext.createTexture() 函数创建一个 WebGL 纹理对象，并使用 WebGLRenderingContext.bindTexture() 将其绑定到当前纹理单元。
配置纹理参数： 使用 WebGLRenderingContext.texParameteri() 设置纹理参数，例如过滤和包装模式。
加载图像： 使用 WebGLRenderingContext.texImage2D() 将图像加载到纹理中。
创建着色器程序： 创建一个 WebGL 着色器程序，其中包含一个片段着色器，该片段着色器使用 texture() 函数从纹理中采样颜色。
渲染场景： 使用着色器程序渲染场景，并确保将纹理采样器和纹理坐标作为 uniform 变量传递给片段着色器。

示例

以下是一个简单的 WebGL 代码片段，展示了如何使用纹理贴花：

const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");

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

// 配置纹理参数
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);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// 加载图像
const image = new Image();
image.onload = function() {
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
};
image.src = "path/to/image.png";

// 创建着色器程序
const vertexShader = `
  attribute vec3 position;
  varying vec2 textureCoord;

  void main() {
    textureCoord = position.xy * 0.5 + 0.5;
    gl_Position = vec4(position, 1.0);
  }
`;

const fragmentShader = `
  precision mediump float;

  varying vec2 textureCoord;
  uniform sampler2D textureSampler;

  void main() {
    gl_FragColor = texture2D(textureSampler, textureCoord);
  }
`;

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// 渲染场景
gl.useProgram(program);

const vertices = new Float32Array([
  -1.0, -1.0, 0.0,
  1.0, -1.0, 0.0,
  1.0, 1.0, 0.0,
  -1.0, 1.0, 0.0,
]);

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

const textureCoordLocation = gl.getAttribLocation(program, "textureCoord");
const positionLocation = gl.getAttribLocation(program, "position");

gl.vertexAttribPointer(textureCoordLocation, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(textureCoordLocation);

gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLocation);

gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);