First, thank you so much for this great work and munity.

I am trying to write a simple low poly style water material.

I know there are different ways of writing this kind of thing, and I would like as much as possible to do it in a js script (I e from C# dev', and I am not super fy with frontend yet).

The one way I can understand after hours of piling infos on the Net is this one:

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,

That gives me the beginning of the wanted behavior, but this is not my issue.

Now, if I want to inherit let's say the Lambert or Phong material properties, what is the right way to proceed?

It sounds very basic, but this is the only relevant link I found: ThreeJS - Extend Lambert Shader with Custom VertexShader and there is no answer.

Thank you for your attention.

First, thank you so much for this great work and munity.

I am trying to write a simple low poly style water material.

I know there are different ways of writing this kind of thing, and I would like as much as possible to do it in a js script (I e from C# dev', and I am not super fy with frontend yet).

The one way I can understand after hours of piling infos on the Net is this one:

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,

That gives me the beginning of the wanted behavior, but this is not my issue.

Now, if I want to inherit let's say the Lambert or Phong material properties, what is the right way to proceed?

It sounds very basic, but this is the only relevant link I found: ThreeJS - Extend Lambert Shader with Custom VertexShader and there is no answer.

Thank you for your attention.

• javascript
• three.js
• shader
• vertex-shader

1 Answer 1

There are several ways to enhance a built-in material in three.js:

• You can use the callback Material.onBeforeCompile(). This approach is demonstrated in the following example. If you want to add just minor enhancements to the shader code, this should be your first choice.
• Create a custom material with RawShaderMaterial or ShaderMaterial from scratch and reuse the existing shader chunks from the library. This approach is very flexible but it requires good knowledge about the internals of three.js's material system.
• Of course you could modify/monkey patch the existing shader chunks but this approach is in general to remended (you effectively change the library code with all consequences).
• Another approach is to use the promising but experimental NodeMaterial. However, this technique is not documented and no part of the core so far. There are some examples that demonstrate the usage like this one.