cry/site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix set canvas display resolution

Browse source
This commit is contained in:
do butterflies cry? 2026-01-31 13:16:10 +10:00
parent 56328265c8
commit 149788c4cb
1 changed files with 7 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

11
www/js/webgl-demo.js
View file

@ -3,10 +3,6 @@ import { drawScene } from "./draw-scene.js";
main(); main();
/* XXX: TODO: Avoid using alerts! Check return values instead,
* XXX: TODO: or create/use a Result like object.
*/
// Initialize a shader program, so WebGL knows how to draw our data // Initialize a shader program, so WebGL knows how to draw our data
function initShaderProgram(gl, vsSource, fsSource) { function initShaderProgram(gl, vsSource, fsSource) {
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource); const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
@ -86,6 +82,9 @@ function renderShader(gl, vsSource, fsSource) {
requestAnimationFrame(render); 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
// window.addEventListener('resize', render);
} }
function fetchShader(name) { function fetchShader(name) {
@ -102,6 +101,10 @@ function main() {
// Initialize the GL context // Initialize the GL context
const gl = canvas.getContext("webgl"); const gl = canvas.getContext("webgl");
// XXX: TODO: use `window.addEventListener('resize', ...);`
canvas.setAttribute('width', window.innerWidth);
canvas.setAttribute('height', window.innerHeight);
// Only continue if WebGL is available and working // Only continue if WebGL is available and working
if (gl === null) { if (gl === null) {
throw new Error("Unable to initialize WebGL. Your browser or machine may not support it."); throw new Error("Unable to initialize WebGL. Your browser or machine may not support it.");