[Перевод] Город в бутылке — движок Raycasting всего на 256-байт22.05.2024 16:45

Чтобы проверить, находится ли луч внутри коллизии (в столкновении с объектом), мы проверяем, меньше ли значение Y, чем высота в данной позиции. Город формируется путем контроля высоты для каждого положения XZ

6 — эта часть просто перемещает результат высоты ниже центра и переворачивает все, чтобы земля оказалась внизу, как и должно быть.

Внутри круглых скобок происходит настоящее волшебство…

• Оставьте некоторое пространство между камерой и первым рядом зданий, убедившись, что Z сдвинулся как минимум на 32 единицы.

• Создайте переулки и побережье, проверив, что X mod w (константа 99) больше 27. Это позволит периодически оставлять пустые промежутки, такие как дороги, чтобы город делился на кварталы. В качестве дополнительного бонуса эта проверка всегда возвращает false при отрицательных значениях, создавая случайный океан.

• Сгенерируйте функцию шума для верхушек зданий, используя X/9^Z/8. Функция побитового исключающего «ИЛИ» используется здесь для получения интересного разброса значений, Таким образом здания будут иметь разную высоту. 

• Деление используется для масштабирования, чтобы здания были 9 юнитов в ширину и 8 юнитов в глубину. Использование более крупных единиц приведет к увеличению размеров зданий.

• Значение X/9 здесь также связано с шириной боковой улицы от 27 до 99, все эти числа кратны 9. Это предотвращает создание очень тонких зданий по краям.

  

  Вид сверху вниз на здания, изображённые в оттенках серого

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

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

Значения расстояний, используемые для создания тумана

Создание тени и текстуры

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

 d | (s = (X&Y&Z)%3/Z, a = b = 1, d = Z/w));)

Первая часть d | нужна для того, чтобы проверить, запускаем ли мы луч из камеры или направляем луч на свет, чтобы проверить наличие тени. Мы уже установили d равным 1 до начала цикла, и в конце этой строки ему будет присвоено значение меньше 1, которое в сочетании с побитовым «или» будет оценено как false. Это позволяет циклу запуститься второй раз, перемещаясь к свету и проверяя наличие тени. Поэтому, если он окажется в тени при следующем столкновении,   он выйдет из цикла «for» и отрисует пиксель.

Значение текстуры в оттенках серого сохраняется в s и генерируется с помощью оператора & с X, Y и Z и остаток их деления на 3. Это создает эффект, похожий на различные типы окон. Результат также делится на Z, чтобы затенить текстуры в отдалении.

Вид сбоку на текстуры зданий

Чтобы направить луч на источник света, для a и b установлено значение 1. Это отлично работает для направленного источника света.

Значение тумана сохраняется в d путем деления текущего значения Z на w (99), которое будет использоваться для освещения зданий на расстоянии. Это же значение d теперь гарантированно будет меньше 1, а значит, мы проверяем наличие  тени, как упоминалось ранее.

X += a

Y -= b

Каждый компонент обновляется для перемещения конечной точки луча. Часть X и Y управляется a и b соответственно. Часть Z всегда перемещается вперед на 1, поскольку направленный свет также направлен в сторону камеры, и его никогда не нужно менять.

Рисование каждого пикселя

В конечном итоге каждый пиксель рисуется с использованием простого вычисления i для получения координат X и Y. Яркость контролируется путем уменьшения размера пикселя, что является очень экономичным способом создания изображений в оттенках серого по пикселю за раз.

c.getContext`2d`.fillRect(i%w, i/w|0, 1 - d*Z/w + s, 1)

Существует несколько значений, которые объединяются для управления окончательным значением оттенков серого. Значение 1 здесь будет черным пикселем, поэтому для создания изображения в оттенках серого мы будем производить вычитание из 1.

Без текстурного компонента

Значение тумана d умножается на текущее расстояние Z/w, и именно так создаются тени. Если луч находится не в тени, он должен пройти максимальное расстояние w, поэтому Z/w будет равно 1. И наоборот, если он находится в тени, то Z будет меньше w, в результате чего эта область станет темнее. Это на самом деле создает своего рода модель затемнения, потому что чем ближе объект, блокирующий свет, тем гуще тень.

Просто текстурный компонент

Наконец, мы добавляем s к результату, который представляет собой текстуру зданий, которые мы рассчитали ранее. Вы увидите, как оба этих важных компонента объединяются, чтобы создать реалистичную сцену.

Конечный результат, где объединено всё вышеописанное

Хотите верьте, хотите нет, но это вся программа! Этот крошечный 256-байтовый движок рейкастинга и генератор городов демонстрирует, как многого можно достичь с помощью минимального кода.

Спасибо за внимание.

Habrahabr.ru прочитано 6487 раз