§ Цель статьи

У меня очень давно есть мысль, которую все мечтаю реализовать, это просто нарисовать обычный куб. Ничего особенного вроде как. Обычный и куб. Делается это легко, вроде как, но все равно, поскольку я человек, который любит все с нуля писать, то это будет не так просто. Конечно, можно взять Блендер и не удалять оттуда обычный куб и тогда будет обычный куб, да еще в и квадрате, но, мне же нужно страдать и изобретать велосипеды.

§ Конструкция куба

Так, что из себя представляет куб? У него 6 сторон (граней), 8 точек и 12 ребер. Вот именно это и надо сделать. Я пойду по пути бросания лучей из камеры и попадания на границу этого шикарного куба в пространстве. Кстати, тени тоже я сделаю. Для этого придется просто бросать лучи из других точек.
Первым делом, мне потребуется код для пересечения некоторой линии с плоскостью. В этой статье я уже рассматривал, как вычислять пересечения. Говоря проще, есть плоскость, заданная через точки ABC или через два вектора и и некоторая прямая
Куб будет располагаться по следующим координатам:

1let vertex = [
2    [-1,  1,  1], // 0 Левый  верхний спереди
3    [ 1,  1,  1], // 1 Правый верхний спереди
4    [ 1, -1,  1], // 2 Правый нижний  спереди
5    [-1, -1,  1], // 3 Левый  нижний  спереди
6    [-1,  1, -1], // 4
7    [ 1,  1, -1], // 5
8    [ 1, -1, -1], // 6
9    [-1, -1, -1]  // 7
10];

Но этого мало, конечно, необходимо указать все грани этого куба:

1let faces = [
2    [1, 0, 3, 2], // Перед
3    [0, 1, 5, 4], // Верх
4    [4, 5, 6, 7], // Зад
5    [2, 3, 7, 6], // Низ
6    [0, 4, 7, 3], // Слева
7    [5, 1, 2, 6], // Справа
8];

Порядок обхода вершин имеет значение. Необходимо, чтобы обход был по часовой стрелке.
Поскольку плоскость располагается достаточно симметрично, будет хватать взять лишь только первые 3 точки оттуда. Но крайне важно брать именно перпендикулярные друг другу ребра, так что можно будет добавлять плоскости по трем точкам, к примеру точки (1,0,2) для того, чтобы описать переднюю грань куба.
Теперь самое интересное, это нахождение точек пересечения с каждым ребром куба. Допустим, что у меня уже есть функция, которая рассчитывает расстояние от точки до плоскости, и не просто рассчитывает, а еще указывает, куда конкретно попала линия.

§ Угол зрения FOV

Собственно, суть в том, чтобы найти точки пересечения исходящего луча из камеры, вектор которой равен:
vec3(dx*fov, dy*fov, 1.0)
Здесь FOV (Field Of View) - это коэффициент угла зрения. Если FOV=1, то при dx=-1..1 дается 90 градусов обзора по горизонтали и вертикали. Просто из-за того что dx=-159 до 159 и dy=-99 до 99, то приходится делать fov=1/100, например, чтобы приравнять dy=-1..1 хотя бы. По причине того, что экран не квадратный, то dx на краях будет в 1.6 раз больше, но куда деваться, ничего не поделаешь. Если же обе стороны делать пропорциональными например, dx=-1..1 то будет заметно "сжатие" экрана и все будет расплющено.

§ Расчет параметров плоскости

Плоскость в пространстве, как я и говорил, можно задавать через три точки, например, точки a,b,c. Теперь я сразу выложу код, как рассчитываются коэффициенты для этих точек.
Опишу первым делом, как задаются точки у меня. Точки передаются как массив 3 или 5. Если массив состоит из 5 значений, то это передача параметров (u,v)

1create3(a, b, c) {
2
3    return {
4        a: vec3(a[0], a[1], a[2], a[3] || 0, a[4] || 0),
5        b: vec3(b[0], b[1], b[2], b[3] || 0, b[4] || 0),
6        c: vec3(c[0], c[1], c[2], c[3] || 0, c[4] || 0),
7    };
8}

Сам же вектор реализован так

1function vec3(x, y, z, u = 0, v = 0) {
2    return {
3        x: x, y: y, z: z,
4        u: u, v: v
5    };
6}

И вот теперь — самое главное. Расчет плоскости. В качестве параметра T передается результат функции create3. Параметр P представляет из себя функцию vec3(x,y,z) — что представляет собой положение камеры в пространстве. Для простоты я ставлю камеру в (0,0,0).

