DevLog: WebGL Performance

Оптимизация WebGL для мобильных устройств

Как мы снизили нагрузку на GPU на 40% в TexelKit, сохранив фотореализм PBR-материалов. Технический разбор архитектуры рендеринга для люксовых шоурумов.

Алексей Волков, Lead Graphics Engineer

Время чтения: 6 мин

Уменьшение полигонажа без потери качества

В индустрии люксовых брендов визуальная точность — это не просто требование, а стандарт. Однако мобильные GPU (особенно в устройствах 3-летней давности) не способны тянуть сцены с миллионами полигонов при 60 FPS.

Наш подход к ретопологии в TexelKit базируется на Adaptive Mesh Simplification. Мы не просто удаляем треугольники. Алгоритм анализирует кривизну поверхности (curvature analysis) и сохраняет геометрию только там, где это критично для восприятия формы — например, на краях футляра для часов или рельефе бархатной обивки.

// TexelKit Optimization Logic
const mesh = scene.getObjectByName('Luxury_Watch_Case');
if (isMobileDevice()) {
  mesh.geometry = mesh.geometry.mergeVertices();
  mesh.geometry = simplifyGeometry(mesh.geometry, {
    threshold: 0.02, // preserves 98% visual fidelity
    iterations: 3
  });
}
          

Пример логики упрощения меша перед рендером. Порог чувствительности 0.02 позволяет сократить количество вершин на 35-45%, не создавая видимых артефактов на кромках металла.

Умная подгрузка текстур (Level of Detail)

Текстуры высокого разрешения (4K/8K) — главный «убийца» производительности в WebGL. Загрузка 4096x4096 текстур Normal Map и Roughness Map на каждое устройство приводит к мгновенному исчербанию памяти (OOM - Out of Memory) на мобильных.

TexelKit внедряет систему Dynamic Texture Streaming. Мы не загружаем максимальное разрешение сразу.

Pass 1 (0-500ms): Загружается базовый цвет (Albedo) в 1024px. Пользователь уже видит объект.
Pass 2 (500-1500ms): Подтягиваются карты материалов (Roughness/Metalness) в 2048px. Появляется «материальность».
Pass 3 (On Demand): 4K текстуры подгружаются только при зуме (Zoom Level > 2.0).

Это создает иллюзию мгновенной загрузки тяжелого контента, что критично для удержания аудитории премиум-сегмента, которая не готова ждать более 2 секунд.

Кэширование и скорость загрузки

Даже с идеальной оптимизацией 3D-сцена весит данные. Для TexelKit мы настроили агрессивную стратегию кэширования через Service Workers, специфичную для ассетов.

Мы разделяем кэш на два уровня: Static Assets (геометрия, которая не меняется часто) и Dynamic Content (текстуры конкретной коллекции сезона).

Стратегия "Cache-First" для геометрии

При повторном посещении шоурума, браузер запрашивает у Service Worker геометрию. Если она есть в кэше — сцена рендерится мгновенно, без обращения к CDN. Обновление геометрии происходит только при изменении версии модели (ETag check).

-45% Размер бандла

60 FPS На iPhone 11

0.8s Time to First Frame

32MB Пик памяти (RAM)

Технические вопросы

Вопросы от разработчиков

Поддерживаете ли вы WebGPU?

Да, экспериментальная поддержка WebGPU включена в билде v3.4. Это позволяет использовать вычислительные шейдеры (Compute Shaders) для еще более сложной симуляции тканей.

Как работает сжатие текстур?

Мы автоматически конвертируем текстуры в форматы ASTC (для Android) и PVRTC (для iOS) на стороне CDN (CloudFront) перед доставкой клиенту.

Можно ли использовать собственные шейдеры?

На тарифе "Enterprise" доступен доступ к редактору GLSL. Однако мы рекомендуем использовать наши готовые пресеты PBR, так как они гарантированно оптимизированы под мобильные чипсеты.

Интегрируйте TexelKit в ваш стек

Получите доступ к документации API и примерам кода на GitHub.

Читать документацию Попробовать песочницу