I want to make a watery effect using a vertex shader. This guy uses sin waves to get in motion.
varying vec3 vUv;
uniform float time;
void main() {
const float amp = 0.2;
const float f = 0.2;
const float k = 3.0;
vec3 pos = position;
pos = vec3(pos.x, pos.y, pos.z+(sin((k*pos.x)+(f*time))*amp));
pos = vec3(pos.x, pos.y, pos.z+(sin((k*pos.y)+(f*time))*amp));
vUv = pos;
vec4 mvp = modelViewMatrix * vec4(pos, 1.0);
gl_Position = projectionMatrix * mvp;
}
The shader.
Rendered as a grayscale image.
Neato make better yes? In the ocean you have lots of waves of different amplitudes and frequencies so we can add a couple more of those, we could also do with a nicer fragment shader, something that looks watery. Let us start with this effect by interpolating between a water color and a lighter (think broken wave?) color, and adding a little transparency.
sic
varying vec3 vUv;
uniform float time;
void main() {
const float amp = 0.05;
const float wk = 10.0;
const float f = 0.2;
const float k1 = 1.75;
const float k2 = 1.82;
const float k3 = 0.49;
const float k4 = 2.1;
const float k5 = 2.89;
const float k6 = 0.02;
const float a1 = 0.028;
const float a2 = 0.058;
const float a3 = 0.091;
const float a4 = 0.022;
const float a5 = 0.053;
const float a6 = 0.03;
const float wk1 = -15.12;
const float wk2 = -5.22;
const float wk3 = 1.67;
const float wk4 = 4.67;
const float wk5 = -8.91;
const float wk6 = 8.91;
vec3 pos = position;
pos = vec3(pos.x,
pos.y,
pos.z+(sin( ((wk1*pos.x)+(f*time*k1)) )*a1));
pos = vec3(pos.x,
pos.y,
pos.z+(sin( ((wk2*pos.y)+(f*time*k2)) )*a2));
pos = vec3(pos.x,
pos.y,
pos.z+(sin( ((wk3*pos.x)+(f*time*k3)) )*a3));
pos = vec3(pos.x,
pos.y,
pos.z+(sin( ((wk4*pos.y)+(f*time*k4)) )*a4));
pos = vec3(pos.x,
pos.y,
pos.z+(sin( ((wk5*pos.x)+(f*time*k5)) )*a5));
pos = vec3(pos.x,
pos.y,
pos.z+(sin( ((wk6*pos.y)+(f*time*k6)) )*a6));
vUv = pos;
vec4 mvp = modelViewMatrix * vec4(pos, 1.0);
gl_Position = projectionMatrix * mvp;
}
Vertex Shader
varying vec3 vUv;
void main() {
vec3 bg = vec3(0.0, 1.0, 1.0);
vec3 alm = vec3(0.8, 1.0, 1.0);
vec4 fwhite = vec4(1.0, 1.0, 1.0, 0.9);
vec4 fbg = vec4(0.0, 1.0, 1.0, 0.4);
vec4 FragColor = mix(fbg, fwhite, pow(smoothstep(-0.1, 0.15, vUv.z), 1.0));
gl_FragColor = FragColor;
}
Fragment Shader
We haven't included much of a lighting model so that's probably where to go from here.
For now I'm interested in making a colorful sphere.
They're actually neither a sphere nor colorful. That's okay, I'm gonna do some lighting stuff soon.