kaj/WebGPU-FFT-Ocean-Demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Virtual Machine Activity

first commit

Browse Source
This commit is contained in:
kaj dijkstra
2025-12-31 14:22:45 +01:00
commit c78a860098
73 changed files with 30137 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
index.html Normal file
View File

@@ -0,0 +1,134 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGPU FFT Ocean Demo</title>
<style>
body {
margin: 0;
background: radial-gradient(circle at 20% 20%, #0f172a, #020617 60%);
color: #e2e8f0;
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
height: 100vh;
width: 100vw;
overflow: hidden;
}
#container {
position: fixed;
inset: 0;
border: none;
box-shadow: none;
overflow: hidden;
}
#status {
position: absolute;
left: 12px;
bottom: 12px;
padding: 6px 10px;
background: rgba(15, 23, 42, 0.65);
border: 1px solid #1f2937;
border-radius: 6px;
font-size: 12px;
letter-spacing: 0.4px;
backdrop-filter: blur(4px);
}
canvas {
width: 100vw;
height: 100vh;
display: block;
}
#controls {
position: absolute;
right: 12px;
top: 12px;
padding: 6px 10px;
background: rgba(15, 23, 42, 0.75);
border: 1px solid #1f2937;
border-radius: 6px;
font-size: 12px;
display: flex;
align-items: flex-start;
gap: 10px;
backdrop-filter: blur(4px);
}
#controls label {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
#controls input[type="range"] {
width: 140px;
}
#controls .column {
display: flex;
flex-direction: column;
gap: 6px;
}
#controls .row {
display: flex;
align-items: center;
gap: 6px;
}
#controls select {
font-size: 12px;
padding: 2px 4px;
background: #020617;
color: #e2e8f0;
border-radius: 4px;
border: 1px solid #1f2937;
}
</style>
</head>
<body>
<div id="container">
<canvas id="gfx"></canvas>
<div id="controls">
<div class="column">
<label class="row">
Wave height
<input id="waveHeight" type="range" min="0" max="60" step="1" value="33">
<span id="waveHeightValue">33</span>
</label>
<label class="row">
Wave length
<input id="wavelengthSlider" type="range" min="0.25" max="4" step="0.05" value="1">
<span id="wavelengthValue">1.00</span>
</label>
<label class="row">
Resolution
<input id="resolutionSlider" type="range" min="32" max="2048" step="32" value="1024">
<span id="resolutionValue">1024</span>
</label>
<label class="row">
<input id="wireframeToggle" type="checkbox">
Wireframe mode
</label>
<label class="row">
<input id="pauseToggle" type="checkbox">
Pause waves
</label>
<label class="row">
<button id="stepButton" type="button">Next frame</button>
</label>
<label class="row">
Shading
<select id="shadingMode">
<option value="realistic">Realistic</option>
<option value="lighting">Lighting</option>
<option value="normals">Normals</option>
<option value="solid">Solid color</option>
<option value="height">Height (debug)</option>
</select>
</label>
<label class="row">
<button id="dumpHeightButton" type="button">Dump height (debug)</button>
</label>
</div>
</div>
<div id="status">Initializing WebGPU ocean…</div>
</div>
<script type="module" src="./main.js"></script>
</body>
</html>