Spaces:
Running
Running
added deltaTime
Browse files- index.html +1 -1
- index.js +12 -4
index.html
CHANGED
|
@@ -4,7 +4,7 @@
|
|
| 4 |
<head>
|
| 5 |
<meta charset="utf-8">
|
| 6 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 7 |
-
<title>Plasma-Arc:
|
| 8 |
</head>
|
| 9 |
|
| 10 |
<body>
|
|
|
|
| 4 |
<head>
|
| 5 |
<meta charset="utf-8">
|
| 6 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 7 |
+
<title>Plasma-Arc: WebGPU Experiment</title>
|
| 8 |
</head>
|
| 9 |
|
| 10 |
<body>
|
index.js
CHANGED
|
@@ -75,11 +75,20 @@ async function main() {
|
|
| 75 |
state.width = width;
|
| 76 |
state.height = height;
|
| 77 |
|
| 78 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 79 |
}
|
| 80 |
|
| 81 |
-
function render(
|
| 82 |
-
time
|
| 83 |
const fov = 60 * Math.PI / 180;
|
| 84 |
const aspect = canvas.clientWidth / canvas.clientHeight;
|
| 85 |
const projectionMatrix = mat4.perspective(fov, aspect, config.render.zNear, config.render.zFar);
|
|
@@ -98,7 +107,6 @@ function render(time, mat4, context, state, RENDER_PASS_DESCRIPTOR) {
|
|
| 98 |
pass.drawIndexed(state.numGlyphs * 6);
|
| 99 |
pass.end();
|
| 100 |
state.device.queue.submit([encoder.finish()]);
|
| 101 |
-
requestAnimationFrame((t) => render(t, mat4, context, state, RENDER_PASS_DESCRIPTOR));
|
| 102 |
}
|
| 103 |
|
| 104 |
main();
|
|
|
|
| 75 |
state.width = width;
|
| 76 |
state.height = height;
|
| 77 |
|
| 78 |
+
let lastTime = performance.now();
|
| 79 |
+
function gameLoop(currentTime) {
|
| 80 |
+
const deltaTime = (currentTime - lastTime) * config.time.phase;
|
| 81 |
+
state.time += deltaTime;
|
| 82 |
+
render(mat4, context, state, RENDER_PASS_DESCRIPTOR);
|
| 83 |
+
lastTime = currentTime;
|
| 84 |
+
requestAnimationFrame(gameLoop);
|
| 85 |
+
}
|
| 86 |
+
|
| 87 |
+
requestAnimationFrame(gameLoop);
|
| 88 |
}
|
| 89 |
|
| 90 |
+
function render(mat4, context, state, RENDER_PASS_DESCRIPTOR) {
|
| 91 |
+
const time = state.time;
|
| 92 |
const fov = 60 * Math.PI / 180;
|
| 93 |
const aspect = canvas.clientWidth / canvas.clientHeight;
|
| 94 |
const projectionMatrix = mat4.perspective(fov, aspect, config.render.zNear, config.render.zFar);
|
|
|
|
| 107 |
pass.drawIndexed(state.numGlyphs * 6);
|
| 108 |
pass.end();
|
| 109 |
state.device.queue.submit([encoder.finish()]);
|
|
|
|
| 110 |
}
|
| 111 |
|
| 112 |
main();
|