[examples] Add new example: shaders_vertex_displacement (#4186)

* shaders-vertex_displacement init

* implement simulation of wave in ocean

* update examples/README & add some comments

* update comments

* add gl100 shaders

examples/shaders/resources/shaders/glsl100/vertex_displacement.fs

@@ -0,0 +1,18 @@
+#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from fragment shader)
+varying vec2 fragTexCoord;
+varying float height;
+
+
+void main()
+{
+    vec4 darkblue = vec4(0.0, 0.13, 0.18, 1.0);
+    vec4 lightblue = vec4(1.0, 1.0, 1.0, 1.0);
+    // Interpolate between two colors based on height
+    vec4 finalColor = mix(darkblue, lightblue, height);
+
+    gl_FragColor = finalColor;
+}

examples/shaders/resources/shaders/glsl100/vertex_displacement.vs

@@ -0,0 +1,45 @@
+#version 100
+
+precision mediump float;
+
+attribute vec3 vertexPosition;
+attribute vec2 vertexTexCoord;
+attribute vec3 vertexNormal;
+attribute vec4 vertexColor;
+
+uniform mat4 mvp;
+uniform mat4 matModel;
+uniform mat4 matNormal;
+
+uniform float time;
+
+uniform sampler2D perlinNoiseMap;
+
+varying vec3 fragPosition;
+varying vec2 fragTexCoord;
+varying vec3 fragNormal;
+varying float height;
+
+void main()
+{
+    // Calculate animated texture coordinates based on time and vertex position
+    vec2 animatedTexCoord = sin(vertexTexCoord + vec2(sin(time + vertexPosition.x * 0.1), cos(time + vertexPosition.z * 0.1)) * 0.3);
+
+    // Normalize animated texture coordinates to range [0, 1]
+    animatedTexCoord = animatedTexCoord * 0.5 + 0.5;
+
+    // Fetch displacement from the perlin noise map
+    float displacement = texture2D(perlinNoiseMap, animatedTexCoord).r * 7.0; // Amplified displacement
+
+    // Displace vertex position
+    vec3 displacedPosition = vertexPosition + vec3(0.0, displacement, 0.0);
+
+    // Send vertex attributes to fragment shader
+    fragPosition = vec3(matModel * vec4(displacedPosition, 1.0));
+    fragTexCoord = vertexTexCoord;
+    fragNormal = normalize(vec3(matNormal * vec4(vertexNormal, 1.0)));
+    height = displacedPosition.y * 0.2; // send height to fragment shader for coloring
+
+    // Calculate final vertex position
+    gl_Position = mvp * vec4(displacedPosition, 1.0);
+}

examples/shaders/resources/shaders/glsl330/vertex_displacement.fs

@@ -0,0 +1,16 @@
+#version 330
+
+// Input fragment attributes (from fragment shader)
+in vec2 fragTexCoord;
+in float height;
+
+// Output fragment color
+out vec4 finalColor;
+
+void main()
+{
+    vec4 darkblue = vec4(0.0, 0.13, 0.18, 1.0);
+    vec4 lightblue = vec4(1.0, 1.0, 1.0, 1.0);
+    // interplate between two colors based on height
+    finalColor = mix(darkblue, lightblue, height);
+}

examples/shaders/resources/shaders/glsl330/vertex_displacement.vs

@@ -0,0 +1,46 @@
+#version 330
+
+// Input vertex attributes
+in vec3 vertexPosition;
+in vec2 vertexTexCoord;
+in vec3 vertexNormal;
+in vec4 vertexColor;
+
+// Input uniform values
+uniform mat4 mvp;
+uniform mat4 matModel;
+uniform mat4 matNormal;
+
+uniform float time; 
+
+uniform sampler2D perlinNoiseMap;
+
+// Output vertex attributes (to fragment shader)
+out vec3 fragPosition;
+out vec2 fragTexCoord;
+out vec3 fragNormal;
+out float height;
+
+void main()
+{
+    // Calculate animated texture coordinates based on time and vertex position
+    vec2 animatedTexCoord = sin(vertexTexCoord + vec2(sin(time + vertexPosition.x * 0.1), cos(time + vertexPosition.z * 0.1)) * 0.3);
+
+    // Normalize animated texture coordinates to range [0, 1]
+    animatedTexCoord = animatedTexCoord * 0.5 + 0.5;
+
+    // Fetch displacement from the perlin noise map
+    float displacement = texture(perlinNoiseMap, animatedTexCoord).r * 7; // Amplified displacement
+
+    // Displace vertex position
+    vec3 displacedPosition = vertexPosition + vec3(0.0, displacement, 0.0);
+
+    // Send vertex attributes to fragment shader
+    fragPosition = vec3(matModel*vec4(displacedPosition, 1.0));
+    fragTexCoord = vertexTexCoord;
+    fragNormal = normalize(vec3(matNormal*vec4(vertexNormal, 1.0)));
+    height = displacedPosition.y * 0.2; // send height to fragment shader for coloring
+
+    // Calculate final vertex position
+    gl_Position = mvp*vec4(displacedPosition , 1.0);
+}