如何在Three.js运行时合并两张法线贴图？Canvas 2D是否可行？

绝对可以用Canvas 2D上下文实现两张法线贴图的运行时合并，这刚好匹配你需要给正面平面叠加「位移法线+材质法线」的场景！下面我一步步给你拆解实现思路和代码：

法线贴图的每个像素RGB值对应法线的X/Y/Z分量，但颜色值是0-255范围，实际法线向量是[-1, 1]范围（R对应X，G对应Y，B对应Z）。合并两张法线贴图不能直接混合颜色，必须遵循以下逻辑：

1. 将两张贴图的像素颜色转换为法线向量
2. 对两个向量进行加法运算
3. 将结果向量归一化（确保长度为1，保证法线方向正确）
4. 再转换回0-255的颜色范围

直接叠加颜色会导致法线方向偏差，光照效果完全出错，所以这一步逻辑不能省。

1. 加载两张法线贴图 #

先把两张贴图加载为Image对象，注意处理跨域问题：

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'anonymous'; // 跨域场景需要，同域可省略
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = url;
  });
}

2. 创建Canvas并处理像素合并 #

通过Canvas 2D读取两张贴图的像素数据，执行法线向量合并逻辑：

async function mergeNormalMaps(displacementNormalUrl, materialNormalUrl) {
  // 并行加载两张法线贴图
  const [dispNormImg, matNormImg] = await Promise.all([
    loadImage(displacementNormalUrl),
    loadImage(materialNormalUrl)
  ]);

  const width = dispNormImg.width;
  const height = dispNormImg.height;

  // 创建与贴图尺寸一致的Canvas
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');

  // 获取第一张贴图的像素数据
  ctx.drawImage(dispNormImg, 0, 0);
  const dispNormData = ctx.getImageData(0, 0, width, height).data;

  // 获取第二张贴图的像素数据
  ctx.drawImage(matNormImg, 0, 0);
  const matNormData = ctx.getImageData(0, 0, width, height).data;

  // 创建输出像素数据容器
  const outputData = ctx.createImageData(width, height);
  const outputPixels = outputData.data;

  // 遍历每个像素，执行法线合并
  for (let i = 0; i < dispNormData.length; i += 4) {
    // 转换为[-1, 1]范围的法线向量
    const n1x = (dispNormData[i] / 255) * 2 - 1;
    const n1y = (dispNormData[i+1] / 255) * 2 - 1;
    const n1z = (dispNormData[i+2] / 255) * 2 - 1;

    const n2x = (matNormData[i] / 255) * 2 - 1;
    const n2y = (matNormData[i+1] / 255) * 2 - 1;
    const n2z = (matNormData[i+2] / 255) * 2 - 1;

    // 向量相加
    const nx = n1x + n2x;
    const ny = n1y + n2y;
    const nz = n1z + n2z;

    // 归一化向量（确保长度为1）
    const length = Math.sqrt(nx*nx + ny*ny + nz*nz);
    const normX = nx / length;
    const normY = ny / length;
    const normZ = nz / length;

    // 转换回0-255的颜色值
    outputPixels[i] = ((normX + 1) / 2) * 255;
    outputPixels[i+1] = ((normY + 1) / 2) * 255;
    outputPixels[i+2] = ((normZ + 1) / 2) * 255;
    outputPixels[i+3] = 255; // 保持透明度为不透明
  }

  // 将处理后的像素放回Canvas
  ctx.putImageData(outputData, 0, 0);

  // 生成Three.js可用的纹理
  const mergedTexture = new THREE.Texture(canvas);
  mergedTexture.needsUpdate = true; // 告诉Three.js更新纹理数据

  return mergedTexture;
}

3. 应用合并后的法线贴图到材质 #

把生成的纹理赋值给正面平面的MeshStandardMaterial即可：

// 调用合并函数并应用到材质
mergeNormalMaps('你的位移法线贴图路径.jpg', '你的材质法线贴图路径.jpg')
  .then(mergedNormalMap => {
    // 假设你已经创建了正面平面的材质
    const frontMaterial = new THREE.MeshStandardMaterial({
      displacementMap: 你的位移贴图,
      normalMap: mergedNormalMap, // 使用合并后的法线贴图
      displacementScale: 0.1, // 根据你的需求调整位移强度
      // 其他材质参数（如color、roughness等）...
    });
    // 赋值给正面网格
    frontPlaneMesh.material = frontMaterial;
  })
  .catch(err => console.error('法线贴图合并失败:', err));

• 跨域问题：如果贴图来自外部域名，必须确保服务器设置了CORS响应头，否则Canvas的getImageData会抛出安全错误。
• 性能优化：如果有大量重复的合并需求，建议缓存合并后的纹理，避免重复计算；如果需要实时动态合并（比如材质法线会频繁变化），可以考虑用WebGL Shader在GPU上处理，性能会比Canvas 2D好很多。
• 法线格式兼容：确保两张法线贴图都是标准的OpenGL格式（Y轴向上），如果是DirectX格式（Y轴向下），需要先翻转G通道再合并。

内容的提问来源于stack exchange，提问作者Kostyuk Rostyslav