Webgl gl.изменение просмотра

у меня проблема с изменением размера холста и gl.viewport синхронизации.
Предположим, что я начинаю с обоих холстов 300x300 холст и инициализации gl.viewport в тех же размерах (gl.vieport(0, 0, 300, 300)).
После этого в консоли браузера я делаю свои тесты:

  1. я меняю размер моего холста, используя jquery, вызывая что-то вроде $("#scene").width(200).height(200)

  2. после этого я вызываю свой 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 после этого вызова занимает лишь часть моего холста.
Кто-нибудь может сказать мне, что происходит?

9
viewport webgl

1 ответов

нет такой вещи составляет gl.viewportWidth или gl.viewportHeight

если вы хотите установить свою матрицу перспективы, вы должны использовать canvas.clientWidth и canvas.clientHeight как ваши входы в перспективу. Они дадут вам правильные результаты независимо от того, какой размер браузера масштабирует холст. Как если бы вы установили автоматическую шкалу canvas с помощью 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

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

просто чтобы быть ясным, есть несколько вещей, объединенных здесь

  • canvas.width, canvas.height = размер вы запросили drawingBuffer холста, чтобы быть
  • gl.drawingBufferWidth, gl.drawingBufferHeight = размер вы на самом деле получили. В 99,99% случаев это будет то же самое, что canvas.width, canvas.height.
  • canvas.clientWidth, canvas.clientHeight = размер браузер отображает холст.

посмотреть разница

<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. Это общий для set canvas.style.width и canvas.style.height в процентах, чтобы браузер масштабировал его, чтобы соответствовать любому элементу, в котором он содержится.

кроме того, есть 2 вещи, которые вы подняли

  • viewport = обычно вы хотите, чтобы это был размер вашего drawingBuffer
  • соотношение сторон = как правило, вы хотите, чтобы это был размер вашего холста масштабируется до

учитывая эти определения, ширина и высота, используемые для viewport часто не совпадает с шириной и высотой, используемый для aspect ratio.

18