⚙️Log #9

До меня дойти почему-то не могло, каким образом мы можем превратить одно пространство в другое. Речь о чем-то очень примитивном, но у меня не хватало фундаментальных знаний линейной алгебры.

В общем, у нас есть экран HD 1920x1080.

WebGL в свою очередь рендерит все что помещается в диапазон от -1 до 1 как по X, так и по Y. Все что за пределами - не попадает в зону видимости. Собственно это clip space (пространстве отсечения).

Так вот, чтобы от рендерить экран - нам нужно его нормализовать. Это значит чтобы мы позиции точек по ширине в диапазоне от 0 до 1920 (видимый диапазон) - преобразовали в диапазон от -1 до 1 и тоже самое нужно сделать по высоте.

Для этого необходимо наши позиции точек разделить на наш размер экрана Screen (1080, 1920). Ну типа два вектора поделить между собой.
Например у нас точка на нашем экран P1, находится в таких координатах (200, 200)

Поэтому для преобразования в диапазон от -1 до 1 (нормализовать), нужно сделать P1 / Screen = (200 / 1080, 200 / 1920) = (~0,18, 0,10).
Результат округлил, чтобы не писать много цифр, но и webgl умеет тоже округлять качество значений с плавающей точкой через precision в шейдере.

Так вот, мы получили нормализованные координаты, но прикол в том, что они находятся в диапазоне от 0 до 1. Получается что наши позиции точек будут нахдоится где-то сверху в правой части экрана. Почему? Ну потому что webgl рендерит область от -1 до 1 и центр у него находится ровно в (0, 0). А так как у нас нормализованные координаты находятся от 0 до 1, то это справа сверху.

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

Так вот, помимо того, что у нас нормализованные координаты сверху справа, так они еще и в два раза меньше нашего экрана в конечном итоге.

Чтобы привести в нужный вид, нам необходимо сначала заскейлить это дело, ведь не гоже наши точки уменьшать, для этого нужно умножить на x2 и нормализованные координаты выйдут в диапазон от 0 до 2. Берем нашу нормализованную точку: P1 * 2 = (~0.18 * 2, ~0.10 * 2) = (~0,37, ~0,20).

Ну вот, теперь нормально. Однако, если координаты точки были бы больше 1, то в данный момент webgl их бы не от рендерил за пределами видимой области (clip space).

Теперь нам нужно сделать смещение / перемещение. Собственно так как у нас все находится по прежнему в правом верхнем углу экрана, то нам нужно это сместить ровно на 1 влево и на 1 вниз, потому что наш диапазон теперь от 0 до 2. Берем нашу нормализованную и отскейленную точку: P1 - 1 = (~0,37 - 1, ~0,20 - 1) = (~-0,63, ~-0,79).

Отлично! Теперь наши точки находятся в пределах видимости от -1 до 1 и они смещены в левый нижний угол экрана. Однако есть некое нечистое деяние, это не по стандарту, все должно быть относительно левого верхнего угла экрана. Почему? Ну погуглив и послушав больших дядек из этой области, понял что это маст хев, пока инфы по этому нет, но в вобщем и целом это сложилось исторически + согласованность, чтобы было во всех системах одинаково для упрощения.

Как нам это провернуть? Ну тут все тоже просто, достаточно умножить наши координаты точек на инверсивный вектор. Например сейчас у нас в левом нижнем углу, значит нам нужно поменять только позицию по высоте, отразить их. Для этого берем вектор (1, -1), где X будет 1, потому что нам не нужно менять позиции по X, но будет -1 по Y, чтобы отразить все координаты. P1 = (~-0,63, ~-0,79) * (1, -1) = (~-0.63 * 1, ~0.79 * -1) = (~-0,63, ~0.79)

А вот собственно и весь шейдер данной операции:

#version 300 es;

precision mediump float;

attribute vec2 a_position;
uniform vec2 u_resolution;

void main() {
    v_color = a_color;

    vec2 n_position = a_position / u_resolution;

    vec2 sn_position = n_position * 2.0;

    vec2 clip_space = (sn_position - 1.0) * vec2(1, -1);

    gl_Position = vec4(clip_space, 0, 1);
}

P.S. На скрине все в кучу, но это было очень эффективно :D

⚙️Log #12

Спрайт, над которым теперь можно делать преобразования — скейлить, вращать и менять позицию.

Для этого я немного углубился в основы работы с матрицами, изучил как их умножать, складывать, умножать на скаляр и прочее. Осознал, насколько важно правильно работать с матричными операциями, чтобы точнее контролировать трансформации объектов в пространстве.

Затем познакомился с аффинной матрицей. Она позволила мне описывать такие преобразования, как масштабирование, поворот и перемещение в 2D-пространстве. Однако, всё ещё есть некоторые шероховатости в понимании, как именно она работает в контексте 2D. Планирую на следующей неделе посвятить ещё несколько дней этому вопросу и углубиться в практику, чтобы лучше разобраться.

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

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

В этом туториале очень качественно эти преобразования объясняются и визуально демонстрируют в софте Nuke Studio. Сегодня себе его установил, чтобы по CG всякие штуки визуально закреплять.

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

В общем, потрогал много всего, было много трудностей и косяков, но в итоге получилось то, что можно посмотреть в видео. Теперь буду более детально разбирать эти моменты и пробовать разные подходы, чтобы всё закрепить и действительно освоить.

⚙️Log #13

Это первая птица-иконка, которая научилась двигаться в этом движке!