feat: ocean surface shader

Author: codeagent

graphics/programs/ocean.ts

@@ -106,21 +106,47 @@ float getFoam(in vec2 xz) {
   
   vec2 dxdx_dzdz = dxdx_dzdz0 * croppinesses[0] + dxdx_dzdz1 * croppinesses[1] + dxdx_dzdz2 * croppinesses[2];
   float dxdz = dxdz0 * croppinesses[0] + dxdz1 * croppinesses[1] + dxdz2 * croppinesses[2];
-  
-  return pow(-min(0.0f, det(jacobian(dxdx_dzdz.x, dxdz, dxdx_dzdz.y)) - foamSpreading), foamContrast);
+
+  float val = det(jacobian(dxdx_dzdz.x, dxdz, dxdx_dzdz.y));
+  return pow(-min(0.0f, val - foamSpreading), foamContrast);
+}
+
+vec3 surface(in vec3 normal, in vec3 view) {
+  const vec3 upwelling = vec3(0.0, 0.2, 0.3);
+  const vec3 sky = vec3(0.69, 0.84, 1.0);
+  const vec3 mist = vec3(0.34, 0.42, 0.5);
+  const float nShell = 1.34f;
+  const float kDiffuse = 0.91f;
+
+  float reflectivity;
+  float costhetai = abs(dot(normal, normalize(view)));
+  float thetai = acos(costhetai);
+  float sinthetat = sin(thetai) / nShell;
+  float thetat = asin(sinthetat);
+
+  if(thetai == 0.0)
+  {
+    reflectivity = (nShell - 1.0f) / (nShell + 1.0f);
+    reflectivity = reflectivity * reflectivity;
+  }
+  else
+  {
+    float fs = sin(thetat - thetai)  / sin(thetat + thetai);
+    float ts = tan(thetat - thetai)  / tan(thetat + thetai);
+    reflectivity = 0.5 * (fs * fs + ts * ts );
+  }
+
+  float falloff = exp(-length(view) * 1.0e-3) * kDiffuse;
+  vec3 surf =  reflectivity * sky + (1.0f - reflectivity) * upwelling;
+  return falloff * surf  + (1.0f - falloff) * mist;
 }
 
 void main()
 {
-  vec4 albedo = vec4(0, 0.62, 0.77, 1.0);
+  float f = getFoam(_xz);
   vec3 n = getNormal(_xz);
-  vec3 l = normalize(pos - _position);
-  float nol = dot(n, l) * 0.9 + 0.1;
-  color = albedo * vec4(vec3(nol), 1.0f) + getFoam(_xz) * 0.5;
-  
-  if(!gl_FrontFacing) {
-    color = vec4(1.0f);
-  }
-  
+  const vec3 foam = vec3(1.0f);
+  vec3 water = surface(n, pos - _position);
+  color = vec4(mix(water, foam, f), 1.0f); 
 }
 `;

gui.ts

@@ -52,9 +52,9 @@ export const defaultParams: GuiParams = {
   ],
   resolution: 256,
   wind: vec2.fromValues(4, 11),
-  alignment: 0.0,
-  foamSpreading: 1.0,
-  foamContrast: 2.0,
+  alignment: 1.0e-2,
+  foamSpreading: 1.2,
+  foamContrast: 6.5,
   randomSeed: 0,
   tileRenderer: {
     resolution: 256,
@@ -151,7 +151,7 @@ export class Gui {
       .add(this.params, 'foamSpreading', 0, 2)
       .step(0.1)
       .name('Foam spreading');
-    gui.add(this.params, 'foamContrast', 0, 2).step(0.1).name('Foam contrast');
+    gui.add(this.params, 'foamContrast', 0, 8).step(0.1).name('Foam contrast');
     gui.add(this.params, 'randomSeed', 0, 1024).step(1).name('Random seed');
 
     let i = 0;
@@ -162,8 +162,8 @@ export class Gui {
       group.add(cascade, 'size', 0, 1000.0).step(1).name('Size');
       group.add(cascade, 'croppiness', -2, 2).step(0.1).name('Croppiness');
       group.add(cascade, 'strength', 0, 10).step(0.1).name('Strength');
-      group.add(cascade, 'minWave', 0, 100).step(1).name('Min wave length');
-      group.add(cascade, 'maxWave', 0, 100).step(1).name('Max wave length');
+      group.add(cascade, 'minWave', 0, 1000).step(1).name('Min wave length');
+      group.add(cascade, 'maxWave', 0, 1000).step(1).name('Max wave length');
     }
   }
 }