496 lines
18 KiB
TypeScript
496 lines
18 KiB
TypeScript
import { vec3, mat4 } from 'gl-matrix';
|
|
import { ICamera } from './ICamera';
|
|
import { OrbitalCamera } from './Camera';
|
|
import { FPSCamera } from './FPSCamera';
|
|
import { Grid } from './Grid';
|
|
import { Skybox } from './Skybox';
|
|
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. */
|
|
// 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) {
|
|
updateCanvasSize(canvas);
|
|
}
|
|
|
|
} catch (e) {
|
|
}
|
|
// Not the best error detection logic.
|
|
// Redirect to http://get.webgl.org in failure case.
|
|
if (gltemp == null) {
|
|
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')) {
|
|
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 */
|
|
// Moved to Grid.ts
|
|
|
|
/** Init Geometry for a Triangle */
|
|
var VBO: WebGLBuffer | null = null;
|
|
function initGeometry() {
|
|
VBO = gl.createBuffer();
|
|
//Vertex data represent fullscreen quad in NDC-Space
|
|
// X, Y, Z, U, V
|
|
let vertexData = [-1.0, -1.0, 0.0, /*BOTTOM LEFT*/ 0.0, 0.0,
|
|
1.0, -1.0, 0.0, /*BOTTOM RIGHT*/ 1.0, 0.0,
|
|
-1.0, 1.0, 0.0, /*TOP LEFT */ 0.0, 1.0,
|
|
1.0, -1.0, 0.0, /*BOTTOM RIGHT */ 1.0, 0.0,
|
|
-1.0, 1.0, 0.0, /*TOP LEFT */ 0.0, 1.0,
|
|
1.0, 1.0, 0.0, /*TOP RIGHT */ 1.0, 1.0
|
|
];
|
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
|
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
|
|
}
|
|
|
|
/** Get shader source by HTML-Element<id> */
|
|
// Moved to Shader.ts
|
|
|
|
/** Init all Shaders that are needed */
|
|
var perlinNoiseProgram: WebGLProgram | null;
|
|
var defaultProgram: WebGLProgram | null;
|
|
var textureProgram: WebGLProgram | null;
|
|
var skyProgram: WebGLProgram | null;
|
|
function initShaders() {
|
|
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");
|
|
skyProgram = createProgram(gl, "sky-vs", "sky-fs", "Sky");
|
|
}
|
|
|
|
/** Init an FBO used for the first render pass / perlin noise */
|
|
var perlinNoiseFBO: WebGLFramebuffer | null = null;
|
|
var textureFBO: WebGLTexture | null = null;
|
|
var perlinNoiseFBOWidth = Config.NOISE_TEXTURE_WIDTH;
|
|
var perlinNoiseFBOHeight = Config.NOISE_TEXTURE_HEIGHT;
|
|
function initFBO() {
|
|
perlinNoiseFBO = gl.createFramebuffer();
|
|
gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
|
|
|
|
// 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, 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);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
|
|
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, textureFBO, 0);
|
|
|
|
if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) {
|
|
console.log("Framebuffer creation failed.");
|
|
}
|
|
|
|
gl.bindFramebuffer(gl.FRAMEBUFFER, null); //Reset to default framebuffer
|
|
}
|
|
|
|
/** Update/Draw function.*/
|
|
/** Framerate measurement variables */
|
|
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: ICamera;
|
|
var orbitalCamera: OrbitalCamera;
|
|
var fpsCamera: FPSCamera;
|
|
var oceanGrid: Grid;
|
|
var skybox: Skybox;
|
|
var curRotX = Config.CAMERA_DEFAULT_ROT_X;
|
|
var curRotY = Config.CAMERA_DEFAULT_ROT_Y;
|
|
/** Camera modes */
|
|
var cameraMode: 'orbital' | 'fps' = 'fps';
|
|
var moveSpeed = 0.15;
|
|
var fastMoveSpeed = 0.4;
|
|
function drawScene() {
|
|
fps++;
|
|
let now = new Date();
|
|
let delta = now.getTime() - lastTime;
|
|
timeSpent += delta;
|
|
if ((counter += delta) >= Config.FPS_UPDATE_INTERVAL) {
|
|
counter = 0;
|
|
if (fpsDisplay) {
|
|
fpsDisplay.textContent = `FPS: ${fps}`;
|
|
}
|
|
fps = 0;
|
|
}
|
|
lastTime = now.getTime();
|
|
// Two Rendering passes. The first one generates a perlin noise
|
|
// texture. Second one uses the textur for vertex displacement
|
|
// of a grid representing the water surface.
|
|
|
|
//--- First render pass -> Perlin Noise (it updates the perlin noise texture)
|
|
{
|
|
gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
|
|
gl.viewport(0, 0, perlinNoiseFBOWidth, perlinNoiseFBOHeight);
|
|
|
|
//Clear buffer content
|
|
gl.clearColor(1.0, 1.0, 1.0, 1);
|
|
gl.clear(gl.COLOR_BUFFER_BIT); //No depth buffer
|
|
|
|
// Disable face culling for fullscreen quad
|
|
gl.disable(gl.CULL_FACE);
|
|
|
|
//draw a fullscreen quad
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
|
|
|
|
// There are 7 floating-point values per vertex
|
|
let stride = 5 * Float32Array.BYTES_PER_ELEMENT;
|
|
|
|
// Set up position stream
|
|
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0);
|
|
gl.enableVertexAttribArray(0);
|
|
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, stride, 3 * Float32Array.BYTES_PER_ELEMENT);
|
|
gl.enableVertexAttribArray(1);
|
|
|
|
gl.useProgram(perlinNoiseProgram);
|
|
let uTime = gl.getUniformLocation(<WebGLProgram>perlinNoiseProgram, "uTime");
|
|
gl.uniform1f(uTime, timeSpent);
|
|
gl.drawArrays(gl.TRIANGLES, 0, 6); // Draw fullscreen quad
|
|
}
|
|
|
|
//--- Second render pass -> Geomtry with displacement by perlin noise texture ---
|
|
{
|
|
gl.bindFramebuffer(gl.FRAMEBUFFER, null); //Bind default framebuffer
|
|
gl.viewport(0, 0, viewportWidth, viewportHeight);
|
|
|
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
|
|
|
gl.activeTexture(gl.TEXTURE0); //Binds the texture to 0
|
|
gl.bindTexture(gl.TEXTURE_2D, textureFBO);
|
|
|
|
var projection = mat4.create();
|
|
mat4.identity(projection);
|
|
mat4.perspective(projection, Config.FOV, viewportWidth / viewportHeight, Config.NEAR_PLANE, Config.FAR_PLANE); //projection mode should actually be camera specific
|
|
|
|
// Handle camera movement and rotation based on mode
|
|
if (cameraMode === 'fps') {
|
|
// FPS camera - direct movement
|
|
camera = fpsCamera;
|
|
handleFPSCameraMovement();
|
|
|
|
// Apply mouse rotation for FPS mode
|
|
if (mouseXVel !== 0 || mouseYVel !== 0) {
|
|
fpsCamera.rotate(mouseXVel, mouseYVel);
|
|
mouseXVel = 0;
|
|
mouseYVel = 0;
|
|
}
|
|
} else {
|
|
// Orbital camera - original behavior
|
|
camera = orbitalCamera;
|
|
orbitalCamera.setOffset(Config.CAMERA_DEFAULT_OFFSET + keyboardZoom);
|
|
orbitalCamera.setRotationX((curRotX += mouseYVel * Config.MOUSE_SENSITIVITY + keyboardRotationX));
|
|
orbitalCamera.setRotationY((curRotY += mouseXVel * Config.MOUSE_SENSITIVITY + keyboardRotationY));
|
|
}
|
|
|
|
var view = camera.getViewMatrix();
|
|
|
|
// Sun direction (matches the one in ocean shader)
|
|
const sunDirection = vec3.fromValues(0.3, 0.5, 0.8);
|
|
vec3.normalize(sunDirection, sunDirection);
|
|
|
|
// Draw skybox first with depth test disabled (always behind everything)
|
|
gl.depthMask(false);
|
|
gl.disable(gl.DEPTH_TEST);
|
|
gl.disable(gl.CULL_FACE); // Disable face culling for skybox (we're inside)
|
|
gl.useProgram(skyProgram);
|
|
|
|
let sky_view_loc = gl.getUniformLocation(<WebGLProgram>skyProgram, "view");
|
|
gl.uniformMatrix4fv(sky_view_loc, false, view);
|
|
let sky_projection_loc = gl.getUniformLocation(<WebGLProgram>skyProgram, "projection");
|
|
gl.uniformMatrix4fv(sky_projection_loc, false, projection);
|
|
let sky_sun_loc = gl.getUniformLocation(<WebGLProgram>skyProgram, "uSunDirection");
|
|
gl.uniform3fv(sky_sun_loc, sunDirection);
|
|
|
|
skybox.draw(gl);
|
|
gl.enable(gl.DEPTH_TEST);
|
|
gl.depthMask(true);
|
|
gl.enable(gl.CULL_FACE); // Re-enable face culling for ocean
|
|
gl.cullFace(gl.BACK); // Cull back faces for ocean
|
|
|
|
var model = mat4.create();
|
|
mat4.identity(model);
|
|
let translationCentering = vec3.create();
|
|
vec3.set(translationCentering, -0.5, -0.5, 0.0);
|
|
mat4.translate(model, model, translationCentering); //1. First Center the Surface in the origin.
|
|
|
|
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 eye_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "eyePos");
|
|
gl.uniform3fv(eye_loc, camera.pos);
|
|
//let uTime_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uTime");
|
|
//gl.uniform1f(uTime_loc, timeSpent);
|
|
let displacementMap_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "displace_map");
|
|
gl.uniform1i(displacementMap_loc, 0); //Get texture from slot 0
|
|
oceanGrid.draw(gl);
|
|
}
|
|
requestAnimationFrame(drawScene);
|
|
}
|
|
|
|
/** Handle FPS camera movement */
|
|
function handleFPSCameraMovement() {
|
|
const speed = keysPressed.has('Shift') ? fastMoveSpeed : moveSpeed;
|
|
|
|
// WASD for horizontal movement
|
|
if (keysPressed.has('w') || keysPressed.has('W')) {
|
|
fpsCamera.moveForward(speed);
|
|
}
|
|
if (keysPressed.has('s') || keysPressed.has('S')) {
|
|
fpsCamera.moveForward(-speed);
|
|
}
|
|
if (keysPressed.has('a') || keysPressed.has('A')) {
|
|
fpsCamera.moveRight(-speed);
|
|
}
|
|
if (keysPressed.has('d') || keysPressed.has('D')) {
|
|
fpsCamera.moveRight(speed);
|
|
}
|
|
|
|
// Q/E for vertical movement
|
|
if (keysPressed.has('q') || keysPressed.has('Q')) {
|
|
fpsCamera.moveUp(-speed);
|
|
}
|
|
if (keysPressed.has('e') || keysPressed.has('E')) {
|
|
fpsCamera.moveUp(speed);
|
|
}
|
|
|
|
// Space to go up, Ctrl to go down
|
|
if (keysPressed.has(' ')) {
|
|
fpsCamera.moveUp(speed);
|
|
}
|
|
if (keysPressed.has('Control')) {
|
|
fpsCamera.moveUp(-speed);
|
|
}
|
|
}
|
|
|
|
/** 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");
|
|
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;
|
|
var previousPosY: number | null;
|
|
canvas.addEventListener('mousedown', function (evt) {
|
|
drag = true;
|
|
}, false);
|
|
canvas.addEventListener('mousemove', function (evt) {
|
|
if (drag) {
|
|
if (previousPosX == null || previousPosY == null) {
|
|
previousPosX = evt.x;
|
|
previousPosY = evt.y;
|
|
}
|
|
var mousePosX = evt.x;
|
|
var mousePosY = evt.y;
|
|
mouseXVel = (mousePosX - previousPosX);
|
|
mouseYVel = (mousePosY - previousPosY);
|
|
previousPosX = mousePosX;
|
|
previousPosY = mousePosY;
|
|
}
|
|
}, false);
|
|
var deactivateMouseMovement = function () {
|
|
previousPosX = null;
|
|
previousPosY = null;
|
|
mouseXVel = 0.0;
|
|
mouseYVel = 0.0;
|
|
drag = false;
|
|
}
|
|
canvas.addEventListener('mouseup', deactivateMouseMovement, false);
|
|
canvas.addEventListener('mouseleave', deactivateMouseMovement, false);
|
|
|
|
// Keyboard controls
|
|
window.addEventListener('keydown', (evt) => {
|
|
keysPressed.add(evt.key);
|
|
|
|
// Toggle camera mode with 'C' key
|
|
if (evt.key === 'c' || evt.key === 'C') {
|
|
cameraMode = cameraMode === 'fps' ? 'orbital' : 'fps';
|
|
console.log(`Camera mode: ${cameraMode.toUpperCase()}`);
|
|
|
|
// Update FPS display to show camera mode
|
|
if (fpsDisplay) {
|
|
const modeText = document.createElement('div');
|
|
modeText.id = 'camera-mode';
|
|
modeText.style.cssText = 'position: absolute; top: 40px; left: 10px; color: white; font-family: monospace;';
|
|
modeText.textContent = `Camera: ${cameraMode.toUpperCase()}`;
|
|
|
|
const existingMode = document.getElementById('camera-mode');
|
|
if (existingMode) {
|
|
existingMode.textContent = `Camera: ${cameraMode.toUpperCase()}`;
|
|
} else {
|
|
document.body.appendChild(modeText);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Reset camera on 'R' key
|
|
if (evt.key === 'r' || evt.key === 'R') {
|
|
if (cameraMode === 'fps') {
|
|
fpsCamera = new FPSCamera(); // Reset to initial FPS position
|
|
camera = fpsCamera;
|
|
console.log('Camera reset to FPS default position');
|
|
} else {
|
|
curRotX = Config.CAMERA_DEFAULT_ROT_X;
|
|
curRotY = Config.CAMERA_DEFAULT_ROT_Y;
|
|
keyboardZoom = 0;
|
|
console.log('Camera reset to orbital default position');
|
|
}
|
|
}
|
|
|
|
// Prevent default for space to avoid page scroll
|
|
if (evt.key === ' ' && cameraMode === 'fps') {
|
|
evt.preventDefault();
|
|
}
|
|
|
|
// Handle orbital camera keyboard input
|
|
if (cameraMode === 'orbital') {
|
|
handleKeyboardInput();
|
|
}
|
|
});
|
|
|
|
window.addEventListener('keyup', (evt) => {
|
|
keysPressed.delete(evt.key);
|
|
|
|
if (cameraMode === 'orbital') {
|
|
handleKeyboardInput();
|
|
}
|
|
});
|
|
|
|
// Window resize handler
|
|
window.addEventListener('resize', () => {
|
|
updateCanvasSize(canvas);
|
|
});
|
|
|
|
// Camera mode toggle from UI controls
|
|
window.addEventListener('toggleCameraMode', () => {
|
|
cameraMode = cameraMode === 'fps' ? 'orbital' : 'fps';
|
|
camera = cameraMode === 'fps' ? fpsCamera : orbitalCamera;
|
|
console.log(`Camera mode switched to: ${cameraMode.toUpperCase()}`);
|
|
|
|
// Update display
|
|
const modeText = document.createElement('div');
|
|
modeText.id = 'camera-mode';
|
|
modeText.style.cssText = 'position: absolute; top: 40px; left: 10px; color: white; font-family: monospace;';
|
|
modeText.textContent = `Camera: ${cameraMode.toUpperCase()}`;
|
|
|
|
const existingMode = document.getElementById('camera-mode');
|
|
if (existingMode) {
|
|
existingMode.textContent = `Camera: ${cameraMode.toUpperCase()}`;
|
|
} else {
|
|
document.body.appendChild(modeText);
|
|
}
|
|
});
|
|
|
|
initShaders();
|
|
initGeometry();
|
|
initFBO();
|
|
|
|
oceanGrid = new Grid(Config.GRID_SIZE);
|
|
oceanGrid.initVAO(gl);
|
|
|
|
skybox = new Skybox();
|
|
skybox.initVAO(gl);
|
|
|
|
// Initialize both cameras
|
|
orbitalCamera = new OrbitalCamera();
|
|
fpsCamera = new FPSCamera();
|
|
camera = fpsCamera; // Start with FPS camera
|
|
|
|
console.log('Cameras initialized - Press C to toggle between FPS and Orbital modes');
|
|
|
|
//Check if any errors apeared during init.
|
|
if (gl.getError() != gl.NO_ERROR) {
|
|
console.log("OpenGL Error!: ");
|
|
}
|
|
|
|
drawScene();
|
|
}
|
|
|
|
main(); |