纹理盒：用WebGL探索3D纹理的奥秘

见解分享

2024-01-18 03:18:22

纹理盒：实现逼真3D场景的秘密

了解纹理盒

纹理盒是一种特殊的纹理类型，由六个纹理组成，分别代表立方体的六个面。与传统的二维纹理不同，纹理盒允许您纹理三维对象，从而创造出逼真的3D效果。

纹理盒的工作原理

要使用纹理盒，您需要加载六个纹理图像并将其应用到纹理盒。纹理盒的纹理坐标是三维的，使用法向量作为纹理坐标。这意味着您可以将纹理盒映射到三维对象的表面，并根据对象的形状和方向调整纹理。

使用纹理盒的优势

使用纹理盒纹理三维对象有以下优势：

逼真的视觉效果： 纹理盒允许您创建具有高水平细节和真实感的3D对象。
提高性能： 与单个大型纹理相比，纹理盒可以提高性能，因为它们只加载对象可见的部分。
多功能性： 纹理盒可以用于各种应用程序，包括游戏、电影和增强现实。

WebGL中使用纹理盒

要使用WebGL中的纹理盒，您需要执行以下步骤：

创建一个WebGL上下文。
加载纹理图像。
创建一个纹理盒并加载纹理图像。
设置纹理盒的参数。
创建您的三维对象。
应用纹理盒到对象。
设置场景的视图投影矩阵。
渲染场景。

代码示例

以下代码示例演示如何在WebGL中使用纹理盒来纹理立方体：

// 加载纹理图像
const images = [];
for (let i = 0; i < 6; i++) {
  images[i] = new Image();
  images[i].src = 'texture' + i + '.jpg';
}

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

// 加载纹理图像到纹理盒
for (let i = 0; i < 6; i++) {
  gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, images[i]);
}

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

// 创建立方体
const vertices = [
  // 前面
  -1, -1,  1,
  1, -1,  1,
  1,  1,  1,
 -1,  1,  1,

  // 后面
  -1, -1, -1,
 -1,  1, -1,
  1,  1, -1,
  1, -1, -1,

  // 顶部
  -1,  1, -1,
 -1,  1,  1,
  1,  1,  1,
  1,  1, -1,

  // 底部
  -1, -1, -1,
  1, -1, -1,
  1, -1,  1,
 -1, -1,  1,

  // 左侧
  -1, -1, -1,
  -1, -1,  1,
  -1,  1,  1,
  -1,  1, -1,

  // 右侧
  1, -1, -1,
  1,  1, -1,
  1,  1,  1,
  1, -1,  1
];

const indices = [
  0, 1, 2, 0, 2, 3,
  4, 5, 6, 4, 6, 7,
  8, 9, 10, 8, 10, 11,
  12, 13, 14, 12, 14, 15,
  16, 17, 18, 16, 18, 19,
  20, 21, 22, 20, 22, 23
];

// 创建着色器程序
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, `
  attribute vec3 position;
  varying vec3 vPosition;

  void main() {
    vPosition = position;
    gl_Position = vec4(position, 1.0);
  }
`);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, `
  precision mediump float;
  varying vec3 vPosition;
  uniform samplerCube texture;

  void main() {
    gl_FragColor = textureCube(texture, vPosition);
  }
`);
gl.compileShader(fragmentShader);

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

// 获取属性位置
const positionLocation = gl.getAttribLocation(program, 'position');

// 启用属性
gl.enableVertexAttribArray(positionLocation);

// 绑定属性
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);

// 获取uniform位置
const textureLocation = gl.getUniformLocation(program, 'texture');

// 绑定uniform
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
gl.uniform1i(textureLocation, 0);

// 启用深度测试
gl.enable(gl.DEPTH_TEST);

// 渲染循环
function render() {
  requestAnimationFrame(render);

  // 清除颜色缓冲区和深度缓冲区
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clearDepth(1.0);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // 设置模型视图矩阵
  const modelViewMatrix = mat4.create();
  mat4.translate(modelViewMatrix, modelViewMatrix, [0, 0, -5]);
  mat4.rotateX(modelViewMatrix, modelViewMatrix, angle);
  mat4.rotateY(modelViewMatrix, modelViewMatrix, angle);
  mat4.rotateZ(modelViewMatrix, modelViewMatrix, angle);

  // 设置投影矩阵
  const projectionMatrix = mat4.create();
  mat4.perspective(projectionMatrix, 45 * Math.PI / 180, canvas.width / canvas.height, 0.1, 100);

  // 设置模型视图投影矩阵
  const modelViewProjectionMatrix = mat4.create();
  mat4.multiply(modelViewProjectionMatrix, projectionMatrix, modelViewMatrix);

  // 设置uniform
  gl.uniformMatrix4fv(gl.】