Создание 3D-движка с помощью JavaScript

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

Отображать изображения и другие плоские формы на веб-страницах довольно просто. Однако, когда дело доходит до отображения 3D-фигур, все становится не так просто, поскольку 3D-геометрия более сложна, чем 2D-геометрия. Для этого вы можете использовать специальные технологии и библиотеки, например, WebGL и Three.js .

Однако эти технологии не нужны, если вы просто хотите отобразить некоторые базовые фигуры, например, куб. Более того, они не помогут вам понять, как они работают и как мы можем отображать 3D-фигуры на плоском экране.

Цель этого руководства — объяснить, как мы можем создать простой 3D-движок для Интернета без WebGL. Сначала мы увидим, как мы можем хранить трехмерные фигуры. Затем мы увидим, как отображать эти фигуры в двух разных видах.

Хранение и Преобразование 3D-фигур

Все формы многогранники

Виртуальный мир отличается от реального одним главным образом: ничто не является непрерывным, и все является дискретным. Например, вы не можете отобразить идеальный круг на экране. Вы можете подойти к нему, нарисовав правильный многоугольник с большим количеством ребер: чем больше у вас ребер, тем более «идеальным» будет ваш круг.

В 3D это то же самое, и к каждой фигуре нужно подходить с помощью трехмерного эквивалента многоугольника: многогранник (трехмерная фигура, в которой мы находим только плоские грани и не изогнутые стороны, как в сфере). Это не удивительно, когда мы говорим о фигуре, которая уже является многогранником, например, кубом, но об этом следует помнить, когда мы хотим отобразить другие фигуры, например сферу.

Хранение многогранника

Чтобы угадать, как хранить многогранник, мы должны помнить, как такая вещь может быть идентифицирована в математике. Вы, конечно, уже сделали некоторые базовые геометрии в школьные годы. Например, чтобы идентифицировать квадрат, вы называете его ABCDABCD

Для нашего 3D движка это будет то же самое. Мы начнем с сохранения каждой вершины нашей фигуры. Затем эта фигура будет перечислять свои грани, а каждая грань будет перечислять свои вершины.

Чтобы представить вершину, нам нужна правильная структура. Здесь мы создаем класс для хранения координат вершины.

 var Vertex = function(x, y, z) {
    this.x = parseFloat(x);
    this.y = parseFloat(y);
    this.z = parseFloat(z);
};

Теперь вершина может быть создана как любой другой объект:

 var A = new Vertex(10, 20, 0.5);

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

 var Cube = function(center, size) {
    // Generate the vertices
    var d = size / 2;

    this.vertices = [
        new Vertex(center.x - d, center.y - d, center.z + d),
        new Vertex(center.x - d, center.y - d, center.z - d),
        new Vertex(center.x + d, center.y - d, center.z - d),
        new Vertex(center.x + d, center.y - d, center.z + d),
        new Vertex(center.x + d, center.y + d, center.z + d),
        new Vertex(center.x + d, center.y + d, center.z - d),
        new Vertex(center.x - d, center.y + d, center.z - d),
        new Vertex(center.x - d, center.y + d, center.z + d)
    ];

    // Generate the faces
    this.faces = [
        [this.vertices[0], this.vertices[1], this.vertices[2], this.vertices[3]],
        [this.vertices[3], this.vertices[2], this.vertices[5], this.vertices[4]],
        [this.vertices[4], this.vertices[5], this.vertices[6], this.vertices[7]],
        [this.vertices[7], this.vertices[6], this.vertices[1], this.vertices[0]],
        [this.vertices[7], this.vertices[0], this.vertices[3], this.vertices[4]],
        [this.vertices[1], this.vertices[6], this.vertices[5], this.vertices[2]]
    ];
};

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

 var cube = new Cube(new Vertex(0, 0, 0), 200);

Конструктор класса Cube Схема будет более понятной, поэтому посмотрите ниже положения восьми сгенерированных нами вершин:

 for (var i = 0; i < 8; ++i) {
    cube.vertices[i].x += 50;
    cube.vertices[i].y += 20;
    cube.vertices[i].z += 15;
}

 function render(objects, ctx, dx, dy) {
    // For each object
    for (var i = 0, n_obj = objects.length; i < n_obj; ++i) {
        // For each face
        for (var j = 0, n_faces = objects[i].faces.length; j < n_faces; ++j) {
            // Current face
            var face = objects[i].faces[j];

            // Draw the first vertex
            var P = project(face[0]);
            ctx.beginPath();
            ctx.moveTo(P.x + dx, -P.y + dy);

            // Draw the other vertices
            for (var k = 1, n_vertices = face.length; k < n_vertices; ++k) {
                P = project(face[k]);
                ctx.lineTo(P.x + dx, -P.y + dy);
            }

            // Close the path and draw the face
            ctx.closePath();
            ctx.stroke();
            ctx.fill();
        }
    }
}

 var Vertex2D = function(x, y) {
    this.x = parseFloat(x);
    this.y = parseFloat(y);
};

 function project(M) {
    return new Vertex2D(M.x, M.z);
}

 function project(M) {
    // Distance between the camera and the plane
    var d = 200;
    var r = d / M.y;

    return new Vertex2D(r * M.x, r * M.z);
}