First and foremost, I want to express my gratitude for this amazing work and community.
My goal is to create a simple low poly-style water material.
I am aware that there are various ways to achieve this, and I prefer to handle it in a JavaScript script (coming from a C# background, frontend development is still somewhat new to me).
After researching extensively online, the method that I have been able to grasp after hours of compiling information is as follows:
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,
While this approach provides the initial desired functionality, my current dilemma lies elsewhere.
If I wish to incorporate, let's say, the properties of a Lambert or Phong material, what would be the correct course of action?
This may seem like a basic query, but the only relevant resource I stumbled upon was on Stack Overflow with no definitive answer: ThreeJS - Extend Lambert Shader with Custom VertexShader Thank you for taking the time to read this.