您如何“组合”ShaderMaterial 和 LambertMaterial？

Question

首先，非常感谢您的出色工作和社区。

我正在尝试编写一个简单的低聚风格的水材料。

我知道写这种东西有不同的方法，我希望尽可能在 js 脚本中做到这一点（我来自 C# dev'，我对前端还不是很满意）。

在网上编译信息数小时后，我能理解的一种方法是：

var waterVertexShader =  
                "attribute float vertexDisplacement;" +
                "uniform float time;" +
                "varying vec3 vUv;" +
                "void main() {" +
                "   vUv = position;" +
                "   vUv.y += sin(time) * 0.01;" +
                "   gl_Position = projectionMatrix * modelViewMatrix * vec4(vUv, 1.0);"+     
                "}"
            ;

            var waterFragmentShader =

                "void main() {" +
                "gl_FragColor = vec4(0.65, 0.88, 1, 1);" +
                "}";


                },
                flatShading : true,
                vertexShader: waterVertexShader,

这给了我想要的行为的开始，但这不是我的问题。

现在，如果我想继承让我们说 Lambert 或 Phong 材料属性，那么正确的方法是什么？

这听起来很基本，但这是我找到的唯一相关链接： ThreeJS - Extend Lambert Shader with Custom VertexShader 并且没有答案。

感谢您的关注。

Answer 1

有几种方法可以增强内置材质three.js：

• 您可以使用回调Material.onBeforeCompile()。下面的示例演示了这种方法。如果您只想为着色器代码添加少量增强功能，这应该是您的首选。
• 使用RawShaderMaterial或ShaderMaterial从头开始创建自定义材质，并重用库中的现有着色器块。这种方法非常灵活，但它需要对three.js材料系统的内部结构有很好的了解。
• 当然，您可以修改/猴子修补现有的着色器块，但通常建议使用这种方法（您有效地更改库代码并带来所有后果）。
• 另一种方法是使用有前途但实验性的NodeMaterial. 但是，到目前为止，这种技术没有记录，也不是核心的一部分。有一些例子，证明这样使用一个。