计算机图形学环境贴图（Environment Mapping）教学指南

嘿，各位程序世界的魔法师们！今天咱们要踏入计算机图形学中一个超酷炫的领域 ------ 环境贴图（Environment Mapping）。想象一下，你正在创造一个虚拟世界，想要让场景中的物体闪耀着迷人的光泽，反射出周围环境的绚丽色彩，这时候环境贴图就像是一位神奇的 "视觉化妆师"，能瞬间让你的虚拟世界生动起来！

一、揭开环境贴图的神秘面纱

环境贴图，简单来说，就是给物体 "穿" 上一件带有周围环境信息的 "外衣"，让物体看起来好像真的反射出了周围的景象。这就好比你站在一面巨大的镜子前，镜子里映出了你周围的一切，只不过在计算机图形学的世界里，我们是通过一些巧妙的技术，让物体表面模拟出这种反射效果。

从底层原理来讲，它利用了光线传播和反射的规律。在现实世界中，光线照射到物体表面，会根据物体表面的材质和角度进行反射，进入我们的眼睛，我们才能看到物体的样子和它反射的景象。在计算机图形学里，我们要模拟这个过程，就需要记录周围环境的信息，并把这些信息合理地 "贴" 到物体表面，让物体看起来像是反射出了周围环境。

二、环境贴图的实现 "魔法"

在 JavaScript 中，我们可以借助强大的 WebGL 库来实现环境贴图。WebGL 是一种用于在网页上绘制高性能交互式 3D 图形和 2D 图形的 JavaScript API。

1. 准备工作：创建场景和物体

首先，我们要搭建一个基础的 WebGL 场景，并创建一个我们想要应用环境贴图的物体，这里以一个简单的立方体为例。

ini 复制代码

// 获取WebGL绘图上下文
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');
// 设置视口大小
gl.viewport(0, 0, canvas.width, canvas.height);
// 创建立方体的顶点数据
const vertices = new Float32Array([
  // 前面
  -1.0, -1.0,  1.0,
   1.0, -1.0,  1.0,
   1.0,  1.0,  1.0,
  -1.0,  1.0,  1.0,
  // 后面
  -1.0, -1.0, -1.0,
   1.0, -1.0, -1.0,
   1.0,  1.0, -1.0,
  -1.0,  1.0, -1.0
]);
// 创建顶点缓冲区对象
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 创建顶点着色器
const vertexShaderSource = `
  attribute vec3 aVertexPosition;
  void main() {
    gl_Position = vec4(aVertexPosition, 1.0);
  }
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
// 创建片段着色器（暂时简单设置）
const fragmentShaderSource = `
  precision mediump float;
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// 创建程序对象
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// 获取顶点位置属性的位置
const vertexPositionAttribute = gl.getAttribLocation(program, 'aVertexPosition');
gl.enableVertexAttribArray(vertexPositionAttribute);
gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);

2. 加载环境贴图

接下来，我们要加载一张包含周围环境信息的纹理图片，这就像是为物体准备好那件神奇的 "外衣"。我们可以使用Image对象来加载图片，并将其转换为 WebGL 纹理。

ini 复制代码

// 创建纹理对象
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 img = new Image();
img.src = 'environment_map.jpg';
img.onload = function () {
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);
  gl.generateMipmap(gl.TEXTURE_2D);
  // 开始渲染
  render();
};

3. 修改着色器实现反射效果

现在，我们要对片段着色器进行改造，让它能够根据物体表面的法线和视角方向，从环境贴图中采样合适的颜色，模拟出反射效果。这一步就像是给物体表面赋予 "智慧"，让它知道该从 "外衣" 上的哪个位置 "摘取" 颜色来呈现反射效果。

ini 复制代码

const fragmentShaderSource = `
  precision mediump float;
  uniform sampler2D uSampler;
  varying vec3 vNormal;
  varying vec3 vViewDirection;
  void main() {
    // 计算反射方向
    vec3 reflected = reflect(-vViewDirection, normalize(vNormal));
    // 从环境贴图中采样颜色
    vec4 textureColor = texture2D(uSampler, reflected.xy * 0.5 + 0.5);
    gl_FragColor = textureColor;
  }
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// 更新程序对象，添加新的片段着色器
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// 获取纹理采样器和其他变量的位置
const samplerUniform = gl.getUniformLocation(program, 'uSampler');
const normalAttribute = gl.getAttribLocation(program, 'vNormal');
const viewDirectionAttribute = gl.getAttribLocation(program, 'vViewDirection');
// 启用并设置法线和视角方向属性
// （这里假设你已经有计算好的法线和视角方向数据，具体计算根据场景和物体的实际情况而定）
gl.enableVertexAttribArray(normalAttribute);
gl.vertexAttribPointer(normalAttribute, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(viewDirectionAttribute);
gl.vertexAttribPointer(viewDirectionAttribute, 3, gl.FLOAT, false, 0, 0);
// 设置纹理单元
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(samplerUniform, 0);

4. 渲染循环

最后，我们需要一个渲染循环，不断更新场景并绘制物体，让反射效果实时展示出来。

scss 复制代码

function render() {
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
  requestAnimationFrame(render);
}

三、环境贴图的进阶玩法和注意事项

立方体贴图（Cube Mapping） ：除了普通的二维纹理，立方体贴图是环境贴图中常用的一种方式。它就像是给物体套上一个由六个面组成的 "盒子"，每个面都记录着不同方向的环境信息，这样能更准确地模拟全方位的反射效果。在 WebGL 中，我们可以使用gl.TEXTURE_CUBE_MAP来创建和操作立方体贴图。

性能优化：虽然环境贴图能让场景变得超级炫酷，但它也会对性能产生一定影响。比如，加载大尺寸的纹理图片会占用更多内存，复杂的反射计算会消耗更多计算资源。所以，我们可以通过压缩纹理图片、减少不必要的反射计算等方式来优化性能，让你的虚拟世界既好看又流畅。

艺术与技术的结合：环境贴图不仅仅是技术的实现，也是一门艺术。选择合适的环境纹理，调整物体的材质属性，能创造出千变万化的视觉效果。你可以把物体变成一面光滑的镜子，反射出整个虚拟世界；也可以让它像一颗宝石，折射出五彩斑斓的光芒。发挥你的创意，让你的虚拟世界独一无二！

好了，各位魔法师们，现在你们已经掌握了环境贴图的基本 "魔法咒语"！快去创造属于自己的绚丽虚拟世界吧，让物体们都闪耀起来！如果在实践过程中遇到了问题，别担心，就像探索未知的魔法领域一样，多尝试、多调试，你一定能成为环境贴图的大师！

以上文章从多方面讲解了环境贴图。你对内容的深度、代码示例等方面有其他想法，或者想补充特定知识点，都能随时和我说。