WebGL и 3D-графика в России: тренды 2025 года, вызовы импортозамещения и новый уровень реализма

WebGL стал полноценным современным цифровым искусством. Мы можем рассматривать трехмерные детализированные объекты, погружаться в качественную анимацию, взаимодействовать с ней – и все это не покидая страниц браузера. Но как создаются такие сайты и что стоит за эстетичной и функциональной графикой? О технических решениях, трендах и состоянии передового веб-дизайна говорим с директором российской ИТ-компании «Мэйк» Андреем Титаевым. 

Потеря зарубежных библиотек  

Уход международных разработок и обновлений сильно ударил по специалистам и замедлил развитие рынка. Российские библиотеки для рендеринга созданы, но до уровня зарубежных сервисов они пока не дотягивают. Поэтому нехватка прежних технологий все еще критична, объясняет Андрей Титаев. 

–  Стандартами так и остаются Three.js и Babylon.js (ред.: одни из крупнейших мировых библиотек JavaScript), и уйти от этого пока нет никакой возможности. Существуют российские библиотеки для работы с WebGL, но это, скорее, нишевые проекты, такие как 2gl от 2gis. Поэтому и используются уже готовые open-source решения, – подчеркивает руководитель компании. 

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

Сайт для Роскосмоса и «ускорение» моделей 

Главный вызов WebGL-разработки – производительность. Браузерные 3D-сцены обычно «тяжелые» и могут тормозить даже на хороших устройствах. Так, чтобы запустить новый мультиязычный сайт для Роскосмоса с трехмерными космическими аппаратами, специалистам «Мэйк» потребовались 3 уровня оптимизации. Главный закон здесь: чем крупнее и детализированнее модель, тем сложнее и затратнее внедрить ее в проект. Чтобы элемент из множества полигонов и текстур работал исправно, приходится бороться за каждый килобайт веса. 

– Оптимизация проходит по трем уровням: уровень дизайна и проектирования; уровень моделинга и создания сцены; уровень фронтенд-разработки. Главным становится первый уровень, на котором дизайнер, придумывая сцену, заранее планирует, сколько сторон модели будут отображаться в сцене. Если в сцене участвуют только три из четырех граней, то четвёртая не моделируется вовсе. Так вес модели может быть сокращен в разы, – объясняет Титаев. 

Как объясняют разработчики, технология работа с WebGL по принципам близка к геймдеву. Большая часть усилий направлена на отрисовку и анимацию, а остальные части сжимаются на максимум, чтобы устройство пользователя корректно и быстро открывало сайт. Сами 3D-модели облегчаются в геометрии, удаляются «мусорные ключи» анимации, упрощаются шейдеры. 

– После того, как модель и сцена готовы, мы переходим к этапу фронтенд-разработки, на котором также можно облегчать некоторые действия и объекты. Для сайта использовались модели с оптимизированным количеством полигонов. Текстуры оптимизировали по размеру и «запекали» заранее на них освещение и тени. Оптимизировали размеры бандлов, беря только используемые зависимости, чтобы не раздувать объем скриптов, а вместо тяжеловесных готовых решений писали свои небольшие шейдеры и утилиты. 

«Мэйк» удалось создать сайт с плавной и бесшовной навигацией для любого устройства, при этом не потеряв качество реалистичных моделей. Сайт погружает пользователя в космос, где каждая система представлена отдельной трехмерной сценой. Все элементы реагируют на действия и создают эффект погружения без ощутимых прерываний. Специалисты надеются на то, что в ближайшие годы в России смогут сформировать более технологическую и универсальную базу для подобных проектов.

– Нам и в тот момент казалось, что мы на острие технологий. Но нам не хватало опыта понять, что из библиотек сработает, и тратили время на то, чтобы написать/переписать/доработать библиотеки. Сейчас наработки именно под наш пайплайн работают безупречно. Дальше нам надо двигаться в сторону интерактива и большего вовлечения и интеграции WebGL в нарратив сайта. Все, чтобы сайты не становились памятниками былых подвигов, – прогнозируют в компании. 

Тренды генерации и презентация Apple 

На что сегодня способна 3D-графика? Прежде всего, рост мощностей браузерных движков и распространение  формата glTF (.gltf и .glb), который упростил доставку моделей на фронтенд. Благодаря этому, разработчики могут:

– использовать LOD (Levels of Detail) для подбора качества модели в зависимости от устройства;

– подключать постпроцессинг для эффектов, близких к геймдеву;

– связывать 3D-модели с данными и изменять их в реальном времени, например, для инженерных задач или онлайн-обучения.

Пример того, на который уровень вышел фотореализм, – презентация Apple iPhone 17 Pro. В интерактивной модели используется более 70 тысяч треугольников, десятки текстур и сложные шейдеры (clearcoat, iridescence, transmission). 

– На данный момент для меня это очень хорошая работа с использованием всего самого необходимого функционала. Карты бликов, пятна света, и все это силами Three.js. Этот сайт крут тем, что библиотека рендеринга в браузере очень сильно выросла, и помогает без препятствия грузить такой объем геометрии текстур и шейдеров. Выглядит безупречно и быстро – это главное, – дополнили специалисты. 

Сферы использования 3D-графики в вебе выходят далеко за рамки маркетинговых кампаний и промо-сайтов крупных брендов. Это и: 

– картографические сервисы: MapsGL (Google Experiments) – проект, в котором карта, визуализируемая на WebGL, работает плавно, с аппаратным ускорением, превращая веб-карты в богатые визуализации.

– образовательные проекты: Пушкинский музей использует платформу 3D-проектирования экспозиций. Смоделированы залы, размещены экспонаты и учтены источники света, витрины, архитектурные элементы.

– архитектура и девелопмент (интерактивные модели зданий и кварталов): Shapespark – платформа, позволяющая создавать архитектурные прогулки в браузере.

Если заглянуть на 5 лет вперёд, Андрей Титаев прогнозирует рост интерактивности и интеграции 3D-графики с пользовательскими сценариями. Будущее специалисты видят в динамических моделях, которые реагируют на действия пользователя. Развитие WebGL будет напрямую зависеть от аппаратного прогресса: чем мощнее устройства, тем сложнее сцены смогут загружаться в браузере. Одновременно российские команды надеются, что нишевые библиотеки постепенно превратятся в полноценные решения и снизят зависимость от иностранных платформ.

«Мэйк» – российская ИТ-компания, базирующаяся в Москве с филиалами в Кемерово. Специализация – создание и продвижение цифровых продуктов (приложения, сервисы и т.д.) Компания основана в 2012 году в Кемерово специалистом по цифровизации государства и промышленного сектора Андреем Титаевым. Штат Мэйк насчитывает порядка 70 ИТ-специалистов.«Мэйк» аккредитована Минпромсвязи РФ и выступает золотым партнером компании «Битрикс». Помимо работы с юридическими лицами, компания активно сотрудничает с государственными структурами. «Мэйк»  разработала и внедрила такие проекты как конструктор государственных сайтов для Кемеровской области, сайт Правительства ЯНАО и многие другие.