kaj/waves
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Virtual Machine Activity
Files
master
waves/waves2.html
kaj dijkstra e83037f791 waves
2025-12-25 10:08:20 +01:00

540 lines
22 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL Wave Simulation (Optimized CPU Calculation)</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #1a202c; /* dark gray */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
overflow: hidden;
color: white;
flex-direction: column;
}
.container {
padding: 1.5rem;
background-color: #2d3748; /* dark blue-gray */
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
margin: 1rem;
max-width: 800px;
width: 100%;
text-align: center;
}
#webgl-canvas {
background-color: #1a202c;
border-radius: 8px;
width: 100%;
height: 600px;
cursor: grab;
touch-action: none; /* Disable touch gestures on the canvas */
}
#webgl-canvas:active {
cursor: grabbing;
}
.controls {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
margin-top: 1.5rem;
}
.wave-controls {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
padding: 0.75rem;
background-color: #4a5568;
border-radius: 8px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.control-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
min-width: 150px;
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
background: #cbd5e0;
outline: none;
border-radius: 4px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #4299e1;
cursor: pointer;
border-radius: 50%;
border: 2px solid #fff;
}
input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
background: #4299e1;
cursor: pointer;
border-radius: 50%;
border: 2px solid #fff;
}
.toggle-button {
padding: 0.75rem 1.5rem;
background-color: #4299e1;
color: white;
font-weight: 600;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.toggle-button:hover {
background-color: #2b6cb0;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-2xl font-bold mb-4 text-white">WebGL Wave Simulation (Optimized CPU Calculation)</h1>
<canvas id="webgl-canvas"></canvas>
<div class="controls">
<button id="toggle-render-mode" class="toggle-button">Toggle Solid</button>
<div class="wave-controls">
<div class="control-group">
<label for="amplitude-slider" class="text-gray-300 text-sm">Amplitude</label>
<input type="range" id="amplitude-slider" min="0.1" max="1" step="0.01" value="0.5">
</div>
<div class="control-group">
<label for="speed-slider" class="text-gray-300 text-sm">Animation Speed</label>
<input type="range" id="speed-slider" min="0.001" max="2" step="0.001" value="0.5">
</div>
</div>
<p class="text-sm mt-2 text-gray-400">
Click and drag to orbit the camera, and use the mouse scroll to zoom in and out.
</p>
</div>
</div>
<script>
// Use a self-executing function to avoid polluting the global scope.
(function() {
// Get the canvas and WebGL context.
const canvas = document.getElementById('webgl-canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.error("Unable to initialize WebGL. Your browser may not support it.");
const errorMessage = document.createElement('p');
errorMessage.textContent = 'Error: WebGL is not supported in this browser.';
document.body.querySelector('.container').appendChild(errorMessage);
return;
}
// --- Shaders ---
// The vertex shader is now very simple and efficient.
const vsSource = `
precision highp float;
attribute vec3 a_position;
attribute vec3 a_normal;
uniform mat4 u_modelViewMatrix;
uniform mat4 u_projectionMatrix;
uniform float u_time;
uniform float u_amplitude;
varying vec3 v_color;
varying vec3 v_normal;
const float G = 9.81; // Gravity
#define NUM_WAVES 16
void main() {
// This is a simplified wave summation that approximates the IFFT result.
// It is not a true FFT but provides a good visual effect.
float waveHeight = 0.0;
for (int i = 0; i < NUM_WAVES; i++) {
float f_i = float(i);
// Create a unique wave vector for each loop iteration.
// We use f_i + 1.0 to prevent k_len from being 0 on the first iteration.
vec2 k = vec2(cos(f_i), sin(f_i)) * (f_i + 1.0);
float k_len = length(k);
float omega = sqrt(G * k_len);
float phase = dot(k, a_position.xz) - omega * u_time;
waveHeight += sin(phase) * u_amplitude / k_len;
}
vec3 newPosition = vec3(a_position.x, a_position.y + waveHeight, a_position.z);
gl_Position = u_projectionMatrix * u_modelViewMatrix * vec4(newPosition, 1.0);
// Pass data to fragment shader.
v_color = vec3(0.1, 0.4, 0.8);
v_normal = a_normal;
}
`;
// The fragment shader remains simple for now.
const fsSource = `
precision mediump float;
varying vec3 v_color;
varying vec3 v_normal;
uniform mat4 u_modelViewMatrix;
void main() {
// Simple diffuse lighting
vec3 lightDirection = normalize(vec3(0.5, 1.0, 0.5));
vec3 normal = normalize(v_normal);
float light = dot(normal, lightDirection);
// Combine color and light
vec3 finalColor = v_color * (light * 0.5 + 0.5);
gl_FragColor = vec4(finalColor, 1.0);
}
`;
// --- Shader and Program Initialization Functions ---
function compileShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
function initShaderProgram(gl, vsSource, fsSource) {
const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fsSource);
if (!vertexShader || !fragmentShader) {
return null;
}
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
return null;
}
return shaderProgram;
}
const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
if (!shaderProgram) {
return;
}
gl.useProgram(shaderProgram);
const programInfo = {
attribs: {
position: gl.getAttribLocation(shaderProgram, 'a_position'),
normal: gl.getAttribLocation(shaderProgram, 'a_normal'),
},
uniforms: {
projectionMatrix: gl.getUniformLocation(shaderProgram, 'u_projectionMatrix'),
modelViewMatrix: gl.getUniformLocation(shaderProgram, 'u_modelViewMatrix'),
time: gl.getUniformLocation(shaderProgram, 'u_time'),
amplitude: gl.getUniformLocation(shaderProgram, 'u_amplitude'),
},
};
// --- UI Controls ---
let amplitude = 0.5;
let speedFactor = 0.5;
const amplitudeSlider = document.getElementById('amplitude-slider');
amplitudeSlider.addEventListener('input', (e) => {
amplitude = parseFloat(e.target.value);
});
const speedSlider = document.getElementById('speed-slider');
speedSlider.addEventListener('input', (e) => {
speedFactor = parseFloat(e.target.value);
});
// --- Geometry ---
const N = 128;
const vertexData = [];
const normalData = [];
const indicesTriangles = [];
const indicesLines = [];
const PLANE_SCALE = 2.0;
// Generate vertices, normals, and indices
for (let i = 0; i < N; i++) {
for (let j = 0; j < N; j++) {
const x = ((j / (N - 1)) * 2 - 1) * PLANE_SCALE;
const z = ((i / (N - 1)) * 2 - 1) * PLANE_SCALE;
const y = 0;
vertexData.push(x, y, z);
normalData.push(0, 1, 0);
// Generate indices for triangles (solid)
if (i < N - 1 && j < N - 1) {
const i1 = i * N + j;
const i2 = i * N + j + 1;
const i3 = (i + 1) * N + j;
const i4 = (i + 1) * N + j + 1;
indicesTriangles.push(i1, i2, i3);
indicesTriangles.push(i2, i4, i3);
}
// Generate indices for lines (wireframe)
if (j < N - 1) indicesLines.push(i * N + j, i * N + j + 1);
if (i < N - 1) indicesLines.push(i * N + j, (i + 1) * N + j);
}
}
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
const normalBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normalData), gl.STATIC_DRAW);
const indexBufferTriangles = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBufferTriangles);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indicesTriangles), gl.STATIC_DRAW);
const indexBufferLines = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBufferLines);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indicesLines), gl.STATIC_DRAW);
// Configure vertex attributes
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(programInfo.attribs.position, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(programInfo.attribs.position);
gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
gl.vertexAttribPointer(programInfo.attribs.normal, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(programInfo.attribs.normal);
// --- Camera & Matrix Functions ---
let isDragging = false;
let prevMouseX = 0;
let prevMouseY = 0;
let cameraRadius = 6.0;
let alpha = Math.PI / 4;
let beta = Math.PI / 4;
let renderMode = gl.LINES; // Starts with wireframe
const toggleButton = document.getElementById('toggle-render-mode');
toggleButton.textContent = 'Toggle Solid';
// Event listeners for camera controls
canvas.addEventListener('mousedown', (e) => {
isDragging = true;
prevMouseX = e.clientX;
prevMouseY = e.clientY;
});
canvas.addEventListener('touchstart', (e) => {
isDragging = true;
const touch = e.touches[0];
prevMouseX = touch.clientX;
prevMouseY = touch.clientY;
});
canvas.addEventListener('mouseup', () => { isDragging = false; });
canvas.addEventListener('touchend', () => { isDragging = false; });
canvas.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const deltaX = e.clientX - prevMouseX;
const deltaY = e.clientY - prevMouseY;
alpha += deltaX * 0.005;
beta += deltaY * 0.005;
beta = Math.max(-Math.PI / 2 + 0.1, Math.min(Math.PI / 2 - 0.1, beta));
prevMouseX = e.clientX;
prevMouseY = e.clientY;
});
canvas.addEventListener('touchmove', (e) => {
if (!isDragging) return;
const touch = e.touches[0];
const deltaX = touch.clientX - prevMouseX;
const deltaY = touch.clientY - prevMouseY;
alpha += deltaX * 0.005;
beta += deltaY * 0.005;
beta = Math.max(-Math.PI / 2 + 0.1, Math.min(Math.PI / 2 - 0.1, beta));
prevMouseX = touch.clientX;
prevMouseY = touch.clientY;
});
canvas.addEventListener('wheel', (e) => {
e.preventDefault();
const zoomSpeed = 0.1;
cameraRadius += e.deltaY > 0 ? zoomSpeed : -zoomSpeed;
cameraRadius = Math.max(1.0, Math.min(20.0, cameraRadius));
});
// Toggle button functionality
toggleButton.addEventListener('click', () => {
if (renderMode === gl.TRIANGLES) {
renderMode = gl.LINES;
toggleButton.textContent = 'Toggle Solid';
} else {
renderMode = gl.TRIANGLES;
toggleButton.textContent = 'Toggle Wireframe';
}
});
const fieldOfView = 45 * Math.PI / 180;
let aspect = canvas.clientWidth / canvas.clientHeight;
const zNear = 0.1;
const zFar = 100.0;
const projectionMatrix = new Float32Array(16);
const modelViewMatrix = new Float32Array(16);
// Matrix utility functions
function identity(out) {
out[0] = 1; out[1] = 0; out[2] = 0; out[3] = 0;
out[4] = 0; out[5] = 1; out[6] = 0; out[7] = 0;
out[8] = 0; out[9] = 0; out[10] = 1; out[11] = 0;
out[12] = 0; out[13] = 0; out[14] = 0; out[15] = 1;
return out;
}
function perspective(out, fovy, aspect, near, far) {
const f = 1.0 / Math.tan(fovy / 2);
out[0] = f / aspect; out[1] = 0; out[2] = 0; out[3] = 0;
out[4] = 0; out[5] = f; out[6] = 0; out[7] = 0;
out[8] = 0; out[9] = 0; out[10] = (near + far) / (near - far); out[11] = -1;
out[12] = 0; out[13] = 0; out[14] = (2 * far * near) / (near - far); out[15] = 0;
return out;
}
function lookAt(out, eye, center, up) {
let eyex = eye[0], eyey = eye[1], eyez = eye[2];
let upx = up[0], upy = up[1], upz = up[2];
let centerx = center[0], centery = center[1], centerz = center[2];
if (Math.abs(eyex - centerx) < 0.0001 && Math.abs(eyey - centery) < 0.0001 && Math.abs(eyez - centerz) < 0.0001) {
return identity(out);
}
let z0, z1, z2, x0, x1, x2, y0, y1, y2, len;
// Z-axis: from eye to center, then normalized
z0 = eyex - centerx; z1 = eyey - centery; z2 = eyez - centerz;
len = 1 / Math.sqrt(z0 * z0 + z1 * z1 + z2 * z2);
z0 *= len; z1 *= len; z2 *= len;
// X-axis: cross product of up and z, then normalized
x0 = upy * z2 - upz * z1; x1 = upz * z0 - upx * z2; x2 = upx * z1 - upy * z0;
len = Math.sqrt(x0 * x0 + x1 * x1 + x2 * x2);
if (len === 0) {
x0 = 0; x1 = 0; x2 = 0;
} else {
len = 1 / len;
x0 *= len; x1 *= len; x2 *= len;
}
// Y-axis: cross product of z and x, then normalized
y0 = z1 * x2 - z2 * x1; y1 = z2 * x0 - z0 * x2; y2 = z0 * x1 - z1 * x0;
len = Math.sqrt(y0 * y0 + y1 * y1 + y2 * y2);
if (len === 0) {
y0 = 0; y1 = 0; y2 = 0;
} else {
len = 1 / len;
y0 *= len; y1 *= len; y2 *= len;
}
// Populate the matrix in COLUMN-MAJOR order, which WebGL expects by default.
// Column 1
out[0] = x0; out[1] = y0; out[2] = z0; out[3] = 0;
// Column 2
out[4] = x1; out[5] = y1; out[6] = z1; out[7] = 0;
// Column 3
out[8] = x2; out[9] = y2; out[10] = z2; out[11] = 0;
// Column 4 (translation)
out[12] = -(x0 * eyex + x1 * eyey + x2 * eyez);
out[13] = -(y0 * eyex + y1 * eyey + y2 * eyez);
out[14] = -(z0 * eyex + z1 * eyey + z2 * eyez);
out[15] = 1;
return out;
}
// --- Animation Loop ---
let then = 0;
function render(now) {
now *= 0.001 * speedFactor; // Apply speed factor here
const deltaTime = now - then;
then = now;
const displayWidth = canvas.clientWidth;
const displayHeight = canvas.clientHeight;
if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
canvas.width = displayWidth;
canvas.height = displayHeight;
gl.viewport(0, 0, canvas.width, canvas.height);
aspect = canvas.clientWidth / canvas.clientHeight;
perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
}
gl.clearColor(0.1, 0.1, 0.1, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.useProgram(shaderProgram);
// Send the new uniform values to the shader
gl.uniform1f(programInfo.uniforms.time, now);
gl.uniform1f(programInfo.uniforms.amplitude, amplitude);
// Calculate camera position and matrices
const eye = [
cameraRadius * Math.sin(beta) * Math.sin(alpha),
cameraRadius * Math.cos(beta),
cameraRadius * Math.sin(beta) * Math.cos(alpha)
];
const center = [0, 0, 0];
const up = [0, 1, 0];
lookAt(modelViewMatrix, eye, center, up);
gl.uniformMatrix4fv(programInfo.uniforms.projectionMatrix, false, projectionMatrix);
gl.uniformMatrix4fv(programInfo.uniforms.modelViewMatrix, false, modelViewMatrix);
// Draw the ocean based on the selected render mode
if (renderMode === gl.TRIANGLES) {
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBufferTriangles);
gl.drawElements(gl.TRIANGLES, indicesTriangles.length, gl.UNSIGNED_SHORT, 0);
} else {
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBufferLines);
gl.drawElements(gl.LINES, indicesLines.length, gl.UNSIGNED_SHORT, 0);
}
requestAnimationFrame(render);
}
window.onload = function() {
requestAnimationFrame(render);
};
})();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink