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

adjustments

Browse Source
This commit is contained in:
Gulum
2026-01-31 21:25:25 +01:00
parent 0a7dc2f25f
commit dedcec547d
13 changed files with 1660 additions and 2533 deletions
Download Patch File Download Diff File Expand all files Collapse all files

353
src/main.ts
View File

@@ -1,86 +1,42 @@
import { vec3, mat4, vec4 } from 'gl-matrix'
import { vec3, mat4 } from 'gl-matrix';
import { Camera } from './Camera';
import { Grid } from './Grid';
import { createProgram } from './Shader';
import * as Config from './constants';
var gl: WebGL2RenderingContext;
var viewportWidth = 0;
var viewportHeight = 0;
/** A camera that always looks at the world origin. Can have an offset and be rotated. */
class Camera {
pos: vec3;
target: vec3;
up: vec3;
xRot: number;
yRot: number;
offset: number;
constructor() {
this.pos = vec3.create();
vec3.set(this.pos, 0.0, 0.0, 0.0);
this.target = vec3.create();
vec3.set(this.target, 0.0, 0.0, 0.0);
this.up = vec3.create();
vec3.set(this.up, 0.0, 1.0, 0.0);
this.xRot = 0.0;
this.yRot = 0.0;
this.offset = 0.0;
}
setRotationX(rotX: number): void {
this.xRot = rotX;
this.updatePos();
}
setRotationY(rotY: number): void {
this.yRot = rotY;
this.updatePos();
}
/** Sets the offset to world origin. */
setOffset(off: number): void {
this.offset = off;
this.updatePos();
}
/** Reculcates the position according to xy-rotation and offset. */
private updatePos(): void {
var transformation: mat4 = mat4.create();
mat4.identity(transformation);
//2. xy-Rotation
mat4.rotateX(transformation, transformation, this.xRot);
mat4.rotateY(transformation, transformation, this.yRot);
//1. Translation
var translation = vec3.create();
vec3.set(translation, 0.0, 0.0, this.offset);
mat4.translate(transformation, transformation, translation);
var temp: vec4 = vec4.create();
vec4.set(temp, 0.0, 0.0, 0.0, 1.0);
vec4.transformMat4(temp, temp, transformation);
vec3.set(this.pos, temp[0], temp[1], temp[2]);
}
getViewMatrix(): mat4 {
var ret: mat4;
ret = mat4.create();
mat4.lookAt(ret, this.pos, this.target, this.up);
return ret;
}
}
// Moved to Camera.ts
/** Init OpenGL and gets the viewport/canvas sizes */
function initGL(canvas: HTMLCanvasElement) {
// Helper function for canvas resize
const updateCanvasSize = (canvas: HTMLCanvasElement) => {
const displayWidth = window.innerWidth;
const displayHeight = window.innerHeight;
if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
canvas.width = displayWidth;
canvas.height = displayHeight;
viewportWidth = displayWidth;
viewportHeight = displayHeight;
if (gl) {
gl.viewport(0, 0, viewportWidth, viewportHeight);
}
}
};
var gltemp;
try {
gltemp = canvas.getContext("webgl2");
if (!gltemp)
gltemp = canvas.getContext("experimental-webgl2");
if (gltemp != null) {
viewportWidth = canvas.width;
viewportHeight = canvas.height;
updateCanvasSize(canvas);
}
} catch (e) {
@@ -88,70 +44,27 @@ function initGL(canvas: HTMLCanvasElement) {
// Not the best error detection logic.
// Redirect to http://get.webgl.org in failure case.
if (gltemp == null) {
alert("Unable to initialize WebGL2. Your browser or machine may not support it.");
console.error("Unable to initialize WebGL2. Your browser or machine may not support it.");
return;
}
gl = <WebGL2RenderingContext>gltemp;
//WebGL2 supports floating point textures by default but it does not support filtering them or rendering to them by default. Note: 16bit filtering is included 32bit not
if (!gl.getExtension('EXT_color_buffer_float')) {
alert("32Bit/16Bit single Color render Buffers not available.");
console.error("32Bit/16Bit single Color render Buffers not available.");
} //allow 16bit texture as framebuffer target
gl.enable(gl.DEPTH_TEST);
return updateCanvasSize;
}
/** Update canvas size to fill window */
// Moved inline below
/** Grid for the watersurface */
var gridIndices: number[] = [];
var gridVertices: number[] = [];
function generateGrid(N: number) {
for (let j = 0; j <= N; ++j) {
for (let i = 0; i <= N; ++i) {
//Generate Vertices
let x = i / N;
let y = j / N;
let z = 0;
gridVertices.push(x);
gridVertices.push(y);
gridVertices.push(z);
// Moved to Grid.ts
if (i < N && j < N) //Skip edges
{
let row1 = j * (N + 1);
let row2 = (j + 1) * (N + 1);
// triangle 1
gridIndices.push(row1 + i);
gridIndices.push(row1 + i + 1);
gridIndices.push(row2 + i + 1);
// triangle 2
gridIndices.push(row1 + i);
gridIndices.push(row2 + i + 1);
gridIndices.push(row2 + i);
}
}
}
}
var gridVAO: WebGLVertexArrayObject | null = null;
function initGridVAO() {
generateGrid(128);
gridVAO = gl.createVertexArray();
gl.bindVertexArray(gridVAO);
let vboGrid: WebGLBuffer | null = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vboGrid);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(gridVertices), gl.STATIC_DRAW);
let iboGrid: WebGLBuffer | null = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iboGrid);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(gridIndices), gl.STATIC_DRAW);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
gl.enableVertexAttribArray(0);
gl.bindVertexArray(null);
}
/** Init Geomtry for an Triangle */
/** Init Geometry for a Triangle */
var VBO: WebGLBuffer | null = null;
function initGeometry() {
VBO = gl.createBuffer();
@@ -170,117 +83,23 @@ function initGeometry() {
}
/** Get shader source by HTML-Element<id> */
function getShader(id: string) {
var script: any = document.getElementById(id);
if (!script) {
console.log("Coudln't get shader source from HTML!");
return null;
}
var shader: WebGLShader | null;
if (script.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (script.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
console.log("Script type is wrong!");
return null;
}
if (shader == null) {
console.log("Cannot create Shaders!")
return null;
}
gl.shaderSource(shader, script.text);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
// Moved to Shader.ts
/** Init all Shaders that are needed */
var perlinNoiseProgram: WebGLProgram | null;
var defaultProgram: WebGLProgram | null;
var textureProgram: WebGLProgram | null;
function initShaders() {
{ //Get perlinNoiseProgram
let vertexShader = getShader("ndc-vs");
let fragmentShader = getShader("noise-fs");
if (vertexShader == null || fragmentShader == null) {
console.log("Didn't find shader sources!")
return null;
}
perlinNoiseProgram = gl.createProgram();
if (perlinNoiseProgram == null) {
console.log("Program not created!")
return null
}
gl.attachShader(perlinNoiseProgram, vertexShader);
gl.attachShader(perlinNoiseProgram, fragmentShader);
gl.linkProgram(perlinNoiseProgram);
if (!gl.getProgramParameter(perlinNoiseProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
}
{ //Get defaultShaders
let vertexShader = getShader("default-vs");
let fragmentShader = getShader("default-fs");
if (vertexShader == null || fragmentShader == null) {
console.log("Didn't find shader sources!")
return null;
}
defaultProgram = gl.createProgram();
if (defaultProgram == null) {
console.log("Program not created!")
return null
}
gl.attachShader(defaultProgram, vertexShader);
gl.attachShader(defaultProgram, fragmentShader);
gl.linkProgram(defaultProgram);
if (!gl.getProgramParameter(defaultProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
}
{ //Get textureShader
let vertexShader = getShader("texture-vs");
let fragmentShader = getShader("texture-fs");
if (vertexShader == null || fragmentShader == null) {
console.log("Didn't find shader sources!")
return null;
}
textureProgram = gl.createProgram();
if (textureProgram == null) {
console.log("Program not created!")
return null
}
gl.attachShader(textureProgram, vertexShader);
gl.attachShader(textureProgram, fragmentShader);
gl.linkProgram(textureProgram);
if (!gl.getProgramParameter(textureProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
}
perlinNoiseProgram = createProgram(gl, "ndc-vs", "noise-fs", "Perlin Noise");
defaultProgram = createProgram(gl, "default-vs", "default-fs", "Default");
textureProgram = createProgram(gl, "texture-vs", "texture-fs", "Texture");
}
/** Init an FBO used for the first render pass / perlin noise */
var perlinNoiseFBO: WebGLFramebuffer | null = null;
var textureFBO: WebGLTexture | null = null;
var perlinNoiseFBOWidth = 256;
var ferlinNoiseFBOHeight = 256;
var perlinNoiseFBOWidth = Config.NOISE_TEXTURE_WIDTH;
var perlinNoiseFBOHeight = Config.NOISE_TEXTURE_HEIGHT;
function initFBO() {
perlinNoiseFBO = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
@@ -288,7 +107,7 @@ function initFBO() {
// Add attachments
textureFBO = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, textureFBO); //last 3 parameter not intertesting becuase we are not supplying data
gl.texImage2D(gl.TEXTURE_2D, 0, gl.R16F, perlinNoiseFBOWidth, ferlinNoiseFBOHeight, 0, gl.RED, gl.HALF_FLOAT, null);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.R16F, perlinNoiseFBOWidth, perlinNoiseFBOHeight, 0, gl.RED, gl.HALF_FLOAT, null);
// set the filtering so we don't need mips
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
@@ -311,21 +130,29 @@ var timeSpent = 0.0;
var lastTime = new Date().getTime();
var counter = 0.0;
var fps = 0;
var fpsDisplay: HTMLElement | null = null;
/** Input states*/
var mouseXVel = 0;
var mouseYVel = 0;
var keyboardRotationX = 0;
var keyboardRotationY = 0;
var keyboardZoom = 0;
var keysPressed: Set<string> = new Set();
/** Objects and states*/
var camera: Camera;
var curRotX = 1.1;
var curRotY = 0;
var oceanGrid: Grid;
var curRotX = Config.CAMERA_DEFAULT_ROT_X;
var curRotY = Config.CAMERA_DEFAULT_ROT_Y;
function drawScene() {
fps++;
let now = new Date();
let delta = now.getTime() - lastTime;
timeSpent += delta;
if ((counter += delta) >= 1000.) {
if ((counter += delta) >= Config.FPS_UPDATE_INTERVAL) {
counter = 0;
console.log("FPS: " + fps);
if (fpsDisplay) {
fpsDisplay.textContent = `FPS: ${fps}`;
}
fps = 0;
}
lastTime = now.getTime();
@@ -336,7 +163,7 @@ function drawScene() {
//--- First render pass -> Perlin Noise (it updates the perlin noise texture)
{
gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
gl.viewport(0, 0, perlinNoiseFBOWidth, ferlinNoiseFBOHeight);
gl.viewport(0, 0, perlinNoiseFBOWidth, perlinNoiseFBOHeight);
//Clear buffer content
gl.clearColor(1.0, 1.0, 1.0, 1);
@@ -372,11 +199,11 @@ function drawScene() {
var projection = mat4.create();
mat4.identity(projection);
mat4.perspective(projection, 1.0, viewportWidth / viewportHeight, 0.1, 1000.); //projection mode should actually be camera specific
mat4.perspective(projection, Config.FOV, viewportWidth / viewportHeight, Config.NEAR_PLANE, Config.FAR_PLANE); //projection mode should actually be camera specific
camera.setOffset(1.2);
camera.setRotationX((curRotX += mouseYVel * 0.001));
camera.setRotationY((curRotY += mouseXVel * 0.001));
camera.setOffset(Config.CAMERA_DEFAULT_OFFSET + keyboardZoom);
camera.setRotationX((curRotX += mouseYVel * Config.MOUSE_SENSITIVITY + keyboardRotationX));
camera.setRotationY((curRotY += mouseXVel * Config.MOUSE_SENSITIVITY + keyboardRotationY));
var view = camera.getViewMatrix();
var model = mat4.create();
@@ -398,16 +225,45 @@ function drawScene() {
//gl.uniform1f(uTime_loc, timeSpent);
let displacementMap_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "displace_map");
gl.uniform1i(displacementMap_loc, 0); //Get texture from slot 0
gl.bindVertexArray(gridVAO);
gl.drawElements(gl.TRIANGLES, gridIndices.length, gl.UNSIGNED_INT, 0);
gl.bindVertexArray(null);
oceanGrid.draw(gl);
}
requestAnimationFrame(drawScene);
}
/** Handle keyboard input for camera controls */
function handleKeyboardInput() {
keyboardRotationX = 0;
keyboardRotationY = 0;
if (keysPressed.has('w') || keysPressed.has('W') || keysPressed.has('ArrowUp')) {
keyboardRotationX = Config.KEYBOARD_ROTATION_SPEED;
}
if (keysPressed.has('s') || keysPressed.has('S') || keysPressed.has('ArrowDown')) {
keyboardRotationX = -Config.KEYBOARD_ROTATION_SPEED;
}
if (keysPressed.has('a') || keysPressed.has('A') || keysPressed.has('ArrowLeft')) {
keyboardRotationY = Config.KEYBOARD_ROTATION_SPEED;
}
if (keysPressed.has('d') || keysPressed.has('D') || keysPressed.has('ArrowRight')) {
keyboardRotationY = -Config.KEYBOARD_ROTATION_SPEED;
}
if (keysPressed.has('q') || keysPressed.has('Q') || keysPressed.has('+')) {
keyboardZoom -= Config.KEYBOARD_ZOOM_SPEED;
}
if (keysPressed.has('e') || keysPressed.has('E') || keysPressed.has('-')) {
keyboardZoom += Config.KEYBOARD_ZOOM_SPEED;
}
}
function main() {
const canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("window");
initGL(canvas);
fpsDisplay = document.getElementById("fps-counter");
const updateCanvasSize = initGL(canvas);
if (!updateCanvasSize) {
console.error("Failed to initialize WebGL");
return;
}
var drag = false;
var previousPosX: number | null;
@@ -439,10 +295,35 @@ function main() {
canvas.addEventListener('mouseup', deactivateMouseMovement, false);
canvas.addEventListener('mouseleave', deactivateMouseMovement, false);
// Keyboard controls
window.addEventListener('keydown', (evt) => {
keysPressed.add(evt.key);
handleKeyboardInput();
// Reset camera on 'R' key
if (evt.key === 'r' || evt.key === 'R') {
curRotX = Config.CAMERA_DEFAULT_ROT_X;
curRotY = Config.CAMERA_DEFAULT_ROT_Y;
keyboardZoom = 0;
}
});
window.addEventListener('keyup', (evt) => {
keysPressed.delete(evt.key);
handleKeyboardInput();
});
// Window resize handler
window.addEventListener('resize', () => {
updateCanvasSize(canvas);
});
initShaders();
initGeometry();
initFBO();
initGridVAO();
oceanGrid = new Grid(Config.GRID_SIZE);
oceanGrid.initVAO(gl);
camera = new Camera();
//Check if any errors apeared during init.