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

6
.gitignore vendored
View File

@@ -1,2 +1,6 @@
build/
node_modules/
dist/
node_modules/
.vscode/
*.log
.DS_Store

14
.gitlab-ci.yml
View File

@@ -1,6 +1,6 @@
stages:
- build #first build
- deploy #then deploy
- build
- deploy
build:
stage: build
@@ -9,19 +9,17 @@ build:
- npm run build
artifacts:
paths:
- build
- dist
only:
- master
- main
deploy_to_projects:
stage: deploy
script:
- mkdir -p /var/www/projects.rismer.de/$CI_PROJECT_NAME
- cp index.html /var/www/projects.rismer.de/$CI_PROJECT_NAME
- mkdir -p /var/www/projects.rismer.de/$CI_PROJECT_NAME/build
- cp build/app.js /var/www/projects.rismer.de/$CI_PROJECT_NAME/build
- cp -r dist/* /var/www/projects.rismer.de/$CI_PROJECT_NAME/
environment:
name: deploy
url: https://projects.rismer.de/$CI_PROJECT_NAME
only:
- master
- main

144
index.html
View File

@@ -1,7 +1,101 @@
<!DOCTYPE html>
<html>
<header>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Ocean</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
background: #000;
}
#window {
display: block;
width: 100vw;
height: 100vh;
cursor: move;
}
#controls {
position: absolute;
top: 20px;
left: 20px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 15px 20px;
border-radius: 8px;
font-size: 14px;
max-width: 300px;
backdrop-filter: blur(10px);
transition: opacity 0.3s;
}
#controls.hidden {
opacity: 0;
pointer-events: none;
}
#controls h3 {
margin: 0 0 10px 0;
font-size: 16px;
font-weight: 600;
}
#controls .control-group {
margin-bottom: 8px;
line-height: 1.6;
}
#controls .key {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
padding: 2px 8px;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 12px;
margin: 0 2px;
}
#toggle-controls {
position: absolute;
top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.7);
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
backdrop-filter: blur(10px);
transition: background 0.3s;
}
#toggle-controls:hover {
background: rgba(0, 0, 0, 0.85);
}
#fps-counter {
position: absolute;
bottom: 20px;
left: 20px;
background: rgba(0, 0, 0, 0.7);
color: #0f0;
padding: 8px 12px;
border-radius: 5px;
font-family: 'Courier New', monospace;
font-size: 14px;
backdrop-filter: blur(10px);
}
</style>
<script id="noise-fs" type="x-shader/x-fragment">
precision mediump float;
@@ -212,12 +306,52 @@
fragPos = (view * vec4(positionAttr,1.0)).xyz; //This is wrong probably
}
</script>
</header>
</head>
<body>
<canvas id="window" width="800" height="600"
style="margin:0 auto; border: solid #000000 1px; display:block; cursor:move;"></canvas>
<script src="build/app.js"></script>
<canvas id="window"></canvas>
<div id="controls">
<h3>🌊 Ocean Controls</h3>
<div class="control-group">
<strong>Camera Rotation:</strong><br>
<span class="key">W</span><span class="key">A</span><span class="key">S</span><span class="key">D</span> or Arrow Keys
</div>
<div class="control-group">
<strong>Zoom:</strong><br>
<span class="key">Q</span> / <span class="key">E</span> or <span class="key">+</span> / <span class="key">-</span>
</div>
<div class="control-group">
<strong>Mouse:</strong> Click and drag to rotate
</div>
<div class="control-group">
<strong>Reset:</strong> <span class="key">R</span>
</div>
<div class="control-group">
<strong>Toggle Help:</strong> <span class="key">H</span>
</div>
</div>
<button id="toggle-controls">Toggle Controls (H)</button>
<div id="fps-counter">FPS: 0</div>
<script type="module" src="/src/main.ts"></script>
<script>
// Toggle controls visibility
const controls = document.getElementById('controls');
const toggleBtn = document.getElementById('toggle-controls');
toggleBtn.addEventListener('click', () => {
controls.classList.toggle('hidden');
});
window.addEventListener('keydown', (evt) => {
if (evt.key === 'h' || evt.key === 'H') {
controls.classList.toggle('hidden');
}
});
</script>
</body>
</html>

3201
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
package.json
View File

@@ -2,13 +2,12 @@
"name": "web-ocean",
"version": "0.0.1",
"description": "Simulating a ocean with typescript and webgl.",
"main": "index.html",
"type": "module",
"scripts": {
"livedev": "concurrently --kill-others \"npm-watch\"",
"build:release": "tsc && browserify ./build/main.js | uglifyjs > ./build/app.js",
"build:debug": "tsc && browserify --debug ./build/main.js -o ./build/app.js",
"build:tsc": "tsc",
"test": "echo \"Error: no test specified\" && exit 1"
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"build:legacy": "tsc && browserify ./build/main.js | uglifyjs > ./build/app.js"
},
"keywords": [
"webgl",
@@ -21,10 +20,8 @@
"author": "Julian Niessner",
"license": "ISC",
"devDependencies": {
"browserify": "^17.0.1",
"concurrently": "^9.2.1",
"typescript": "^5.9.3",
"uglify-js": "^3.19.3"
"vite": "^6.0.7"
},
"dependencies": {
"gl-matrix": "^3.4.4"

142
readme.md
View File

@@ -1,11 +1,141 @@
Projekt installieren:
# 🌊 WebOcean
```npm i```
An interactive 3D ocean simulation using WebGL2, TypeScript, and Perlin noise for realistic water wave generation.
Projekt bauen:
![WebGL](https://img.shields.io/badge/WebGL-2.0-990000?style=flat-square)
![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178C6?style=flat-square)
![Vite](https://img.shields.io/badge/Vite-6.0-646CFF?style=flat-square)
```npm run build```
## ✨ Features
und ausführen
- **Real-time Ocean Simulation** - Dynamic water surface with Perlin noise-based displacement
- **Advanced Rendering Techniques**:
- Fresnel reflection for realistic water appearance
- Subsurface scattering for light penetration
- Specular highlights for sun glitter effect
- Dynamic normal mapping from displacement
- **Interactive Camera Controls** - Mouse and keyboard navigation
- **Responsive Design** - Automatically adapts to window size
- **Performance Monitoring** - Real-time FPS counter
```index.html```
## 🎮 Controls
| Action | Keys |
|--------|------|
| **Rotate Camera** | `W` `A` `S` `D` or Arrow Keys |
| **Zoom In/Out** | `Q` / `E` or `+` / `-` |
| **Mouse Drag** | Click and drag to rotate |
| **Reset Camera** | `R` |
| **Toggle Help** | `H` |
## 🚀 Getting Started
### Prerequisites
- Node.js (v16 or higher)
- npm or yarn
### Installation
```bash
# Clone the repository
git clone <repository-url>
cd WebOcean
# Install dependencies
npm install
```
### Development
```bash
# Start development server with hot reload
npm run dev
```
Open your browser at `http://localhost:3000`
### Build for Production
```bash
# Build optimized production bundle
npm run build
# Preview production build
npm run preview
```
The built files will be in the `dist/` directory.
## 🛠️ Technical Details
### Architecture
- **WebGL 2.0** - Hardware-accelerated 3D graphics
- **TypeScript** - Type-safe development
- **Vite** - Fast build tool and dev server
- **gl-matrix** - High-performance matrix and vector operations
### Rendering Pipeline
1. **First Pass**: Generate Perlin noise texture for displacement
2. **Second Pass**: Render ocean grid with:
- Vertex displacement using noise texture
- Dynamic normal calculation
- Advanced lighting (Fresnel + subsurface scattering)
- Specular highlights
### Project Structure
```
WebOcean/
├── src/
│ └── main.ts # Main application code
├── index.html # HTML entry point
├── vite.config.ts # Vite configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Project dependencies
```
## 📝 Configuration
Water and rendering parameters can be modified in `src/main.ts`:
- `GRID_SIZE` - Resolution of water mesh (default: 128)
- `NOISE_TEXTURE_WIDTH/HEIGHT` - Perlin noise resolution (default: 256x256)
- `FOV` - Field of view
- `OCEAN_COLOR` - Base water color
- `MOUSE_SENSITIVITY` - Camera rotation sensitivity
## 🔧 Development Notes
### Browser Compatibility
Requires a browser with WebGL 2.0 support:
- Chrome 56+
- Firefox 51+
- Edge 79+
- Safari 15+
### Performance
- Target: 60 FPS on modern hardware
- Grid complexity affects performance linearly
- Noise texture resolution affects memory usage
## 📄 License
ISC License - see LICENSE file for details
## 👤 Author
Julian Niessner
## 🙏 Acknowledgments
- Perlin noise implementation based on [WebGL Perlin Noise tutorial](https://medium.com/neosavvy-labs/webgl-with-perlin-noise-part-1-a87b56bbc9fb)
- Fresnel and lighting techniques from various WebGL resources
---
**Enjoy exploring the digital ocean! 🌊**

67
src/Camera.ts Normal file
View File

@@ -0,0 +1,67 @@
import { vec3, mat4, vec4 } from 'gl-matrix';
/** A camera that always looks at the world origin. Can have an offset and be rotated. */
export 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();
}
/** Recalculates the position according to xy-rotation and offset. */
private updatePos(): void {
const transformation: mat4 = mat4.create();
mat4.identity(transformation);
//2. xy-Rotation
mat4.rotateX(transformation, transformation, this.xRot);
mat4.rotateY(transformation, transformation, this.yRot);
//1. Translation
const translation = vec3.create();
vec3.set(translation, 0.0, 0.0, this.offset);
mat4.translate(transformation, transformation, translation);
const 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 {
const ret: mat4 = mat4.create();
mat4.lookAt(ret, this.pos, this.target, this.up);
return ret;
}
}

