Как устроен 3D‑мир в играх

Урок 1 из 7

Каждая точка - это три числа

В 3D-мире у любой точки есть адрес из трёх чисел: X - вправо и влево, Y - вверх и вниз, Z - вперёд и назад. Центр мира, где все три числа равны нулю, называют началом координат.

Двигай ползунки. Пунктир показывает, как точка отбрасывает «тень» на пол и на оси: по нему удобно читать её координаты.

Разные движки договорились по-разному, какая ось смотрит вверх:

Левая и правая система отличаются направлением одной оси. Поэтому модель из Blender в Unity иногда приезжает лёжа на боку.

Урок 2 из 7

Позиция, поворот, масштаб

У каждого объекта в игре есть трансформ - три набора чисел. Позиция говорит, где объект стоит. Поворот - куда он смотрит. Масштаб - во сколько раз он больше или меньше исходной модели.

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

Тяни за стрелки и кольца прямо на модели. Клавиши W, E и R переключают режимы, как в Unity: сначала кликни по сцене.

В редакторах поворот показывают в градусах. Внутри движок обычно хранит его в радианах или кватернионах - так удобнее считать и не бывает «шарнирного замка», когда две оси поворота совпадают.

Урок 3 из 7

Модель - это сетка из треугольников

Видеокарта умеет рисовать только треугольники, зато очень много и очень быстро. Любая модель, от камня до персонажа, собрана из них. Такая сетка называется меш, а углы треугольников - вершины.

В каждой вершине хранится её позиция и нормаль - стрелка, которая показывает, куда «смотрит» поверхность. По нормалям игра считает, как на объект падает свет.

Больше треугольников - глаже форма, но тяжелее для видеокарты. Поэтому далёкие объекты в играх подменяют упрощёнными копиями. Это называется LOD, уровень детализации.

Урок 4 из 7

Объекты вложены друг в друга

В играх объекты собраны в дерево: меч лежит в руке, рука прикреплена к телу, тело - к персонажу. Объект-«ребёнок» двигается вместе с «родителем» и хранит свои координаты относительно него. Это локальные координаты. А мировые - где объект находится на самом деле, если считать от центра мира.

Луна здесь - ребёнок планеты, планета - ребёнок солнца. Каждый просто крутится по кругу, но в мире луна рисует сложную петлю.

Посмотри на числа: локальные координаты луны не меняются вовсе. Луна никуда не движется сама, крутятся её родители.

Урок 5 из 7

Камера видит только пирамиду

Игрок видит мир через камеру. У неё есть угол обзора - FOV: чем он больше, тем шире картинка и сильнее искажения по краям.

Всё, что видит камера, помещается в усечённую пирамиду - frustum. У пирамиды есть ближняя и дальняя стенка: слишком близкое и слишком далёкое тоже не рисуется. Объекты вне пирамиды игра даже не отправляет видеокарте - так экономятся силы.

Большое окно - вид со стороны, жёлтые линии - пирамида камеры. Маленькое окно - то, что видит игрок. Серые объекты сейчас не рисуются.

Ортографическая камера не уменьшает далёкие предметы. Так рисуют стратегии и изометрические игры.

Урок 6 из 7

Свет и материал решают, как выглядит поверхность

Одна и та же форма может выглядеть как пластик, металл или резина - всё решает материал. В современных играх его описывают двумя главными числами: шероховатость (roughness) и металличность (metalness). Гладкая поверхность даёт чёткий блик, шероховатая рассеивает свет.

Тени тоже считаются: игра рисует сцену с точки зрения источника света и запоминает, что он видит. Всё, что свет не видит, оказывается в тени. Это называется карта теней.

Подвигай солнце и посмотри, как тени бегут по полу.

Урок 7 из 7

Игра - это цикл, который крутится 60 раз в секунду

Каждый кадр игра делает одно и то же: смотрит, какие клавиши нажаты, двигает объекты, проверяет столкновения и рисует картинку.

Между кадрами проходит немного времени - deltaTime. На него умножают скорость, чтобы персонаж бегал одинаково и на слабом, и на мощном компьютере.

function update(dt) {
  const dir = readKeys();           // куда жмёт игрок
  robot.x += dir.x * speed * dt;    // скорость × время
  robot.z += dir.z * speed * dt;
  checkCrystals();                  // столкновения
  render();                         // картинка на экран
}

Столкновение здесь самое простое: если до кристалла меньше метра, он собран. Ползунок «Скорость времени» замедляет весь мир, как слоу-мо.