⚙️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