72
src/Grid.ts Normal file
View File

@@ -0,0 +1,72 @@
/** Grid for the water surface */
export class Grid {
private indices: number[] = [];
private vertices: number[] = [];
private vao: WebGLVertexArrayObject | null = null;
private size: number;
constructor(size: number = 128) {
this.size = size;
}
generate(): void {
this.indices = [];
this.vertices = [];
for (let j = 0; j <= this.size; ++j) {
for (let i = 0; i <= this.size; ++i) {
// Generate Vertices
const x = i / this.size;
const y = j / this.size;
const z = 0;
this.vertices.push(x, y, z);
if (i < this.size && j < this.size) { // Skip edges
const row1 = j * (this.size + 1);
const row2 = (j + 1) * (this.size + 1);
// triangle 1
this.indices.push(row1 + i);
this.indices.push(row1 + i + 1);
this.indices.push(row2 + i + 1);
// triangle 2
this.indices.push(row1 + i);
this.indices.push(row2 + i + 1);
this.indices.push(row2 + i);
}
}
}
}
initVAO(gl: WebGL2RenderingContext): void {
this.generate();
this.vao = gl.createVertexArray();
gl.bindVertexArray(this.vao);
const vboGrid: WebGLBuffer | null = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vboGrid);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.vertices), gl.STATIC_DRAW);
const iboGrid: WebGLBuffer | null = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iboGrid);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(this.indices), gl.STATIC_DRAW);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
gl.enableVertexAttribArray(0);
gl.bindVertexArray(null);
}
draw(gl: WebGL2RenderingContext): void {
if (this.vao) {
gl.bindVertexArray(this.vao);
gl.drawElements(gl.TRIANGLES, this.indices.length, gl.UNSIGNED_INT, 0);
gl.bindVertexArray(null);
}
}
getIndexCount(): number {
return this.indices.length;
}
}

