Compare commits

...

2 commits

Author SHA1 Message Date
efdedb23b8 add fps limit of 30 2026-01-31 14:08:08 +10:00
7faeca627b fix title "WebGL Demo" 2026-01-31 13:48:15 +10:00
2 changed files with 12 additions and 4 deletions

View file

@ -3,7 +3,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>WebGL Demo</title> <title>have you tried crying more?</title>
<!-- <script --> <!-- <script -->
<!-- src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js" --> <!-- src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js" -->
<!-- integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ==" --> <!-- integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ==" -->

View file

@ -70,21 +70,29 @@ function renderShader(gl, vsSource, fsSource) {
// Draw the scene // Draw the scene
// drawScene(gl, programInfo, buffers, 0); // drawScene(gl, programInfo, buffers, 0);
const fpsLimit = 30;
const fpsDelta = 1000 / 30;
// let timePrev = 0; // let timePrev = 0;
// requestAnimationFrame asks the browser to call render, // requestAnimationFrame asks the browser to call render,
// providing the time in milliseconds since the page loaded // providing the time in milliseconds since the page loaded
function render(time) { function render(time) {
time *= 0.001; // convert to seconds time *= 0.001; // convert to seconds
// deltaTime = time - prevTime; // delta = time - timePrev;
// prevTime = time;
drawScene(gl, programInfo, buffers, time); drawScene(gl, programInfo, buffers, time);
setTimeout(() => requestAnimationFrame(render), fpsDelta);
}
function update() {
requestAnimationFrame(render); requestAnimationFrame(render);
} }
requestAnimationFrame(render);
// XXX: TODO: read this guide it's great! https://stackoverflow.com/questions/56998225/why-is-rendering-blurred-in-webgl // XXX: TODO: read this guide it's great! https://stackoverflow.com/questions/56998225/why-is-rendering-blurred-in-webgl
// window.addEventListener('resize', render); // window.addEventListener('resize', render);
requestAnimationFrame(render);
// update();
// setInterval(update, 1000 / fpsLimit);
} }
function fetchShader(name) { function fetchShader(name) {