HTML Canvas导出模型UVMap时灰色网格线问题求助

问题描述 #

我正在尝试为3D模型导出UV Map，通过为三角形网格填充颜色实现功能，程序可正常运行但始终出现灰色网格线。尝试绘制边线时，若使用与三角形不同的颜色可正常显示，但若使用同色则边线始终呈灰色。

原始代码 #

const { Scene } = tshirtNodes; // Access Three.js state
const geometry = Scene.children[0].geometry; // Access geometry of the 3D model
const uvAttribute = geometry.attributes.uv; // UV data
const indexAttribute = geometry.index; // Triangle indices
const canvasSize = 10000; // Canvas size
const uvArray = uvAttribute.array; // UV coordinates
const indexArray = indexAttribute.array; // Triangle indices
const renderUVMap = () => {
          console.log("render uvmap");
          for (let i = 0; i < indexArray.length; i += 3) {
            const i1 = indexArray[i] * 2;
            const i2 = indexArray[i + 1] * 2;
            const i3 = indexArray[i + 2] * 2;
    
            const uv1 = { x: uvArray[i1], y: uvArray[i1 + 1] };
            const uv2 = { x: uvArray[i2], y: uvArray[i2 + 1] };
            const uv3 = { x: uvArray[i3], y: uvArray[i3 + 1] };
    
            let part = null;
            for (const [key, condition] of Object.entries(uvConditions)) {
              if (
                isWithinCondition(uv1, condition) ||
                isWithinCondition(uv2, condition) ||
                isWithinCondition(uv3, condition)
              ) {
                part = key;
                break; // Stop once the part is determined
              }
            }
    
            if (!part) continue; 
            if (partColorType[part] === "single") {
              const color = colorsForparts[part];
              if (!color) continue;
    
              const [r, g, b] = color.map((c) => Math.floor(c * 255));
              ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
    
              ctx.beginPath();
    
              ctx.moveTo(uv1.x * canvasSize, uv1.y * canvasSize);
              ctx.lineTo(uv2.x * canvasSize, uv2.y * canvasSize);
              ctx.lineTo(uv3.x * canvasSize, uv3.y * canvasSize);
              ctx.closePath();
              ctx.fill();
    
              // ctx.strokeStyle = `rgb(${r}, ${g}, ${b})`;
              // ctx.beginPath();
              // ctx.moveTo(uv1.x * canvasSize, uv1.y * canvasSize);
              // ctx.lineTo(uv2.x * canvasSize, uv2.y * canvasSize);
              // ctx.lineTo(uv3.x * canvasSize, uv3.y * canvasSize);
              // ctx.lineWidth = 0.05; 
              // ctx.stroke();
            } 
          }
        };

效果对比 #

左侧为灰色网格线效果，右侧为使用与三角形不同颜色时的绿色边线效果

解决方法 #

出现此问题的核心原因是Canvas填充与描边重叠时，亚像素渲染或像素对齐问题导致视觉上出现灰色边缘，同时描边宽度的单位设置错误也会加剧该问题。以下是具体修复方案：

1. 分离填充与描边的绘制顺序
   先完成所有三角形的填充绘制，再统一绘制边线，避免单个三角形填充后立即描边产生的重叠干扰。

2. 修正描边宽度的单位
   原代码中lineWidth = 0.05是基于Canvas像素单位，在10000尺寸的画布上几乎不可见，且会触发亚像素渲染导致灰色。应设置为实际像素值，比如2（可根据画布尺寸调整）。

3. 关闭图像平滑（可选）
   若仍有灰色边缘，可关闭Canvas的抗锯齿功能：

   ctx.imageSmoothingEnabled = false;
   

4. 优化后的完整代码

   const { Scene } = tshirtNodes;
   const geometry = Scene.children[0].geometry;
   const uvAttribute = geometry.attributes.uv;
   const indexAttribute = geometry.index;
   const canvasSize = 10000;
   const uvArray = uvAttribute.array;
   const indexArray = indexAttribute.array;
   
   const renderUVMap = () => {
     console.log("render uvmap");
     // 第一步：批量绘制所有三角形填充
     for (let i = 0; i < indexArray.length; i += 3) {
       const i1 = indexArray[i] * 2;
       const i2 = indexArray[i + 1] * 2;
       const i3 = indexArray[i + 2] * 2;
   
       const uv1 = { x: uvArray[i1], y: uvArray[i1 + 1] };
       const uv2 = { x: uvArray[i2], y: uvArray[i2 + 1] };
       const uv3 = { x: uvArray[i3], y: uvArray[i3 + 1] };
   
       let part = null;
       for (const [key, condition] of Object.entries(uvConditions)) {
         if (isWithinCondition(uv1, condition) || isWithinCondition(uv2, condition) || isWithinCondition(uv3, condition)) {
           part = key;
           break;
         }
       }
   
       if (!part || partColorType[part] !== "single") continue;
       const color = colorsForparts[part];
       if (!color) continue;
   
       const [r, g, b] = color.map((c) => Math.floor(c * 255));
       ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
   
       ctx.beginPath();
       ctx.moveTo(uv1.x * canvasSize, uv1.y * canvasSize);
       ctx.lineTo(uv2.x * canvasSize, uv2.y * canvasSize);
       ctx.lineTo(uv3.x * canvasSize, uv3.y * canvasSize);
       ctx.closePath();
       ctx.fill();
     }
   
     // 第二步：统一绘制所有同色边线
     for (let i = 0; i < indexArray.length; i += 3) {
       const i1 = indexArray[i] * 2;
       const i2 = indexArray[i + 1] * 2;
       const i3 = indexArray[i + 2] * 2;
   
       const uv1 = { x: uvArray[i1], y: uvArray[i1 + 1] };
       const uv2 = { x: uvArray[i2], y: uvArray[i2 + 1] };
       const uv3 = { x: uvArray[i3], y: uvArray[i3 + 1] };
   
       let part = null;
       for (const [key, condition] of Object.entries(uvConditions)) {
         if (isWithinCondition(uv1, condition) || isWithinCondition(uv2, condition) || isWithinCondition(uv3, condition)) {
           part = key;
           break;
         }
       }
   
       if (!part || partColorType[part] !== "single") continue;
       const color = colorsForparts[part];
       if (!color) continue;
   
       const [r, g, b] = color.map((c) => Math.floor(c * 255));
       ctx.strokeStyle = `rgb(${r}, ${g}, ${b})`;
       ctx.lineWidth = 2; // 使用实际像素宽度
       ctx.beginPath();
       ctx.moveTo(uv1.x * canvasSize, uv1.y * canvasSize);
       ctx.lineTo(uv2.x * canvasSize, uv2.y * canvasSize);
       ctx.lineTo(uv3.x * canvasSize, uv3.y * canvasSize);
       ctx.closePath();
       ctx.stroke();
     }
   };
   

5. 额外优化建议

   • 若模型存在共享边的三角形，可通过记录已绘制的边避免重复描边，提升渲染性能。
   • 测试不同的lineWidth值，找到与画布尺寸最适配的边线宽度。

内容的提问来源于stack exchange，提问作者Bn'R