65
src/Shader.ts Normal file
View File

@@ -0,0 +1,65 @@
/** Get shader source by HTML-Element<id> */
export function getShader(gl: WebGL2RenderingContext, id: string): WebGLShader | null {
const script: any = document.getElementById(id);
if (!script) {
console.error(`Couldn't get shader source from HTML for id: ${id}`);
return null;
}
let 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.error(`Script type is wrong for id: ${id}`);
return null;
}
if (shader == null) {
console.error("Cannot create Shaders!");
return null;
}
gl.shaderSource(shader, script.text);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error(`Shader compilation failed for ${id}:`, gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
export function createProgram(
gl: WebGL2RenderingContext,
vertexShaderId: string,
fragmentShaderId: string,
programName: string
): WebGLProgram | null {
const vertexShader = getShader(gl, vertexShaderId);
const fragmentShader = getShader(gl, fragmentShaderId);
if (vertexShader == null || fragmentShader == null) {
console.error(`Didn't find ${programName} shader sources!`);
return null;
}
const program = gl.createProgram();
if (program == null) {
console.error(`${programName} program not created!`);
return null;
}
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error(`Could not initialize ${programName} shaders:`, gl.getProgramInfoLog(program));
return null;
}
return program;
}

24
src/constants.ts Normal file
View File

