When I have two examples, one is the landform I used using a black and white image of the height difference generated in ShaderMaterial, as shown in the image:
Now I hope to combine these two examples, namely the effect of introducing ShaderMaterial based on MeshStandardMaterial. The land and sea in the example have a more realistic effect of the drop. Please help me to see and give me some help on how to achieve this effect
While it’s not exactly a super-trivial thing to do - you can extend MeshStandardMaterial code and add whichever new parts you need to it (here’s an example of extending MeshPhongMaterial, but it’s quite the same case with any other type - except for the fancy ones like MeshNormalMaterial, MeshBasicMaterial etc.)
It involves a few steps, but the most important ones are:
Add customProgramCacheKey to something new / UUID / random. That way three will not try to reuse built-in MeshStandardMaterial code and use your shader instead.
Add your code in onBeforeCompile. It gives you shader as an argument - which for MeshStandardMaterial is this 9for other materials just pick your favorite from here.) Keep in mind - shader argument comes in non-compiled version - so all #include statements will show as #include statements, not as their contents (if you need to replace contents - either copy them directly from the original shader chunk in three repo, or resolve imports, see line 20.)
One last thing, if your new shader would like to use original MeshStandardMaterial property in another way (ex. envMap as environment, or mountainsMap as displacementMap) - sometimes you also need to remember to set specific parameters to true, or just manually #define needed shader constants in code.
