WebGL не рисует в пределах нормализованных координат? - PullRequest
Новая
       0

WebGL не рисует в пределах нормализованных координат?

2 голосов
/ 24 февраля 2012

Я написал простую страницу WebGL (ну, настолько простую, насколько я мог ее сделать) и не могу понять, почему не работают нормализованные координаты.То есть я пытаюсь нарисовать квадрат от (-0,5, -0,5) до (0,5, 0,5) через два треугольника, и вместо этого я получаю большой прямоугольник, который выходит за пределы экрана.

Ясовершенно не уверен, что я делаю неправильно, поэтому я вставил его в jsFiddle:

ссылка

Обратите внимание, как я правильно определяю свои верты и индексы (правильно?)Программы шейдеров и фрагментов так же просты, как и они.

Почему он рисует в виде странного большого закадрового прямоугольника?

Ответы [ 2 ]

2 голосов
/ 24 февраля 2012

Хорошо, я наконец-то получил помощь от кого-то в #webgl на Freenode: элементу <canvas> требуется атрибут ширины и высоты, тогда как я настраиваю их с помощью CSS. Очевидно, что фактические атрибуты width и height определяют ширину и высоту буфера OpenGL.

Мне не удалось найти это документированное где-либо еще, за исключением того, что примеры WebGL имеют тег width и height на теге canvas.

0 голосов
/ 25 февраля 2012

То же, что и для других элементов, размер чего-либо отображается отдельно от его размера. Примеры:

Отображение 4x4 JPG в формате 4x4 пикселей 

<img src="some4x4pixel.jpg" />

Отображение 4x4 JPG с разрешением 16x16 пикселей 

<img src="some4x4pixel.jpg" width="16" height="16" />

Отображение 4x4 JPG с разрешением 16x16 пикселей 

<img src="some4x4pixel.jpg" style="width:16px; height:16px;"/>

Отображение 4x4 JPG любого размера, в котором он находится 

<img src="some4x4pixel.jpg" style="width:100%; height:100%;"/>

Отображение холста 300x150 пикселей (размер по умолчанию) при разрешении 300x150 пикселей 

 <canvas></canvas>

Отображение холста 4x4 с разрешением 4x4 пикселей 

 <canvas width="4" height="4"></canvas>

Отображение холста 4x4 с разрешением 16x16 пикселей 

 <canvas width="4" height="4" style="width:16px; height:16px;"/></canvas>

Отображение холста 4x4 в любом размере контейнера 

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

Если вы делаете 3D и используете довольно распространенную функцию перспективы, которая есть в большинстве 3D-библиотек по математике, вы, как правило, хотите установить соотношение сторон для размера экрана, а не для фактического размера. 

 // 45degrees, assumes math library uses radians
 var fieldOfView = Math.PI / 4;  

 // Use the size the canvas is displayed, NOT the size it actually is.
 var aspectRatio = canvas.clientWidth / canvas.clientHeight;

 var zNear = 0.1;
 var zFar = 1000;

 var matrix = someMathLibrary.perspective(fieldOfView, aspectRatio, zNear, zFar, ...)

Если вы хотите, чтобы размер существующего холста совпадал с отображаемым размером, используйте 

 canvas.width = canvas.clientWidth;
 canvas.height = canvas.clientHeight;

Хотя обратите внимание, холст WebGL не обязательно должен быть того размера, который вы запрашиваете, поскольку различные графические процессоры имеют ограничения по размеру. Если вы хотите узнать размер, который вы получили, по сравнению с размером, который вы запрашивали, проверьте 

 gl.drawingBufferWidth
 gl.drawingBufferHeight

Для матрицы перспективы, используемой большинством 3D-приложений, фактический размер холста не так важен. Для определенных видов эффектов или для 2D это часто важно.

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

https://www.google.com/webhp?sourceid=chrome-instant&ix=sea&ie=UTF-8&ion=1#sclient=psy-ab&hl=en&site=webhp&source=hp&q=canvas%20size%20css&pbx=1&oq=&aq=&aqi=&aql=&gs_sm=&gs_upl=&fp=f131b50fb368d7bf&ix=sea&ion=1&bav=on.2,or.r_gc.r_pw.r_cp.,cf.osb&biw=1629&bih=931

...