时间戳

首页 > 解决方案 > 您如何“组合”ShaderMaterial 和 LambertMaterial？

javascript - 您如何“组合”ShaderMaterial 和 LambertMaterial？

问题描述

首先，非常感谢这个伟大的工作和社区。

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

我知道写这种东西有不同的方法，我想尽可能地用 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 并且没有答案。

感谢您的关注。

标签： javascriptthree.jsshadervertex-shader

解决方案

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

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

推荐阅读