Webgl gl.viewport 更改 [英] Webgl gl.viewport change

问题描述

我在调整画布大小和 gl.viewport 同步时遇到问题.
假设我从画布 300x300 canvas 和初始化开始gl.viewport 的大小相同 (gl.vieport(0, 0, 300, 300)).
之后，在浏览器的控制台中，我进行了测试:

I have a problem with canvas resizing and gl.viewport sync.
Let's say that I start with both the canvas 300x300 canvas, and the initialization of gl.viewport at the same sizes (gl.vieport(0, 0, 300, 300)).
After that, in browser's console I make my tests:

1. 我正在更改画布的大小，使用 jquery，调用类似 $("#scene").width(200).height(200)

1. I'm changing size of my canvas, using jquery, calling something like $("#scene").width(200).height(200)

此后，我将调用 resizeWindow功能:

function resizeWindow(width, height){
    var ww = width === undefined? w.gl.viewportWidth : width;
    var h = height  === undefined? w.gl.viewportHeight : height;
    h = h <= 0? 1 : h;
    w.gl.viewport(0, 0, ww, h);
    mat4.identity(projectionMatrix);
    mat4.perspective(45, ww / h, 1, 1000.0, projectionMatrix);
    mat4.identity(modelViewMatrix);
}

• 使视口与所需尺寸同步的函数.

不幸的是，在此调用之后，我的 gl.viewport 只占用了画布的一部分.
谁能告诉我出了什么问题?

Unfortunatly, my gl.viewport after this call takes only a part of my canvas.
Could anyone tell me what is going wrong?

推荐答案

没有这样的东西 gl.viewportWidth 或 gl.viewportHeight

There is no such thing is gl.viewportWidth or gl.viewportHeight

如果您想设置透视矩阵，您应该使用 canvas.clientWidth 和 canvas.clientHeight 作为透视的输入.无论浏览器缩放画布的大小如何，这些都会为您提供正确的结果.就像你用 css 设置画布自动缩放

If you want to set your perspective matrix you should use canvas.clientWidth and canvas.clientHeight as your inputs to perspective. Those will give you the correct results regardless of what size the browser scales the canvas. As in if you set the canvas auto scale with css

<canvas style="width: 100%; height:100%;"></canvas>

...

var width = canvas.clientHeight;
var height = Math.max(1, canvas.clientHeight);  // prevent divide by 0
mat4.perspective(45, width / height, 1, 1000, projectionMatrix);

至于视口.使用 gl.drawingBufferWidth 和 gl.drawingBufferHeight.这是找到drawingBuffer大小的正确方法

As for the viewport. Use gl.drawingBufferWidth and gl.drawingBufferHeight. That's the correct way to find the size of your drawingBuffer

gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

需要说明的是，这里有几件事混为一谈

Just to be clear there are several things conflated here

• canvas.width, canvas.height = 您要求画布的绘图缓冲区的大小
• gl.drawingBufferWidth, gl.drawingBufferHeight = 你实际得到的尺寸.在 99.99% 的情况下，这将与 canvas.width、canvas.height 相同.
• canvas.clientWidth, canvas.clientHeight = 浏览器显示画布的大小.
• canvas.width, canvas.height = size you requested the canvas's drawingBuffer to be
• gl.drawingBufferWidth, gl.drawingBufferHeight = size you actually got. In 99.99% of cases this will be the same as canvas.width, canvas.height.
• canvas.clientWidth, canvas.clientHeight = size the browser is displaying your canvas.

看区别

<canvas width="10" height="20" style="width: 30px; height: 40px"></canvas>

或

canvas.width = 10;
canvas.height = 20;
canvas.style.width = "30px";
canvas.style.height = "40px";

在这些情况下，canvas.width 将是 10，canvas.height 将是 20，canvas.clientWidth 将是 30，canvas.clientHeight 将是 40. 通常将 canvas.style.width 和 canvas.style.height 设置为百分比，以便浏览器对其进行缩放以适应它所包含的任何元素.

In these cases canvas.width will be 10, canvas.height will be 20, canvas.clientWidth will be 30, canvas.clientHeight will be 40. It's common to set canvas.style.width and canvas.style.height to a percentage so that the browser scales it to fit whatever element it is contained in.

最重要的是你提出了两件事

On top of that there are the 2 things you brought up

• viewport = 通常你希望这是你的drawingBuffer 的大小
• 纵横比 = 通常您希望这是画布缩放到的大小

鉴于这些定义，viewport 使用的宽度和高度通常与 纵横比 使用的宽度和高度不同.

Given those definitions the width and height used for viewport is often not the same as the width and height used for aspect ratio.

这篇关于Webgl gl.viewport 更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！