时间戳

首页 > 解决方案 > Three.js / jsCAD：如何平滑网格法线以获得轮廓效果？

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

问题描述

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

除了平滑部分，我得到了所有的工作。需要平滑网格以创建良好的连续外部轮廓（否则角度会出现不规则）。 我已经问过如何平滑网格法线。平滑过程是这样的：

  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;
  }

标签： javascriptthree.jsmeshnormalstopology

解决方案

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

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

第 1 步：创建顶点图

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

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

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 驱动的方式来执行我上面描述的操作。我提供的代码并不意味着高效也不完整，只是让您了解如何解决问题。

推荐阅读