@@ -0,0 +1,24 @@
// Configuration Constants
export const GRID_SIZE = 128;
export const NOISE_TEXTURE_WIDTH = 256;
export const NOISE_TEXTURE_HEIGHT = 256;
export const CANVAS_WIDTH = 800;
export const CANVAS_HEIGHT = 600;
export const FOV = 1.0;
export const NEAR_PLANE = 0.1;
export const FAR_PLANE = 1000.0;
export const CAMERA_DEFAULT_OFFSET = 1.2;
export const CAMERA_DEFAULT_ROT_X = 1.1;
export const CAMERA_DEFAULT_ROT_Y = 0;
export const MOUSE_SENSITIVITY = 0.001;
export const KEYBOARD_ROTATION_SPEED = 0.02;
export const KEYBOARD_ZOOM_SPEED = 0.05;
export const FPS_UPDATE_INTERVAL = 1000;
// Ocean shader constants
export const OCEAN_COLOR_R = 0.0;
export const OCEAN_COLOR_G = 0.4;
export const OCEAN_COLOR_B = 0.4;
export const SKY_COLOR_R = 1.0;
export const SKY_COLOR_G = 1.0;
export const SKY_COLOR_B = 1.0;

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.

75
tsconfig.json
View File

@@ -1,63 +1,18 @@
{
"compilerOptions": {
/* Basic Options */
// "incremental": true, /* Enable incremental compilation */
"target": "es6", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
// "lib": [], /* Specify library files to be included in the compilation. */
// "allowJs": true, /* Allow javascript files to be compiled. */
// "checkJs": true, /* Report errors in .js files. */
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
// "declaration": true, /* Generates corresponding '.d.ts' file. */
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
"sourceMap": true, /* Generates corresponding '.map' file. */
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./build/", /* Redirect output structure to the directory. */
// "rootDir": "./src/", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
// "composite": true, /* Enable project compilation */
// "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
// "removeComments": true, /* Do not emit comments to output. */
// "noEmit": true, /* Do not emit outputs. */
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
/* Strict Type-Checking Options */
"strict": true, /* Enable all strict type-checking options. */
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* Enable strict null checks. */
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
/* Additional Checks */
// "noUnusedLocals": true, /* Report errors on unused locals. */
// "noUnusedParameters": true, /* Report errors on unused parameters. */
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
/* Module Resolution Options */
// "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
// "typeRoots": [], /* List of folders to include type definitions from. */
// "types": [], /* Type declaration files to be included in compilation. */
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
/* Source Map Options */
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
/* Experimental Options */
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
/* Advanced Options */
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
"target": "ES2020",
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"sourceMap": true,
"outDir": "./build/",
"strict": true,
"moduleResolution": "bundler",
"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"skipLibCheck": true
},
"files": [
"src/main.ts"
]
}
"include": ["src/**/*"],
"exclude": ["node_modules", "dist", "build"]
}

15
vite.config.ts Normal file
View File

@@ -0,0 +1,15 @@
import { defineConfig } from 'vite';
export default defineConfig({
base: './',
build: {
outDir: 'dist',
sourcemap: true,
minify: 'esbuild',
target: 'es2020',
},
server: {
port: 3000,
open: true,
},
});