我怎样才能通过Vertex和amp;面对Three.js着色器的法线?

时间:2014-09-27 02:30:59

标签: javascript three.js glsl shader normals

如果我理解正确, THREE.Geometry 方法, .computeFaceNormals() & .computeVertexNormals() ,每个都为'innate'属性数组赋值,“normal”。

所以,如果我想使用两个 vertex-&在一个着色器中使用face-normals,我必须:

  1. 计算面部法线
  2. 将结果(从'normals')克隆到新的属性数组(即'fNormals')
  3. 计算顶点法线
  4. 渲染...
  5. 到目前为止,使用这种方法,我正在尝试这个:

    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();
    

    编辑:好的,意识到一些错误&amp;我调试时编辑这个。仍然不确定如何处理生成的法线...

    感谢您的任何见解 -

1 个答案:

答案 0 :(得分:4)

您可以在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
}

如果将属性绑定到faces:

,这应该有效
attributes: {
    fNormal: { type: "v3", value: [], boundTo: 'faces' }
},

您可以在webgl_materials_wireframe

中找到有关如何使用自定义属性的示例