WebGL canvas 大小更改不会随着视口更改而更新

Question

我有以下代码用于调整 canvas 的大小并保持纵横比相同。 它工作正常，但仅在初始 WebGL 加载时。 我可以在控制台中看到，每次 window 使用window.addEventListener('resize', resizeCanvas); ，但实际的 GL canvas 保持不变，直到再次刷新页面。

function resizeCanvas(canvas) {
            const displayWidth  = window.innerWidth;
            const displayHeight = window.innerHeight;
         
            // Check if the canvas is not the same size.
            const needResize = gl.canvas.width  !== displayWidth ||
                             canvas.height !== displayHeight;
            
            canvasAspect = displayWidth / displayHeight;
            imageAspect = 3 / 4;
            imageMaxWidth = 900;
            imageMaxHeight = 1200;

            if (needResize) {
                if (displayWidth <= imageMaxWidth) {
                    canvas.width = displayWidth;
                    canvas.height = Math.round(displayHeight * canvasAspect / imageAspect);
                } if (displayWidth > imageMaxWidth) {
                    canvas.width = imageMaxWidth;
                    canvas.height = imageMaxHeight;
                } if (displayHeight <= imageMaxHeight) {
                    canvas.width = Math.round(displayWidth * imageAspect / canvasAspect);;
                    canvas.height = displayHeight;
                }
            }       
            
            gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
            gl.clear(gl.COLOR_BUFFER_BIT);

            return needResize;
        }

        window.addEventListener('resize', resizeCanvas);

这是图像和 function 加载的地方。

const loadImage = (d,i) => {
                gl.uniform1i(gl.getUniformLocation(p,`t${i+1}`), i);
                
                const srcType = gl.UNSIGNED_BYTE;
                const img = new Image();
                img.onload = function(){
                        const [textureWidth, textureHeight] = [img.naturalWidth, img.naturalHeight];
                        gl.uniform2f(gl[`t${(i+1)}res`], textureWidth, textureHeight); 
                        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
                        gl.activeTexture(i=== 0 ? gl.TEXTURE0 : gl.TEXTURE1);
                        gl.bindTexture(gl.TEXTURE_2D, gl.createTexture());
                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
                        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
                        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, srcType, this);
                        if(i === images.length - 1){
                            gl_update(gl);                  
                        }
                }
                img.src = d;
        }

        const tmp = start_gl("canvas1", getStringFromDOMElement('vs'), getStringFromDOMElement('fs'));
        const gl = tmp.gl;
        const p = tmp.program;

        const images = ["001.jpg","002.jpg"];

        images.map(loadImage);

        resizeCanvas(gl.canvas);
        gl_update(gl);

Answer 1

更改 canvas 的高度和宽度与显示 webgl 上下文的分辨率有关。您要做的是更改 webgl 视口的大小以反映 innerWidth/innerHeight 的大小。

gl.viewport(0,0,canvas.width,canvas.height);

将在 canvas 内设置 webgl 视口以反映适当的大小，这样当您将导航器调整到原来的一半时，您不会看到一半的观察圈消失。