如何将顶点法线和面法线都传递给 Three.js 着色器？

Question

如果我理解正确，THREE.Geometry 方法，.computeFaceNormals() & .computeVertexNormals()，每个都将值分配给一个“固有”属性数组，“正常”。

所以，如果我想在单个着色器中使用 both 顶点法线和面法线，我必须：

1. 计算人脸法线
2. 将结果（从“法线”）克隆到新的属性数组，（即“fNormals”）
3. 计算顶点法线
4. 渲染...

到目前为止，我正在使用这种方法：

var shader = new THREE.ShaderMaterial(
    {
        attributes: {
            fNormal: { type: "v3", value: [] }
        },
        //uniforms, vertexShader, etc...
    } );

//load a mesh & assign the shader to it...

//setup both vertex & face normals for use in shader

mesh.geometry.computeFaceNormals();

//clone above face-normals to 'fNormal' array:

for (var i=0; i < mesh.geometry.attributes[ 'normal' ].length; i++){
  var cloned = mesh.geometry.attributes[ 'normal' ].value[i];
  shader.attributes[ 'fNormal' ].value[i] = cloned;
}

//now calculate vertex normals & place them in the 'normal' attribute:
mesh.geometry.computeVertexNormals();

编辑：好的，意识到一些错误并在调试时对其进行编辑。仍然不确定如何处理生成的法线...

感谢您的任何见解-

Answer 1

您可以在mesh.geometry.faces[].normal 中访问人脸法线。

for (var i=0; i < mesh.geometry.faces.length; i++){
    shader.attributes.fNormal.value[i] = mesh.geometry.faces[i].normal;
    //I don't think you need to clone the normal vertex here
}

如果您将属性绑定到面，这应该可以工作：

attributes: {
    fNormal: { type: "v3", value: [], boundTo: 'faces' }
},

您可以在webgl_materials_wireframe中找到如何使用自定义属性的示例