Fatal编程技术网
  • webgl/
  • 使用画布调整大小重置WebGL视口

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

webgl

使用画布调整大小重置WebGL视口,webgl,viewport,Webgl,Viewport,在我的WebGL程序中，我根据某个事件更改画布的高度和宽度，并尝试在每次事件发生时使用gl.viewport（0,0，canvas.width，canvas.height）命令更新视口 但我的视口没有更新（或者看起来像），我绘制的对象脱离了场景。我尝试添加一些偏移以放大/缩小我的振动端口，但即使视口增大，它也会在侧面放置一个黑屏，对象也会在屏幕后面 任何人都可以建议我如何根据画布高度和宽度的变化来更改视口，并显示所有对象吗？我没有使用任何图书馆。我在这里查看了一些关于这个问题的其他帖子，但仍然无

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

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

任何人都可以建议我如何根据画布高度和宽度的变化来更改视口，并显示所有对象吗？我没有使用任何图书馆。我在这里查看了一些关于这个问题的其他帖子，但仍然无法找到解决方案

谢谢，
Adnan

您应该通过更改
canvas.style.width
和
canvas.style.height
中的样式大小来更改WebGL画布大小，等待CSS再次布局画布，然后更改
canvas.width
和
canvas.height
中的画布内容大小。最后，您应该重置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>


调整WebGL的大小


var canvas=document.getElementById（'chart'）；
var-gl=null；
函数resetGL（）{
var devicePixelRatio=window.devicePixelRatio | | 1；
var w=数学地板（canvas.clientWidth*devicePixelRatio）；
var h=数学地板（canvas.clientHeight*devicePixelRatio）；
if（canvas.width！=w | | canvas.height！=h）{
console.log（“resetGL:Setting canvas.width=“+w+”canvas.height=“+h”）；
画布宽度=w；
canvas.height=h；
}
如果（！gl | | gl.isContextLost（））{
gl=canvas.getContext（“webgl”）| canvas.getContext（“实验性webgl”）；
log（“分配的WebGL上下文：“+gl”）；
}
}
函数重画（）{
requestAnimationFrame（函数（）{
resetGL（）；
总图视口（0，0，总图drawingBufferWidth，总图drawingBufferHeight）；
gl.clearColor（1,0.8,1,1）；
gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT）；
//把你的东西画在这里
});
}
var bToggle=假；
函数resize（）{
bToggle=！bToggle；
var s=b注释？'50px'：'100px'；
控制台日志（“”）；
console.log（“按钮：设置canvas.style.width=“+s+”canvas.style.height=“+s”）；
canvas.style.width=s；
canvas.style.height=s；
重画（）；
}
var button=document.getElementById（'resizeButton'）；
按钮。addEventListener（“单击”，调整大小）；
重画（）；
PS：在iOS中，您可能需要强制devicePixelRatio为1，以避免iOS Safari中出现明显的错误。有关详细信息，请参见。

您是否也在更新投影矩阵？您好，我没有使用投影矩阵。有必要吗？但是，每当对象位置发生更改时，我也会通过调用它来更新视口。