你如何"combine"一个ShaderMaterial和LambertMaterial？

Question

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

我正在尝试写一个简单的低多边形风格的水 material。

我知道有不同的方式来编写这种东西，我希望尽可能多地在 js 脚本中完成（我来自 C# 开发，我对前端还不是很满意).

经过几个小时在网上编译信息后，我能理解的一种方式是：

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 material 属性，正确的方法是什么？

这听起来很基础，但这是我发现的唯一相关 link： ThreeJS - Extend Lambert Shader with Custom VertexShader 没有答案。

感谢您的关注。

Answer 1

有几种方法可以增强 three.js 中的内置 material：

您可以使用回调 Material.onBeforeCompile(). This approach is demonstrated in the following example。如果您只想对着色器代码添加较小的增强功能，这应该是您的首选。
从头开始使用 RawShaderMaterial 或 ShaderMaterial 创建自定义 material，并重新使用库中的现有着色器块。这种方法非常灵活，但需要对 three.js 的 material 系统的内部结构有很好的了解。
当然你可以 modify/monkey 修补现有的着色器块，但通常推荐这种方法（你有效地更改库代码并带来所有后果）。
另一种方法是使用有前途但实验性的 NodeMaterial。然而，这种技术没有记录在案，到目前为止还没有成为核心的一部分。有一些示例可以演示这样的用法 one.

你如何"combine"一个ShaderMaterial和LambertMaterial？

How do you "combine"a ShaderMaterial and LambertMaterial?

javascript

three.js

shader

vertex-shader