Three.js / jsCAD：如何平滑网格法线以获得轮廓效果？

Question

我正在尝试使用以下方法在一些 3D 网格上创建轮廓效果：

• 绘制原始的初始着色网格
• 平滑网格法线
• 按照法线向外推vertives
• 仅使用纯色轮廓颜色绘制背面

除了平滑部分之外，我得到了所有的工作。需要平滑网格以创建良好的连续外部轮廓（否则角度会出现不规则）。 I've allready asked how to smooth a mesh normals。平滑过程是这样的：

  let geometry = new THREE.BoxGeometry();
  geometry.deleteAttribute('normal');
  geometry.deleteAttribute('uv');
  geometry = THREE.BufferGeometryUtils.mergeVertices(geometry);
  geometry.computeVertexNormals();

虽然这对于定义明确的简单几何图形效果很好，但它会在更复杂的模型上产生伪影。我相信这是由于丢弃了原始法线。 computeVertexNormals() 然后从里到外解释一些面孔。

知道如何解决这个问题吗？

平滑法线之前

平滑法线后

---

旁注： 1/ 我无法修改原始网格拓扑，因为它们是在运行时使用 jscad 生成的。

2/ 我试图编写一个算法来解决这个问题，但没有取得很大成功。我的推理如下：

假设computeVertexNormals() 根据组成它的顶点的顺序将三角形解释为面朝上或面朝下。我要找到法线反转的顶点的三角形，并交换两个三角形顶点来翻转它。如果在computeVertexNormals() 和computeVertexNormals() 之前的法线的点积为负，则顶点法线被反转。

下面是代码：

const fixNormals: (bufferGeometry: THREE.BufferGeometry) => THREE.BufferGeometry
  = (bufferGeometry) => {
    // this function is only made for non indexed buffer geometry
    if (bufferGeometry.index)
      return bufferGeometry;
    const positionAttribute = bufferGeometry.getAttribute('position');
    if (positionAttribute == undefined)
      return bufferGeometry;
    let oldNormalAttribute = bufferGeometry.getAttribute('normal').clone();
    if (oldNormalAttribute === undefined)
      return bufferGeometry;

    bufferGeometry.deleteAttribute('normal');
    bufferGeometry.deleteAttribute('uv');
    bufferGeometry.computeVertexNormals();

    let normalAttribute = bufferGeometry.getAttribute('normal');
    if (normalAttribute === undefined) {
      console.error("bufferGeometry.computeVertexNormals() resulted in empty normals")
      return bufferGeometry;
    }

    const pA = new THREE.Vector3(),
      pB = new THREE.Vector3(),
      pC = new THREE.Vector3();
    const onA = new THREE.Vector3(),
      onB = new THREE.Vector3(),
      onC = new THREE.Vector3();
    const nA = new THREE.Vector3(),
      nB = new THREE.Vector3(),
      nC = new THREE.Vector3();

    for (let i = 0, il = positionAttribute.count; i < il; i += 3) {
      pA.fromBufferAttribute(positionAttribute, i + 0);
      pB.fromBufferAttribute(positionAttribute, i + 1);
      pC.fromBufferAttribute(positionAttribute, i + 2);

      onA.fromBufferAttribute(oldNormalAttribute, i + 0);
      onB.fromBufferAttribute(oldNormalAttribute, i + 1);
      onC.fromBufferAttribute(oldNormalAttribute, i + 2);

      nA.fromBufferAttribute(normalAttribute, i + 0);
      nB.fromBufferAttribute(normalAttribute, i + 1);
      nC.fromBufferAttribute(normalAttribute, i + 2);

      // new normals for this triangle are  inverted, 
      // need to switch 2 vertices order to keep right face up
      if (onA.dot(nA) < 0 && onB.dot(nB) < 0 && onC.dot(nC) < 0) {
        positionAttribute.setXYZ(i + 0, pB.x, pB.y, pB.z)
        positionAttribute.setXYZ(i + 1, pA.x, pA.y, pA.z)
      }
    }

    bufferGeometry.deleteAttribute('normal');
    bufferGeometry.deleteAttribute('uv');
    bufferGeometry.computeVertexNormals();

    return bufferGeometry;
  }

Answer 1

THREE 执行computeVertexNormals 通过使用面的缠绕顺序来确定法线。如果一个面是使用左旋定义的，那么你会得到指向错误方向的法线。除非您不使用着色材质，否则这也会影响光照。

也就是说，您还可以看到计算的法线在面之间不同的情况。为避免这种情况，您需要跟踪给定顶点位置的所有法线（不仅仅是单个顶点，因为该位置可以在缓冲区的其他位置复制）。

第 1 步：创建顶点图

这里的想法是您想要创建一个实际顶点位置到您定义的一些属性的映射，这些属性将在以后使用。拥有索引和组可能会影响此处理，但最终您希望创建一个Map 并将其key 分配为顶点值的序列化版本。例如，顶点值x = 1.23, y = 1.45, z = 1.67 可以成为键1.23|1.45|1.67。这很重要，因为您需要能够引用顶点位置，并且关闭两个新的Vector3s 实际上会映射到两个不同的键。 无论如何...

您需要保存的数据是每个顶点的法线，以及最终的平滑法线。因此，您将推送到每个键的值是一个对象：

let vertMap = new Map()

// while looping through your vertices...
if( vertMap.has( serializedVertex ) ){
  vertMap.get( serializedVert ).array.push( vector3Normal );
}
else{
  vertMap.set( serializedVertex, {
    normals: [ vector3Normal ],
    final: new Vector3()
  } );
}

第 2 步：平滑法线

现在您已经拥有每个顶点位置的所有法线，遍历vertMap，平均normals 数组并将最终值分配给每个条目的final 属性。

vertMap.forEach( ( entry, key, map ) => {

  let unifiedNormal = entry.normals.reduce( ( acc, normal ) => {
    acc.add( normal );
    return acc;
  }, new Vector3() );

  unifiedNormal.x /= entry.normals.length;
  unifiedNormal.y /= entry.normals.length;
  unifiedNormal.z /= entry.normals.length;
  unifiedNormal.normalize();

  entry.final.copy( unifiedNormal );

} );

第 3 步：重新分配法线

现在循环返回您的顶点（position 属性）。因为顶点和法线是成对的，所以您可以使用当前顶点的索引来访问其关联法线的索引。通过再次序列化当前顶点并使用该值引用vertMap 来引用当前顶点。将final 属性的值分配给关联的法线。

let pos = geometry.attributes.position.array;
let nor = geometry.attributes.normal.array;

for( let i = 0, l = pos.length; i < l; i += 3 ){
  //serializedVertex = however you chose to do it during vertex mapping
  let newNor = vertMap.get( serializedVertex ).final;
  nor[ i ] = newNor.x;
  nor[ i + 1 ] = newNor.y;
  nor[ i + 2 ] = newNor.z;
}
geometry.attributes.normal.needsUpdate = true;

警告

可能有更优雅或 API 驱动的方式来执行我上面描述的操作。我提供的代码并不意味着高效或完整，只是让您了解如何解决问题。