Gulum/WebOcean
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor OceanLOD to ProjectedOcean; update grid generation and shader integration for improved horizon projection and clipping

Browse Source
This commit is contained in:
Gulum
2026-01-31 23:53:07 +01:00
parent 503435bdf7
commit 9ffee04185
3 changed files with 309 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
src/OceanLOD.ts
View File

@@ -1,200 +1,167 @@
import { Grid } from './Grid';
import { vec3 } from 'gl-matrix';
import { vec3, vec4, mat4 } from 'gl-matrix';
/** Manages multiple ocean grid patches with LOD based on camera distance and view cone */
export class OceanLOD {
private grids: Array<{
grid: Grid;
centerX: number;
centerY: number;
size: number;
lodLevel: number;
visible: boolean;
}> = [];
/**
* Projected Grid Ocean - Based on the projected grid algorithm.
* Uses a separate projector that can be adjusted to avoid backfiring.
* The grid is created in projector space and projected onto the ocean plane.
*/
export class ProjectedOcean {
private vao: WebGLVertexArrayObject | null = null;
private lineVao: WebGLVertexArrayObject | null = null;
private indexBuffer: WebGLBuffer | null = null;
private vertexBuffer: WebGLBuffer | null = null;
private indexCount: number = 0;
private lineIndexCount: number = 0;
private readonly LOD_LEVELS = [
{ distance: 3.0, gridSize: 256 }, // Very close - ultra detail
{ distance: 8.0, gridSize: 128 }, // Close - high detail
{ distance: 20.0, gridSize: 64 }, // Medium distance
{ distance: 40.0, gridSize: 16 }, // Far - low detail
{ distance: 80.0, gridSize: 8 }, // Very far - minimal
{ distance: Infinity, gridSize: 4 },// Horizon - lowest (will be stretched anyway)
];
// Grid resolution
private readonly GRID_SIZE_X = 400;
private readonly GRID_SIZE_Y = 400;
private readonly PATCH_SIZE = 10.0; // Larger patches = fewer needed
private readonly PATCHES_PER_SIDE = 21; // 21x21 = 441 patches (covers ~200 units)
private readonly VIEW_CONE_COS = Math.cos(Math.PI * 0.45); // ~81 degree half-angle (wider than typical FOV)
// Ocean plane parameters (Z = 0 plane, normal pointing up)
private readonly OCEAN_LEVEL = 0.0;
private readonly MAX_WAVE_HEIGHT = 1.5; // Maximum displacement above ocean level
private readonly MIN_WAVE_HEIGHT = -0.5; // Maximum displacement below ocean level
// Track the grid origin to re-center when camera moves
private gridOriginX: number = 0;
private gridOriginY: number = 0;
// Projector parameters
private readonly MIN_PROJECTOR_HEIGHT = 5.0; // Minimum height above upper bound
constructor() {
this.createGridPatches();
}
// Matrices for the shader
public projectorMatrix: mat4 = mat4.create();
public rangeMatrix: mat4 = mat4.create();
private createGridPatches(): void {
const halfPatches = Math.floor(this.PATCHES_PER_SIDE / 2);
for (let y = -halfPatches; y <= halfPatches; y++) {
for (let x = -halfPatches; x <= halfPatches; x++) {
const centerX = x * this.PATCH_SIZE + this.gridOriginX;
const centerY = y * this.PATCH_SIZE + this.gridOriginY;
// Start with lowest detail - will be updated based on camera
const grid = new Grid(
this.LOD_LEVELS[5].gridSize,
centerX,
centerY,
this.PATCH_SIZE
);
this.grids.push({
grid,
centerX,
centerY,
size: this.PATCH_SIZE,
lodLevel: 5,
visible: true
});
}
}
}
/** Re-center the grid around a new origin */
private recenterGrid(gl: WebGL2RenderingContext, newOriginX: number, newOriginY: number): void {
this.gridOriginX = newOriginX;
this.gridOriginY = newOriginY;
const halfPatches = Math.floor(this.PATCHES_PER_SIDE / 2);
let i = 0;
for (let y = -halfPatches; y <= halfPatches; y++) {
for (let x = -halfPatches; x <= halfPatches; x++) {
const patch = this.grids[i];
const newCenterX = x * this.PATCH_SIZE + this.gridOriginX;
const newCenterY = y * this.PATCH_SIZE + this.gridOriginY;
// Only update if patch position changed
if (patch.centerX !== newCenterX || patch.centerY !== newCenterY) {
patch.centerX = newCenterX;
patch.centerY = newCenterY;
// Force LOD recalculation
patch.lodLevel = -1;
}
i++;
}
}
}
/** Update LOD based on camera position and view direction */
updateLOD(gl: WebGL2RenderingContext, cameraPos: vec3, cameraTarget: vec3): void {
// Calculate view direction (normalized)
const viewDir = vec3.create();
vec3.subtract(viewDir, cameraTarget, cameraPos);
vec3.normalize(viewDir, viewDir);
// Check if we need to recenter the grid (camera moved more than one patch size from origin)
const cameraGridX = Math.floor(cameraPos[0] / this.PATCH_SIZE) * this.PATCH_SIZE;
const cameraGridY = Math.floor(cameraPos[1] / this.PATCH_SIZE) * this.PATCH_SIZE;
if (cameraGridX !== this.gridOriginX || cameraGridY !== this.gridOriginY) {
this.recenterGrid(gl, cameraGridX, cameraGridY);
}
for (const patch of this.grids) {
// Calculate vector from camera to patch center (on XY plane, Z=0 for ocean surface)
const toPatch = vec3.fromValues(
patch.centerX - cameraPos[0],
patch.centerY - cameraPos[1],
0 - cameraPos[2] // Ocean is at Z=0
);
const distance = vec3.length(toPatch);
// Normalize direction to patch
const toPatchDir = vec3.create();
vec3.normalize(toPatchDir, toPatch);
// Calculate dot product with view direction (how aligned is patch with where we're looking)
const dotProduct = vec3.dot(viewDir, toPatchDir);
// Determine if patch is in front of camera and within view cone
const isInFront = dotProduct > -0.3; // Slightly behind is ok for edge cases
const isInViewCone = dotProduct > this.VIEW_CONE_COS;
// Frustum culling - don't draw patches behind camera
patch.visible = isInFront;
// Calculate LOD level
let newLodLevel = 5; // Default to lowest detail
if (!isInFront) {
// Behind camera - skip (will not be drawn)
newLodLevel = 5;
} else if (isInViewCone) {
// In view cone - use distance-based LOD
for (let i = 0; i < this.LOD_LEVELS.length; i++) {
if (distance < this.LOD_LEVELS[i].distance) {
newLodLevel = i;
break;
}
}
} else {
// In front but outside view cone - reduce detail by 1-2 levels
for (let i = 0; i < this.LOD_LEVELS.length; i++) {
if (distance < this.LOD_LEVELS[i].distance) {
newLodLevel = Math.min(i + 2, 5); // Reduce detail
break;
}
}
}
// Only recreate grid if LOD level changed
if (newLodLevel !== patch.lodLevel) {
patch.lodLevel = newLodLevel;
patch.grid = new Grid(
this.LOD_LEVELS[newLodLevel].gridSize,
patch.centerX,
patch.centerY,
patch.size
);
patch.grid.initVAO(gl);
}
}
}
constructor() {}
/** Generate the grid vertices (in [0,1] range) */
initVAO(gl: WebGL2RenderingContext): void {
for (const { grid } of this.grids) {
grid.initVAO(gl);
const vertices: number[] = [];
const indices: number[] = [];
// Create grid in [0,1] range - will be transformed by projector matrix
for (let y = 0; y <= this.GRID_SIZE_Y; y++) {
for (let x = 0; x <= this.GRID_SIZE_X; x++) {
const u = x / this.GRID_SIZE_X;
const v = y / this.GRID_SIZE_Y;
vertices.push(u, v);
}
}
// Create indices (counter-clockwise winding when viewed from above, Z up)
for (let y = 0; y < this.GRID_SIZE_Y; y++) {
for (let x = 0; x < this.GRID_SIZE_X; x++) {
const topLeft = y * (this.GRID_SIZE_X + 1) + x;
const topRight = topLeft + 1;
const bottomLeft = (y + 1) * (this.GRID_SIZE_X + 1) + x;
const bottomRight = bottomLeft + 1;
// CCW winding for front face visible from +Z (above)
indices.push(topLeft, topRight, bottomLeft);
indices.push(topRight, bottomRight, bottomLeft);
}
}
this.indexCount = indices.length;
// Create line indices for wireframe
const lineIndices: number[] = [];
for (let y = 0; y <= this.GRID_SIZE_Y; y++) {
for (let x = 0; x <= this.GRID_SIZE_X; x++) {
const currentVertex = y * (this.GRID_SIZE_X + 1) + x;
// Horizontal line
if (x < this.GRID_SIZE_X) {
lineIndices.push(currentVertex, currentVertex + 1);
}
// Vertical line
if (y < this.GRID_SIZE_Y) {
lineIndices.push(currentVertex, currentVertex + (this.GRID_SIZE_X + 1));
}
}
}
this.lineIndexCount = lineIndices.length;
// Create vertex buffer (shared between both VAOs)
this.vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Create VAO for filled triangles
this.vao = gl.createVertexArray();
gl.bindVertexArray(this.vao);
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
this.indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(indices), gl.STATIC_DRAW);
gl.bindVertexArray(null);
// Create VAO for wireframe lines
this.lineVao = gl.createVertexArray();
gl.bindVertexArray(this.lineVao);
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
const lineIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, lineIndexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(lineIndices), gl.STATIC_DRAW);
gl.bindVertexArray(null);
}
/**
* Update the projector matrices based on camera position.
* We use the camera's own view-projection to ensure screen coverage.
*/
updateProjector(cameraPos: vec3, cameraForward: vec3, viewMatrix: mat4, projMatrix: mat4): void {
// Use camera's view-projection directly
const viewProj = mat4.create();
mat4.multiply(viewProj, projMatrix, viewMatrix);
// Invert to get unprojection matrix
mat4.invert(this.projectorMatrix, viewProj);
// Range matrix maps [0,1] grid to [-1,1] clip space
this.calculateRangeMatrix(cameraPos, viewMatrix, projMatrix, viewProj);
}
/**
* Calculate the range conversion matrix to focus geometry on visible area
* For simplicity and to ensure horizon coverage, we use the full clip space range
*/
private calculateRangeMatrix(
cameraPos: vec3,
viewMatrix: mat4,
projMatrix: mat4,
projectorViewProj: mat4
): void {
// Use full clip space [-1, 1] to ensure complete coverage including horizon
// The grid [0,1] maps to [-1,1] in projector clip space
mat4.identity(this.rangeMatrix);
this.rangeMatrix[0] = 2.0; // Scale X: [0,1] -> [0,2]
this.rangeMatrix[5] = 2.0; // Scale Y: [0,1] -> [0,2]
this.rangeMatrix[10] = 2.0; // Scale Z
this.rangeMatrix[12] = -1.0; // Translate X: [0,2] -> [-1,1]
this.rangeMatrix[13] = -1.0; // Translate Y: [0,2] -> [-1,1]
this.rangeMatrix[14] = -1.0; // Translate Z
}
draw(gl: WebGL2RenderingContext, wireframe: boolean = false): void {
for (const patch of this.grids) {
if (patch.visible) {
patch.grid.draw(gl, wireframe);
}
if (wireframe && this.lineVao) {
gl.bindVertexArray(this.lineVao);
gl.drawElements(gl.LINES, this.lineIndexCount, gl.UNSIGNED_INT, 0);
gl.bindVertexArray(null);
} else if (this.vao) {
gl.bindVertexArray(this.vao);
gl.drawElements(gl.TRIANGLES, this.indexCount, gl.UNSIGNED_INT, 0);
gl.bindVertexArray(null);
}
}
getGridCount(): number {
return this.grids.length;
}
getTotalVertexCount(): number {
let total = 0;
for (const { grid } of this.grids) {
total += grid.getIndexCount() / 3;
}
return total;
}
/** Get statistics about current LOD distribution */
getLODStats(): { [key: number]: number } {
const stats: { [key: number]: number } = { 0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 };
for (const patch of this.grids) {
stats[patch.lodLevel]++;
}
return stats;
getIndexCount(): number {
return this.indexCount;
}
}

90
src/main.ts
View File

@@ -1,6 +1,6 @@
import { vec3, mat4 } from 'gl-matrix';
import { vec3, vec4, mat4 } from 'gl-matrix';
import { Camera } from './Camera';
import { OceanLOD } from './OceanLOD';
import { ProjectedOcean } from './OceanLOD';
import { Skybox } from './Skybox';
import { createProgram } from './Shader';
import * as Config from './constants';
@@ -134,14 +134,13 @@ var lastTime = new Date().getTime();
var counter = 0.0;
var fps = 0;
var fpsDisplay: HTMLElement | null = null;
var lodStatsTimer = 0;
/** Input states*/
var mouseXVel = 0;
var mouseYVel = 0;
var keysPressed: Set<string> = new Set();
/** Objects and states*/
var camera: Camera;
var oceanLOD: OceanLOD;
var projectedOcean: ProjectedOcean;
var skybox: Skybox;
var wireframeMode = false;
/** Camera movement speed */
@@ -157,7 +156,6 @@ function drawScene() {
let now = new Date();
let delta = now.getTime() - lastTime;
timeSpent += delta;
lodStatsTimer += delta;
if ((counter += delta) >= Config.FPS_UPDATE_INTERVAL) {
counter = 0;
@@ -166,13 +164,6 @@ function drawScene() {
}
fps = 0;
}
// Log LOD stats every 5 seconds
if (lodStatsTimer >= 5000) {
lodStatsTimer = 0;
const stats = oceanLOD.getLODStats();
console.log(`LOD Stats - High:${stats[0]} Med:${stats[1]} Low:${stats[2]} VeryLow:${stats[3]}`);
}
lastTime = now.getTime();
// Sun direction (matches the one in ocean shader)
@@ -216,20 +207,18 @@ function drawScene() {
gl.enable(gl.DEPTH_TEST);
gl.depthMask(true);
// Update LOD based on camera position and view direction
oceanLOD.updateLOD(gl, camera.pos, camera.target);
var model = mat4.create();
mat4.identity(model);
// No centering needed - grids are already positioned correctly in world space
// Update projected ocean's projector matrices
projectedOcean.updateProjector(camera.pos, camera.forward, view, projection);
gl.useProgram(defaultProgram);
let view_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "view");
gl.uniformMatrix4fv(view_loc, false, view);
let model_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "model");
gl.uniformMatrix4fv(model_loc, false, model);
let projection_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "projection");
gl.uniformMatrix4fv(projection_loc, false, projection);
let projectorMatrix_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uProjectorMatrix");
gl.uniformMatrix4fv(projectorMatrix_loc, false, projectedOcean.projectorMatrix);
let rangeMatrix_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uRangeMatrix");
gl.uniformMatrix4fv(rangeMatrix_loc, false, projectedOcean.rangeMatrix);
let eye_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "eyePos");
gl.uniform3fv(eye_loc, camera.pos);
let uTime_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uTime");
@@ -245,7 +234,60 @@ function drawScene() {
let uGlitterIntensity_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uGlitterIntensity");
gl.uniform1f(uGlitterIntensity_loc, glitterIntensity);
oceanLOD.draw(gl, wireframeMode);
// Calculate horizon Y in clip space
// The skybox horizon is where rayDir.z = 0 (horizontal ray from camera)
// This is a point at infinity in a horizontal direction from the camera
// We need to find where this projects to in clip space
// Get a horizontal direction (camera forward projected onto XY plane)
const horizonDir = vec3.fromValues(camera.forward[0], camera.forward[1], 0);
if (vec3.length(horizonDir) > 0.001) {
vec3.normalize(horizonDir, horizonDir);
} else {
vec3.set(horizonDir, 1, 0, 0);
}
// Transform a direction vector (not a point) to clip space
// For a point at infinity in direction D, its clip space position is:
// lim(t->inf) ViewProj * (eye + t*D) / w
// Which equals ViewProj * D (as a vec4 with w=0), then we look at x/w, y/w
// But since w would be 0 for a direction, we use the view matrix only
// The horizon is where view-space Y = 0 for an infinite point
// In our Z-up system, the horizon is where the ray is horizontal (z=0 in world)
// Transform a horizontal direction through view matrix
const horizonDirView = vec4.fromValues(horizonDir[0], horizonDir[1], 0, 0);
vec4.transformMat4(horizonDirView, horizonDirView, view);
// The Y in clip space where this direction points is based on the view-space direction
// projected through the projection matrix
// For perspective: clipY/clipW = viewY/(-viewZ) * projectionScaleY
// For a horizontal ray at infinity, we can compute where it ends up
// Simpler approach: transform a point very far away in horizon direction
const farDist = 1000000.0;
const horizonPoint = vec4.fromValues(
camera.pos[0] + horizonDir[0] * farDist,
camera.pos[1] + horizonDir[1] * farDist,
camera.pos[2], // Same height as camera - this is the horizon!
1
);
const viewProj = mat4.create();
mat4.multiply(viewProj, projection, view);
vec4.transformMat4(horizonPoint, horizonPoint, viewProj);
const horizonClipY = horizonPoint[3] !== 0 ? horizonPoint[1] / horizonPoint[3] : 0;
let uHorizonClipY_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uHorizonClipY");
gl.uniform1f(uHorizonClipY_loc, horizonClipY);
// Enable backface culling so ocean isn't visible from below
gl.enable(gl.CULL_FACE);
gl.cullFace(gl.BACK);
gl.frontFace(gl.CCW);
projectedOcean.draw(gl, wireframeMode);
gl.disable(gl.CULL_FACE);
}
requestAnimationFrame(drawScene);
}
@@ -380,9 +422,9 @@ function main() {
initGeometry();
initFBO();
oceanLOD = new OceanLOD();
oceanLOD.initVAO(gl);
console.log(`Ocean LOD initialized with ${oceanLOD.getGridCount()} patches`);
projectedOcean = new ProjectedOcean();
projectedOcean.initVAO(gl);
console.log(`Projected ocean initialized with ${projectedOcean.getIndexCount()} indices`);
skybox = new Skybox();
skybox.initVAO(gl);