fsylvain/WhateverWebGPU
1
0
Fork 0
mirror of https://github.com/Floriansylvain/WhateverWebGPU.git synced 2026-08-19 11:43:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add compute interval slider for dynamic interval adjustment

Browse Source
This commit is contained in:
Florian Sylvain
2025-04-06 04:27:15 +02:00
parent 69f1e7cdd9
commit 9d1327e9c5
3 changed files with 36 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+15
View File
@@ -9,6 +9,21 @@
<body> <body>
<canvas id="canvas" width="1024" height="1024"></canvas> <canvas id="canvas" width="1024" height="1024"></canvas>
<p id="fps">FPS:</p> <p id="fps">FPS:</p>
<div>
<label for="compute-interval-slider"
>Compute Interval (ms):
<span id="compute-interval-value">100</span></label
>
<div>
<input
id="compute-interval-slider"
type="range"
min="1"
max="200"
value="100"
/>
</div>
</div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>
src/main.ts
+17 -1
View File
@@ -1,7 +1,21 @@
import "./style.css" import "./style.css"
const GRID_SIZE = 64 const GRID_SIZE = 64
const COMPUTE_MS_INTERVAL = 100 let COMPUTE_MS_INTERVAL = 100
function setupSliders() {
const computeIntervalSlider = document.getElementById(
"compute-interval-slider",
) as HTMLInputElement
const computeIntervalValue = document.getElementById(
"compute-interval-value",
) as HTMLElement
computeIntervalSlider.addEventListener("input", () => {
COMPUTE_MS_INTERVAL = parseInt(computeIntervalSlider.value)
computeIntervalValue.textContent = computeIntervalSlider.value
})
}
async function getCanvas(): Promise<HTMLCanvasElement> { async function getCanvas(): Promise<HTMLCanvasElement> {
const canvas = document.querySelector<HTMLCanvasElement>("#canvas") const canvas = document.querySelector<HTMLCanvasElement>("#canvas")
@@ -280,6 +294,8 @@ class Renderer {
} }
async function init() { async function init() {
setupSliders()
const device = await getDevice(await getAdapter()) const device = await getDevice(await getAdapter())
const context = configureContext(await getCanvas(), device) const context = configureContext(await getCanvas(), device)
const canvasFormat = navigator.gpu.getPreferredCanvasFormat() const canvasFormat = navigator.gpu.getPreferredCanvasFormat()
src/style.css
+4
View File
@@ -18,3 +18,7 @@ body {
canvas { canvas {
image-rendering: pixelated; image-rendering: pixelated;
} }
#compute-interval-slider {
width: 100%;
}