Question

在我的WebGL程序中，我根据某个事件更改画布的高度和宽度，并且每次事件发生时我都尝试使用gl.viewport（0,0，canvas.width，canvas.height）命令更新我的视口。

但是我的视口没有更新（或者看起来像），我的绘制对象也没有了。我尝试添加一些偏移来放大/缩小我的viweport，但即使视口增加，它也会在侧面放置一个黑色屏幕，并且对象会在屏幕后面。

根据画布的高度和宽度变化，可以根据画布的高度和宽度变化显示我应该怎样做以改变我的视口并显示所有对象？我没有使用任何库。我在这里检查了一些关于这个问题的其他帖子，但仍然无法找到解决方案。

谢谢，阿德南

Answer 1

您应该通过更改canvas.style.width和canvas.style.height中的样式大小来更改WebGL画布大小，等待CSS再次布局画布，然后更改画布< canvas.width和canvas.height中的strong>内容大小。最后，您应重置GL投影矩阵和视口以使用gl.drawingBufferWidth和gl.drawingBufferHeight。这样，您的应用程序可以处理CSS在布置调整大小的画布时所执行的操作，以及GL在分配绘图缓冲区以适应画布内容时所执行的操作。例如：

<html>
<head>
    <title>Resize WebGL</title>
    <meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>

<input type="button" id="resizeButton" value="resize"><br>
<canvas id="chart" style="width:100px; height:100px; border:1px solid #000;">
    <script>
        var canvas = document.getElementById('chart');
        var gl = null;

        function resetGL() {
            var devicePixelRatio = window.devicePixelRatio || 1;
            var w = Math.floor(canvas.clientWidth * devicePixelRatio);
            var h = Math.floor(canvas.clientHeight * devicePixelRatio);
            if (canvas.width != w || canvas.height != h) {
                console.log("resetGL: Setting canvas.width=" + w + " canvas.height=" + h);

                canvas.width = w;
                canvas.height = h;
            }
            if (!gl || gl.isContextLost()) {
                gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
                console.log("Allocated WebGL context: " + gl);
            }
        }

        function redraw() {
            requestAnimationFrame(function () {
                resetGL();
                gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
                gl.clearColor(1, 0.8, 1, 1);
                gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
                // Draw your stuff here
            });
        }

        var bToggle = false;
        function resize() {
            bToggle = !bToggle;
            var s = bToggle ? '50px' : '100px';
            console.log("");
            console.log("Button: Setting canvas.style.width=" + s + " canvas.style.height=" + s);
            canvas.style.width = s;
            canvas.style.height = s;
            redraw();
        }
        var button = document.getElementById('resizeButton');
        button.addEventListener("click", resize);
        redraw();
    </script>
</canvas>
</body>
</html>

PS：在iOS中，您可能需要强制将devicePixelRatio设置为1，以避免iOS Safari中出现明显的错误。有关详细信息，请参阅here。

使用画布调整大小重置WebGL视口

1 个答案: