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 視口以反映適當的大小，這樣當您將導航器調整到原來的一半時，您不會看到一半的觀察圈消失。