Позиция WebGl для перемещения и поворота - PullRequest
Новая
       12

Позиция WebGl для перемещения и поворота

0 голосов
/ 29 марта 2019

Я сейчас начинаю использовать WebGl, и я вижу этот пример

WebGL Как это работает

Это тот же самый пример (для трасляции) в HTML-части: 

gl_Position = traslation * vPosition;

, где traslation - это матрица Теперь (просто для примера) я хочу, чтобы мой треугольник вращался и перемещался. Я уже сделал вращение и работал тоже, но когда я объединяю две вещи не вращаются.

В моей поворотной версии у меня есть: 

<script id="vertex-shader" type="x-shader/x-vertex">

    attribute vec4 vPosition;
    uniform float theta;

    void main()
    {
        float s = sin( theta );
        float c = cos( theta );

        gl_Position.x = -s * vPosition.y + c * vPosition.x;
        gl_Position.y =  s * vPosition.x + c * vPosition.y;
        gl_Position.z = 0.0;
        gl_Position.w = 1.0;

    }
</script>

Итак, я вижу, что обозначения отличаются. Потому что для поворота нужны x, y, z ax, вместо этого для traslation нет. Я просто пробую свою часть в ротации: 

gl_Position.x = -s * vPosition.y + c * vPosition.x;
gl_Position.y =  s * vPosition.x + c * vPosition.y;
gl_Position.z = 0.0;
gl_Position.w = 1.0;
gl_Position = traslation * vPosition;

Можно ли использовать эту запись?

в примере, который я связал, использовал этот способ, который я плохо понимаю 

 gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);

Зачем использовать vec4? Я думаю, что матрица для трансформации - лучший выбор.

Кто-нибудь может мне помочь?

1 Ответ

1 голос
/ 29 марта 2019

этот код 

gl_Position.x = -s * vPosition.y + c * vPosition.x;
gl_Position.y =  s * vPosition.x + c * vPosition.y;
gl_Position.z = 0.0;
gl_Position.w = 1.0;
gl_Position = traslation * vPosition;

эта последняя строка заменяет результат первых 4 строк

Вы можете сделать это вместо 

gl_Position += traslation;

Но вы, вероятно, должны использовать матрицу, как , эта статья объясняет

А почему этот код 

 gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);

использует vec4, потому что gl_Position - это vec4

Вы также можете сделать это 

 gl_Position.xy = (u_matrix * vec3(a_position, 1)).xy;
 gl_Position.z = 0.0;
 gl_Position.w = 1.0;

или это 

 gl_Position.xyz = u_matrix * vec3(a_position, 1);
 gl_Position.w = 1.0;

Как правило, большинство шейдеров GLSL используют vec4 и mat4, поскольку это позволяет использовать 2D и 3D с одинаковыми шейдерами

См. https://webglfundamentals.org/webgl/lessons/webgl-3d-orthographic.html

...