1compute3(T, P) {
2
3    // Разности между точками в пространстве
4    let AB = vec3(T.b.x - T.a.x, T.b.y - T.a.y, T.b.z - T.a.z);
5    let AC = vec3(T.c.x - T.a.x, T.c.y - T.a.y, T.c.z - T.a.z);
6    let AP = vec3(P.x   - T.a.x, P.y   - T.a.y, P.z   - T.a.z);
7
8    return {
9
10        // Параметры для дальнейших расчетов
11        U: vec3(
12            AC.y * AP.z - AC.z * AP.y,
13            AC.z * AP.x - AC.x * AP.z,
14            AC.x * AP.y - AC.y * AP.x
15        ),
16        V: vec3(
17            AB.z * AP.y - AB.y * AP.z,
18            AB.x * AP.z - AB.z * AP.x,
19            AB.y * AP.x - AB.x * AP.y
20        ),
21        D: vec3(
22            AB.z * AC.y - AB.y * AC.z,
23            AB.x * AC.z - AB.z * AC.x,
24            AB.y * AC.x - AB.x * AC.y
25        ),
26        // Вектор нормали
27        N: vec3(
28            AB.y * AC.z - AB.z * AC.y,
29            AB.z * AC.x - AB.x * AC.z,
30            AB.x * AC.y - AB.y * AC.x
31        ),
32        // Текстурные координаты
33        tu: vec3(T.a.u, T.b.u - T.a.u, T.c.u - T.a.u),
34        tv: vec3(T.a.v, T.b.v - T.a.v, T.c.v - T.a.v),
35        // Сохранить для быстрого обновления
36        a: T.a, AB: AB, AC: AC, AP: AP,
37    };
38}

Между прочим, если требуется быстро обновить позицию камеры, то вовсе необязательно снова вызывать функцию полного пересчета. Достаточно сделать несколько вычислений.
Здесь R - это объект, полученный из compute3, а P - это вектор нового положения начального положения луча (или камеры) в пространстве.

1update3(R, P) {
2
3    let AP  = vec3(P.x - R.a.x, P.y - R.a.y, P.z - R.a.z);
4    let [AB, AC] = [R.AB, R.AC];
5
6    R.U = vec3(
7        AC.y * AP.z - AC.z * AP.y,
8        AC.z * AP.x - AC.x * AP.z,
9        AC.x * AP.y - AC.y * AP.x
10    );
11
12    R.V = vec3(
13        AB.z * AP.y - AB.y * AP.z,
14        AB.x * AP.z - AB.z * AP.x,
15        AB.y * AP.x - AB.x * AP.y
16    );
17
18    R.AP = AP;
19}

§ Поиск пересечений

Вот теперь можно и перейти к описанию рутины, по которой происходит поиск точки пересений и текстурных координат.

1// Расчет
2let T = {
3    ok: 0,
4    u:  R.U.x*d.x + R.U.y*d.y + R.U.z*d.z,
5    v:  R.V.x*d.x + R.V.y*d.y + R.V.z*d.z,
6    d:  R.D.x*d.x + R.D.y*d.y + R.D.z*d.z,
7    t:  R.N.x*R.AP.x + R.N.y*R.AP.y + R.N.z*R.AP.z,
8    tx: 0,
9    ty: 0
10};
11
12// Пересечение произошло для плоскости
13if (T.d !== 0) {
14
15    // Либо треугольник, либо плоскость (quad)
16    let ok = quad ? (T.u <= T.d && T.v <= T.d) : (T.u + T.v <= T.d);
17
18    // Попадает ли?
19    if (ok && T.u >= 0 && T.v >= 0 && T.t > 0) {
20
21        T.ok = 1;
22        T.u /= T.d;
23        T.v /= T.d;
24        T.t /= T.d;
25
26        // Рассчитать позицию текстуры
27        T.tx = R.tu.x + R.tu.y*T.u + R.tu.z*T.v;
28        T.ty = R.tv.x + R.tv.y*T.u + R.tv.z*T.v;
29    }
30}

Вначале идет расчет параметров u,v,d,t, которые получаются путем скалярного произведения векторов U,V,D с вектором направления луча. Как можно заметить, начальная точка этого луча уже ранее была вычислена в compute3, потому она тут и не требуется.
Если луч не параллелен плоскости, то T.d будет не равно 0. Далее проверяем (u,v) — в зависимости от того, треугольник ли или плоскость пересекается. Если пересечение есть, то уже рассчитываются конечные координаты u,v,t и положение текстурной точки tx,ty.
Ниже показан пример как нарисовать куб. Работает медленно, как и должно.

Вот и всё.

§ Разве что код

Чтобы код не потерять в глубине тысячелетий.

1this.cast = new Caster3D();
2this.cast.addCube(vec3(-1.5, -0, 3));
3this.cast.addPlane([-8,-1,8,0,0],[8,-1,8,255*8,0],[-8,-1,-8,0,255*8]);
4
5this.cls(colorBlack);
6
7for (let y = -100; y < 100; y++)
8for (let x = -160; x < 160; x++) {
9
10    let cl = 0;
11
12    let vec = this.cast.camDir(x / 100, y / 100);
13    let int = this.cast.find(vec);
14
15    // Поиск объекта на сцене
16    if (int.ok) {
17        cl = ((Math.floor(int.tx) ^ Math.floor(int.ty)) & 255) << 8;
18    }
19
20    this.pset(160 + x, 99 - y, cl);
21}