Как настроить соотношение сторон камеры WebGL и соотношение холста (окна)? - PullRequest
Новая
       1

Как настроить соотношение сторон камеры WebGL и соотношение холста (окна)?

1 голос
/ 20 августа 2011

Я заставил свой контент webGL заполнить окно браузера, используя:

CSS: 

canvas
  {
    float: left;
    width: 100%;
    height: 100%;
  }

А также: 

function webGLStart() {
    var canvas = document.getElementById("cool3D");
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight;
    ...

Пока что это эффективно для поддержания полного покрытия, независимо от размера окна или полноэкранного режима. Проблема заключается в назначении соотношения сторон камеры, чтобы избежать искажений.

Как установить ~ ~ window.innerWidth / window.innerHeight "? OnWindowResize

1 Ответ

5 голосов
/ 05 октября 2011

Это не имеет ничего общего с окном просмотра.На самом деле это функция матрицы перспективы.Ваш код будет меняться, но каждый раз, когда я обнаруживаю, что размер окна изменяется, я делаю следующее: 

mat4.perspective(45.0, canvas.width/canvas.height, znear, zfar, projectionMat);

, который обновляет матрицу проекции, чтобы использовать соответствующее соотношение сторон (ширина / высота).

...