В 2023 году один разработчик создал галактику из 100 000 звёзд, которая вращалась в браузере Chrome без единого тормоза. Секрет был не в мощном компьютере, а в том, что он заставил видеокарту думать по-другому.
Пока большинство программистов пишут код, который выполняется построчно на процессоре, небольшая группа энтузиастов научилась говорить напрямую с тысячами ядер видеокарты. Они создают вселенные, которые помещаются в файл размером с фотографию из отпуска.
Это история о том, как технология, которую раньше знали только графические инженеры игровых студий, стала доступна любому, кто умеет писать JavaScript. И как это меняет всё.
Когда процессор сдался, а видеокарта только начала
Представьте, что вам нужно покрасить 10 000 кубиков. Каждый своим цветом, каждый движется по своей траектории.
Обычный JavaScript-код делает это последовательно. Берёт первый кубик, вычисляет его новую позицию, меняет цвет, рисует. Потом второй. Потом третий. Процессор работает как один очень быстрый художник, который мечется между тысячами холстов.
Результат? Загрузка процессора 100%, частота кадров падает до 15 в секунду. Картинка дёргается, браузер тормозит, пользователь закрывает вкладку.
Теперь включаем шейдеры.
Видеокарта NVIDIA RTX 3060 содержит 3584 ядра CUDA. Это 3584 художника, которые работают одновременно. Вы даёте им одну инструкцию: "Вот формула для движения, вот правило для цвета". И все 10 000 кубиков обновляются за один такт.
Та же сцена выдаёт 60 кадров в секунду. Загрузка процессора 5%.
Разница не в скорости процессора. Разница в архитектуре мышления. Процессор Intel Core i7 имеет 8-16 ядер и думает последовательно. Видеокарта имеет тысячи ядер и думает параллельно.
В 2019 году на фестивале демосцены Revision показали программу размером 64 килобайта. Она генерировала четырёхминутный ролик с фотореалистичными горами, облаками и водой. Целиком на GPU. Без единой предзаписанной текстуры.
64 килобайта. Это меньше, чем иконка приложения на вашем телефоне.
Секрет в том, что шейдеры не хранят картинку. Они хранят математику, которая рисует картинку каждый кадр заново. Формула занимает байты, результат выглядит как работа целой студии.
Вы чувствуете этот момент? Когда понимаете, что ограничение было не в железе, а в подходе. Что дверь всегда была открыта, просто никто не показал, где ручка.
Three.js открыл дверь, которую раньше охраняли инженеры
Проблема WebGL была не в том, что он сложный. Проблема в том, что он честный.
Чтобы нарисовать вращающийся куб на чистом WebGL, вам нужно написать 247 строк кода. Инициализировать контекст. Создать буферы для вершин. Написать шейдеры на GLSL. Настроить матрицы проекции. Связать атрибуты. Запустить цикл рендеринга.
Каждая строка критична. Пропустите одну, получите чёрный экран без сообщения об ошибке.
В 2010 году Рикардо Кабельо выпустил Three.js. Тот же куб за 18 строк кода.
```javascript const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight); const renderer = new THREE.WebGLRenderer(); const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5;
function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); ```
Библиотека взяла на себя всю сантехнику. Вы думаете объектами и сценами, а не буферами и указателями.
Сегодня Three.js скачивают 12 миллионов раз в неделю через npm. Это больше, чем React Router. Больше, чем Lodash.
В 2019 году французский разработчик Бруно Симон создал своё портфолио в виде 3D-игры на Three.js. Вы управляете машинкой, которая ездит по миниатюрному миру с его проектами. Сайт получил 3 миллиона посещений за первый месяц.
Не потому что идея была новой. Потому что раньше такое делали только игровые студии с бюджетами. А тут один человек за несколько недель.
Барьер рухнул.
Но настоящая магия Three.js не в том, что он упрощает базовые вещи. Магия в том, что он не прячет сложные. Вы можете начать с готовых материалов и геометрий, а потом написать собственный шейдер, который делает то, что не умеет ни одна библиотека.
Дверь открыта. Внутри целая вселенная.
Частицы, которые помнят, где они были
Стандартная JavaScript-анимация умирает на 5000 частицах.
Вы создаёте массив объектов. Каждый кадр пробегаете по массиву, обновляете позиции, применяете физику, перерисовываете. Процессор задыхается. Частота кадров падает. Анимация превращается в слайдшоу.
Теперь представьте миллион частиц, которые движутся плавно.
Секрет в технике GPGPU — General Purpose GPU. Вы используете видеокарту не для рисования, а для вычислений.
Работает это так. Создаёте текстуру размером 1024 на 1024 пикселя. Это миллион пикселей. Каждый пиксель хранит четыре числа: красный, зелёный, синий, альфа-канал. Вы используете их как координаты X, Y, Z и скорость частицы.
Текстура становится базой данных.
Пишете шейдер, который читает эту текстуру, применяет физику к каждому пикселю и записывает результат в новую текстуру. Всё это происходит параллельно на тысячах ядер GPU. За один кадр.
Потом берёте обновлённую текстуру и используете её для отрисовки частиц.
Результат? GPU-based particle system обрабатывает 1-2 миллиона частиц при 60 кадрах в секунду. Процессор при этом почти не нагружен.
В 2008 году математик и программист Иниго Кильес создал демо под названием "Clouds". Объёмные облака из 500 000 частиц, которые двигались и взаимодействовали в реальном времени. Весь код умещался в 4 килобайта.
Четыре килобайта. Это два абзаца текста.
Фокус в том, что каждая частица не хранится отдельно. Хранится формула, которая генерирует поведение всех частиц сразу. Видеокарта вычисляет эту формулу для каждой точки пространства параллельно.
Вы не говорите "частица номер 47 движется влево". Вы говорите "все частицы в этой области подчиняются такому векторному полю". И GPU применяет это правило ко всем одновременно.
Это как разница между тем, чтобы давать указания каждому человеку в толпе, и тем, чтобы изменить гравитацию. Второе работает для всех сразу.
Ограничения исчезают. То, что казалось невозможным, становится стартовой точкой.
Метавселенная начинается не в шлеме, а в коде
Все говорят про метавселенную. Мало кто понимает, на чём она стоит.
Это не VR-гарнитуры. Это не блокчейн. Это технологии вроде шейдеров и браузерных 3D-движков, которые делают виртуальные миры доступными без установки приложений и без мощного железа.
Smithsonian Institution оцифровал 40 миллионов экспонатов музея. Вы открываете браузер на телефоне и рассматриваете скелет тираннозавра в 3D. Крутите, приближаете, смотрите с любого угла. Модель весит 15 мегабайт и грузится за три секунды.
Это работает благодаря WebGL-оптимизации. Высокополигональная модель сжимается через алгоритмы Draco. Текстуры генерируются процедурно. Детали дорисовываются шейдерами на лету.
Результат выглядит как будто весит гигабайты. На самом деле умещается в размер песни.
Mozilla Hubs позволяет создать виртуальную комнату для 25 человек. Вы отправляете ссылку, люди открывают её в браузере и оказываются в 3D-пространстве. Без установки, без регистрации, без VR-шлема.
Платформа построена на Three.js. Средний размер сцены 15-20 мегабайт. Это меньше, чем видео в Instagram.
Decentraland и Spatial используют те же принципы. Один район с 20 зданиями рендерится как единый меш с процедурными текстурами. Вместо того чтобы хранить каждый кирпич отдельно, хранится формула, которая генерирует кирпичи на GPU.
Экономия памяти 80%. Скорость загрузки в четыре раза выше.
Фундамент метавселенной это не железо будущего. Это математика и оптимизация, которые работают на устройствах, что уже лежат в вашем кармане.
Виртуальные миры перестали требовать специального оборудования. Они стали такими же доступными, как веб-страницы. Потому что по сути они и есть веб-страницы. Просто трёхмерные.
Барьер между реальным и виртуальным стирается не в момент, когда вы надеваете шлем. Он стирается в момент, когда вы открываете ссылку и оказываетесь в другом мире.
Когда AI научился понимать пространство
Пока все обсуждали ChatGPT, произошло кое-что менее заметное, но более странное.
Искусственный интеллект научился думать в трёх измерениях.
В 2023 году OpenAI выпустил модель Shap-E. Вы пишете текст: "деревянный стул в скандинавском стиле". Модель генерирует 3D-объект за 13 секунд. На обычном MacBook M2. Без облачных серверов.
Результат — готовый меш с текстурами, который можно сразу загрузить в Three.js.
Это работает через vector embeddings. Технология переводит форму объекта в массив из 512 чисел. Два разных стула будут иметь близкие векторы, даже если выглядят по-разному. Косинусное сходство 0.87.
AI понимает не пиксели. Он понимает пространственные отношения. Что "ножка стула" это вертикальный цилиндр, который поддерживает горизонтальную плоскость. Что "спинка" это плоскость под углом, прикреплённая к задней части сиденья.
Модель не рисует стул. Она понимает концепцию стула и материализует её в геометрию.
Stable Diffusion теперь работает локально на MacBook M1 Pro. Генерирует текстуры 512 на 512 пикселей за восемь секунд. Раньше для этого нужны были облачные GPU за 50 долларов в час.
Вы создаёте 3D-модель дома в Three.js. Пишете промпт: "кирпичная стена с плющом, вечернее освещение". Получаете текстуру. Применяете к модели. Дом оживает.
Весь процесс занимает минуту. Происходит на вашем ноутбуке. Без интернета.
Граница между "создать" и "сгенерировать" размывается. Вы не моделируете каждый кирпич вручную. Вы описываете намерение, AI материализует детали.
Это не заменяет мастерство. Это меняет уровень, на котором работает мастерство. Раньше художник думал о пикселях. Теперь думает о концепциях.
Инструменты, которые казались фантастикой, лежат в вашем ноутбуке. Будущее наступило быстрее, чем мы ожидали. И тише, чем мы заметили.
Барьер входа рухнул, но мастерство осталось
Shadertoy содержит 80 000 шейдеров, созданных сообществом.
Вы открываете любой, видите код, меняете одно число, нажимаете Enter. Результат обновляется мгновенно. Можете сохранить свою версию. Можете поделиться ссылкой.
Весь процесс занимает три секунды. Не нужно ничего устанавливать. Не нужно настраивать окружение. Открыли браузер, начали экспериментировать.
Курс Three.js Journey прошли 47 000 разработчиков. Это больше, чем студентов в крупном университете.
Но в официальную галерею featured projects попали только 200 работ.
Разница не в доступе к инструментам. Разница в понимании.
Простой шейдер огня использует 15 строк кода. Берёт шум Перлина, добавляет оранжевый градиент, двигает вверх. Результат выглядит как оранжевое облако. Технически это огонь. Эмоционально это ничто.
Продвинутый шейдер огня использует 80 строк. Применяет fractal brownian motion — многослойный шум с разными частотами. Добавляет турбулентность через curl noise. Смешивает несколько цветовых градиентов в зависимости от температуры. Искажает форму через векторные поля.
Результат выглядит как настоящее пламя. Вы чувствуете жар. Видите, как языки пламени облизывают воздух.
Разница в 65 строк кода. Разница в годах понимания того, как свет ведёт себя в реальности и как обмануть глаз, чтобы он поверил в иллюзию.
Инструменты стали доступны всем. Но создание чего-то, что заставляет людей остановиться и смотреть, всё ещё требует мастерства.
Математика. Чувство композиции. Понимание того, как цвет влияет на эмоцию. Терпение экспериментировать с сотней вариантов, пока не найдёшь тот единственный, который работает.
Это не барьер. Это путь. Интересный, полный открытий путь.
Дверь открыта. Дорога видна. Остаётся сделать первый шаг.
Язык света и геометрии
Через десять лет дети будут удивляться, что когда-то 3D-графика требовала специальных программ и мощных компьютеров.
Они откроют браузер и создадут целый мир за час. Для них это будет так же естественно, как для нас написать текст или нарисовать картинку в Paint.
А мы живём в момент перехода. Когда технологии только становятся доступными. Когда большинство ещё не знает, что это возможно.
Вы можете быть среди первых, кто научился говорить на языке света и геометрии. Кто понял, что видеокарта это не просто железка для игр, а инструмент для материализации идей.
Шейдеры, частицы, процедурная генерация, AI-ассистенты — всё это уже здесь. Работает на вашем ноутбуке. Ждёт, когда вы откроете редактор кода.
Вопрос не в том, возможно ли это. Вопрос в том, что вы с этим сделаете.
---
То, что вы узнали здесь сегодня, массовые медиа будут обсуждать через год-два. Если вообще будут. Подписывайтесь на мой НОВЫЙ канал — здесь идеи, которые меняют подход к работе, появляются раньше, чем становятся трендами.