Програміст створив 3D-місто в одному HTML-файлі: весь кіберпанковий світ рендериться з тексту та символів
·
21.08.2026 08:11
·
2 хвилини читання
Розробник із YouTube-каналу Grow Now! Games представив незвичайний інтерактивний прототип: тривимірне кіберпанкове місто, яке працює прямо в браузері та повністю вміщується в єдиному HTML-файлі.
Проєкт реалізовано без Unity, Unreal Engine, полігональних 3D-моделей, сторонніх бібліотек, готових текстур або шейдерів. Замість звичного стеку автор написав власний компактний рушій на чистому JavaScript та HTML5 Canvas, де все графічне оточення генерується виключно за допомогою цифр, літер та ASCII-символів.
Повноцінний 3D-рейкастинг замість стилізованого фільтра
Створений світ не є плоскою анімацією чи постобробкою відео. Місто являє собою повноцінну просторову сцену, побудовану на тривимірній сітці, де розташовані хмарочоси різної висоти, дороги, дерева, ліхтарі, а також рухомий трафік з автомобілів і пішоходів.
Відтворення кожного кадру відбувається за допомогою рейкастингу (raycasting):
- Рушій пускає віртуальні промені з камери гравця, обчислюючи глибину сцени, перспективу, перекриття об’єктів і колізії.
- Потім координати трансформуються в символи різного розміру, кольору та яскравості: ближчі до глядача будівлі та об’єкти відображаються великим і яскравим шрифтом, а віддалені квартали зменшуються та плавно розчиняються в темряві.
Вулицями міста можна вільно пересуватися з видом від першої особи, роздивляючись неонові вивіски та трафік під різними кутами.
Мінімалізм без залежностей
Демонстрація проєкту викликала активний інтерес у спільнотах на Reddit і Tildes. Користувачі та розробники оцінили архітектуру «все в одному файлі», яка позбавляє необхідності збирати важкі npm-пакети, налаштовувати збірники або розгортати локальний веб-сервер — сторінку достатньо зберегти на диск і відкрити в будь-якому сучасному веб-браузері.
Наразі автор показав роботу рушія лише на відео. Вихідний код і публічна інтерактивна веб-версія поки не викладені у відкритий доступ, однак розробник планує поділитися деталями реалізації після завершення базових оптимізацій.
