如何“合并”ShaderMaterial和LambertMaterial？

Question

如何“合并”ShaderMaterial和LambertMaterial？

javascriptthree.jsshadervertex-shader

4

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

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

我知道有不同的编写方式，而且我尽可能地想在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材质属性，应该怎样正确地进行？

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

感谢您的关注。

- GoupilSystem

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mugen87 · Accepted Answer

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

您可以使用回调函数Material.onBeforeCompile()。这种方法在以下示例中演示。如果您只想对着色器代码进行轻微的增强，那么这应该是您的首选。
使用RawShaderMaterial或ShaderMaterial从头开始创建自定义材质，并重用库中现有的着色器块。这种方法非常灵活，但需要对three.js的材质系统内部有很好的了解。
当然，您也可以修改/猴子补丁现有的着色器块，但一般不推荐此方法（实际上您会改变库代码并产生所有后果）。
另一种方法是使用前途光明但实验性的NodeMaterial。但是，这种技术没有记录，并且迄今为止不属于核心的一部分。有一些示例演示了使用方法，例如这个示例。