Спрайт растягивается обратно пропорционально размеру холста - PullRequest
Новая
       76

Спрайт растягивается обратно пропорционально размеру холста

0 голосов
/ 28 сентября 2018

У меня есть небольшая программа, над которой я работаю для рендеринга спрайтов с помощью 2D-преобразований, ссылка здесь .Моя проблема в том, что я пытаюсь визуализировать квадрат 100 на 100 пикселей, но он растягивается в прямоугольник.Я абсолютно не понимаю, что такое код, вызывающий нарушение, но вот некоторые важные части. 

const position = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, position)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
  -w/2,  h/2,
   w/2,  h/2,
  -w/2, -h/2,
   w/2, -h/2
]), gl.STATIC_DRAW)


gl.bindBuffer(gl.ARRAY_BUFFER, position)
gl.vertexAttribPointer(attrib.vertexPosition,
                      2, gl.FLOAT, false, 0, 0)
gl.enableVertexAttribArray(attrib.vertex)


gl.uniformMatrix2fv(uniform.transformMatrix, false, transform)
gl.uniform2f(uniform.translation, x+w/2, y+h/2)
gl.uniform2f(uniform.screenRes, gl.canvas.width, gl.canvas.height)

Вершинный шейдер: 

attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat2 uTransformMatrix;
uniform vec2 uTranslation;
uniform vec2 uScreenRes;

varying vec2 vTextureCoord;

void main() {
  gl_Position = vec4(2.0 * (uTransformMatrix * aVertexPosition + uTranslation) / uScreenRes - 1.0, 1.0, 1.0);
  vTextureCoord = aTextureCoord;
}

Не стесняйтесь поиграть с переменными в ручке, особенно с размерами холста;когда вы уменьшаете размер, то размер спрайта увеличивается, и наоборот.

PS Меня не волнует, как инвертировать текстуру.Я отложу это на потом.

1 Ответ

0 голосов
/ 28 сентября 2018

Ваш код правильный, однако вы забыли указать область просмотра.Добавьте это прямо перед выполнением любых вызовов отрисовки (в вашем случае, в идеале после gl.clear()) 

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)

Метод WebGLRenderingContext.viewport () API WebGL устанавливает область просмотра, которая задаетаффинное преобразование x и y из нормализованных координат устройства в координаты окна.

...