Implement Ocean LOD management and enhance grid generation with wireframe support
This commit is contained in:
167
index.html
167
index.html
@@ -190,77 +190,43 @@
|
||||
precision mediump float;
|
||||
|
||||
varying vec3 v_fragPos;
|
||||
varying vec2 v_uv;
|
||||
varying vec3 v_normal;
|
||||
|
||||
uniform vec3 eyePos;
|
||||
uniform sampler2D displace_map;
|
||||
|
||||
vec3 lightPos = vec3(0.,0.,10.); //not used in diffuse. diffuse uses a directional light. It is only used for specular glittering.
|
||||
vec3 lightColor = vec3(1.0,1.0,1.0);
|
||||
vec3 lightColor = vec3(1.0, 1.0, 1.0);
|
||||
|
||||
//using forward difference
|
||||
//Normal vectors are compute as: https://www.scratchapixel.com/lessons/procedural-generation-virtual-worlds/perlin-noise-part-2/perlin-noise-computing-derivatives
|
||||
|
||||
void main(void) {
|
||||
vec4 displace = texture2D(displace_map, v_uv);
|
||||
//calculate normal
|
||||
float gridPointDelta = (1. / 256.);
|
||||
vec3 currPoint = vec3(0.0,0.0,displace.x);
|
||||
vec3 right = vec3(gridPointDelta,0.0,texture2D(displace_map,vec2(v_uv.x + gridPointDelta,v_uv.y)).x*(1./1.));
|
||||
vec3 left = vec3(-gridPointDelta,0.0,texture2D(displace_map,vec2(v_uv.x - gridPointDelta,v_uv.y)).x*(1./1.));
|
||||
vec3 up = vec3(0.,gridPointDelta,texture2D(displace_map,vec2(v_uv.x ,v_uv.y + gridPointDelta)).x*(1./1.));
|
||||
vec3 down = vec3(0.,-gridPointDelta,texture2D(displace_map,vec2(v_uv.x ,v_uv.y - gridPointDelta)).x*(1./1.));
|
||||
vec3 norm = normalize(v_normal);
|
||||
vec3 lightDir = normalize(vec3(0.3, 0.5, 1.0)); // Sun direction
|
||||
|
||||
//vec3 tangent = normalize(right - currPoint);
|
||||
//vec3 biTangent = normalize(up - currPoint);
|
||||
vec3 tangent = normalize(vec3(gridPointDelta,0.,right.z-left.z));
|
||||
vec3 biTangent = normalize(vec3(0.,gridPointDelta,down.z-up.z));
|
||||
//vec3 normal = biTangent;
|
||||
vec3 normal = cross(tangent, biTangent);
|
||||
|
||||
vec3 norm = normalize(normal);
|
||||
norm.y *= -1.; //Normal y direction is somehow inverted
|
||||
//vec3 lightDir = normalize(lightPos - v_fragPos);
|
||||
vec3 lightDir = normalize(-vec3(0.0,.0,-1.)); //sun shines in drection of -z
|
||||
|
||||
float diff = max(dot(norm,lightDir),0.0);
|
||||
float diff = max(dot(norm, lightDir), 0.0);
|
||||
vec3 diffuse = diff * lightColor;
|
||||
vec3 result = (diffuse) * vec3(0.0,0.0,1.0);
|
||||
|
||||
//Old lightning
|
||||
vec3 toCameraVector = normalize(v_fragPos - eyePos);
|
||||
vec3 reflec = normalize(reflect(toCameraVector, norm));
|
||||
// View direction
|
||||
vec3 toCameraVector = normalize(eyePos - v_fragPos);
|
||||
vec3 reflec = normalize(reflect(-toCameraVector, norm));
|
||||
|
||||
//Schlicks approximation to Fresnelfactor
|
||||
float n1 = 1., n2 = 1.33333;
|
||||
float R0 = pow((n1-n2)/(n1+n2), 2.);
|
||||
float fresnel = R0 + (1. - R0)*pow((1.-dot(norm,reflec)),5.) ;
|
||||
// Schlick's approximation to Fresnel factor
|
||||
float n1 = 1.0, n2 = 1.33333;
|
||||
float R0 = pow((n1 - n2) / (n1 + n2), 2.0);
|
||||
float fresnel = R0 + (1.0 - R0) * pow(1.0 - max(dot(norm, toCameraVector), 0.0), 5.0);
|
||||
|
||||
//vec3 waterColor = vec3(34./255.,154./255.,211./255.);
|
||||
vec3 oceanColor = vec3(0,.4,.4); // under-sea colour
|
||||
vec3 skyColor = vec3(1.,1.,1.);
|
||||
vec3 oceanColor = vec3(0.0, 0.3, 0.4);
|
||||
vec3 skyColor = vec3(0.6, 0.8, 1.0);
|
||||
|
||||
//Subsurface scattering
|
||||
vec3 sssSun = vec3(0.,-5.,-7.0);
|
||||
vec3 tosssSunVec = normalize(sssSun - v_fragPos);
|
||||
vec3 tosssSun = normalize(vec3(0.0,-100.,1.));
|
||||
float ssDistortion = 0.1;
|
||||
float sssIntensity = 1.;
|
||||
vec3 halfWay = normalize(tosssSun+norm*ssDistortion);
|
||||
float ssScateringCoef = pow(clamp(dot(toCameraVector,-halfWay),0.0,1.0),5.) * sssIntensity;
|
||||
//Sun glittering
|
||||
float glitterFactor = max(0.0,dot(tosssSunVec,reflect(-toCameraVector,norm)));
|
||||
if(!(glitterFactor > 0.98)) {
|
||||
glitterFactor = 0.0;
|
||||
}
|
||||
// Specular highlights
|
||||
vec3 halfwayDir = normalize(lightDir + toCameraVector);
|
||||
float spec = pow(max(dot(norm, halfwayDir), 0.0), 256.0);
|
||||
vec3 specular = spec * lightColor * 0.8;
|
||||
|
||||
//gl_FragColor = vec4(oceanColor + lightColor * glitterFactor,1.0);
|
||||
//gl_FragColor=vec4(clamp(oceanColor + (oceanColor*ssScateringCoef),0.,1.0),1.0); //Display subsurfacecatterting component
|
||||
//gl_FragColor = vec4((mix(oceanColor,skyColor,fresnel).xyz), 1.); //Just display reflection component
|
||||
//gl_FragColor = vec4(diffuse * oceanColor,1.0); //Render only diffuse component
|
||||
//gl_FragColor = vec4(normal,1.0); //show Normal map
|
||||
//gl_FragColor = vec4(displace.x,displace.x,displace.x,1.0); //Show Perlin Noise texture deactivate vertex distrotion before
|
||||
gl_FragColor = vec4((clamp(diffuse,0.97,1.0) * (mix(oceanColor + (oceanColor*ssScateringCoef),skyColor*0.8,fresnel).xyz))+ lightColor * glitterFactor, 1.0); //All combined
|
||||
// Subsurface scattering approximation
|
||||
float sss = pow(max(dot(toCameraVector, -lightDir), 0.0), 4.0) * 0.3;
|
||||
vec3 sssColor = vec3(0.0, 0.5, 0.5) * sss;
|
||||
|
||||
vec3 finalColor = mix(oceanColor, skyColor, fresnel) * clamp(diffuse, 0.4, 1.0) + specular + sssColor;
|
||||
|
||||
gl_FragColor = vec4(finalColor, 1.0);
|
||||
}
|
||||
</script>
|
||||
<script id="default-vs" type="x-shader/x-vertex">
|
||||
@@ -269,17 +235,81 @@
|
||||
uniform mat4 view;
|
||||
uniform mat4 model;
|
||||
uniform mat4 projection;
|
||||
uniform sampler2D displace_map;
|
||||
uniform float uTime;
|
||||
|
||||
varying vec2 v_uv;
|
||||
varying vec3 v_fragPos;
|
||||
varying vec3 v_normal;
|
||||
|
||||
// Gerstner wave function
|
||||
// Returns displacement (xyz) and partial derivatives for normal calculation
|
||||
vec3 gerstnerWave(vec2 pos, float time, vec2 direction, float steepness, float wavelength, out vec3 tangent, out vec3 binormal) {
|
||||
float k = 2.0 * 3.14159 / wavelength;
|
||||
float c = sqrt(9.8 / k);
|
||||
vec2 d = normalize(direction);
|
||||
float f = k * (dot(d, pos) - c * time);
|
||||
float a = steepness / k;
|
||||
|
||||
tangent = vec3(
|
||||
1.0 - steepness * d.x * d.x * sin(f),
|
||||
steepness * d.x * cos(f),
|
||||
-steepness * d.x * d.y * sin(f)
|
||||
);
|
||||
|
||||
binormal = vec3(
|
||||
-steepness * d.x * d.y * sin(f),
|
||||
steepness * d.y * cos(f),
|
||||
1.0 - steepness * d.y * d.y * sin(f)
|
||||
);
|
||||
|
||||
return vec3(
|
||||
d.x * a * cos(f),
|
||||
a * sin(f),
|
||||
d.y * a * cos(f)
|
||||
);
|
||||
}
|
||||
|
||||
void main(void) {
|
||||
vec4 displace = texture2D(displace_map, vec2(positionAttr.x,positionAttr.y));
|
||||
vec4 worldPos = model * vec4(positionAttr.x,positionAttr.y,positionAttr.z + displace.x, 1.0);
|
||||
vec4 worldPos = model * vec4(positionAttr.xyz, 1.0);
|
||||
vec2 pos = worldPos.xy;
|
||||
float time = uTime * 0.001;
|
||||
|
||||
vec3 displacement = vec3(0.0);
|
||||
vec3 tangent = vec3(1.0, 0.0, 0.0);
|
||||
vec3 binormal = vec3(0.0, 0.0, 1.0);
|
||||
vec3 t, b;
|
||||
|
||||
// Wave 1 - Primary large wave
|
||||
displacement += gerstnerWave(pos, time, vec2(1.0, 0.3), 0.25, 4.0, t, b);
|
||||
tangent += t - vec3(1.0, 0.0, 0.0);
|
||||
binormal += b - vec3(0.0, 0.0, 1.0);
|
||||
|
||||
// Wave 2 - Secondary wave at different angle
|
||||
displacement += gerstnerWave(pos, time, vec2(0.5, 1.0), 0.15, 2.5, t, b);
|
||||
tangent += t - vec3(1.0, 0.0, 0.0);
|
||||
binormal += b - vec3(0.0, 0.0, 1.0);
|
||||
|
||||
// Wave 3 - Smaller detail wave
|
||||
displacement += gerstnerWave(pos, time, vec2(-0.3, 0.7), 0.1, 1.5, t, b);
|
||||
tangent += t - vec3(1.0, 0.0, 0.0);
|
||||
binormal += b - vec3(0.0, 0.0, 1.0);
|
||||
|
||||
// Wave 4 - Tiny ripples
|
||||
displacement += gerstnerWave(pos, time, vec2(0.8, -0.4), 0.08, 0.8, t, b);
|
||||
tangent += t - vec3(1.0, 0.0, 0.0);
|
||||
binormal += b - vec3(0.0, 0.0, 1.0);
|
||||
|
||||
// Apply displacement - Gerstner displaces horizontally (x,z) and vertically (y)
|
||||
worldPos.x += displacement.x;
|
||||
worldPos.y += displacement.z;
|
||||
worldPos.z += displacement.y;
|
||||
|
||||
// Calculate normal from tangent and binormal
|
||||
vec3 normal = normalize(cross(binormal, tangent));
|
||||
// Swap components to match our coordinate system (z is up)
|
||||
v_normal = vec3(normal.x, normal.z, normal.y);
|
||||
|
||||
gl_Position = projection * view * worldPos;
|
||||
v_fragPos = worldPos.xyz;
|
||||
v_uv = positionAttr.xy;
|
||||
}
|
||||
</script>
|
||||
<script id="sky-fs" type="x-shader/x-fragment">
|
||||
@@ -330,6 +360,9 @@
|
||||
<div class="control-group">
|
||||
<strong>Toggle Help:</strong> <span class="key">H</span>
|
||||
</div>
|
||||
<div class="control-group" style="margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.2);">
|
||||
<button id="wireframe-toggle" style="background: rgba(255, 255, 255, 0.2); color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; width: 100%; font-size: 13px;">Wireframe: OFF</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="toggle-controls">Toggle Controls (H)</button>
|
||||
@@ -351,6 +384,12 @@
|
||||
controls.classList.toggle('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Wireframe toggle
|
||||
const wireframeBtn = document.getElementById('wireframe-toggle');
|
||||
wireframeBtn.addEventListener('click', () => {
|
||||
window.dispatchEvent(new CustomEvent('toggleWireframe'));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user