Привет! Давно не было технических заметок, а тут как раз на проекте было несколько интересных штук.
Уменьшили размер загружаемого мира с ~90мб до ~15мбКак выяснилось, большую часть загружаемого контента составляют анимации и модели в формате glb.
Хоть glb и компактнее его младшего брата gltf, все равно требует дополнительных действий.
Чеклист для оптимизации glb/gltf:- сохраняем gtlf как glb
- заходим
https://gltf.report/ и проверяем вашу модель на наличие больших текстур. Если есть, пробуйте уменьшить разрешение и переведите в webp
- применяем draco/meshopt для оптимизации геометрии.
- если есть анимации, неплохо выполнить resample кадров
- и самое важное: проверьте, что ваш контент раздается через CDN с включенным сжатием. В нашем случае у нас Cloudfront и оказалось, что он не настроен применять gzip/brotli для gltf/glb.(Cloudflare, кстати, делает это автоматически, за что ему респект!)
На примере с файлом анимации, было 25мб, стало - 2мб.
Если нужна автоматизация, очень рекомендую написать скриптик использующий
https://gltf-transform.dev и запускать через nodejs/bun как последний этап сборки проекта.
Чеклист для оптимизации текстур:- уменьшаем разрешение до приемлемого уровня. У нас 512, некоторые текстуры даже 64.
- если позволяет браузерная совместимость, используем webp(или avif)
Для автоматизации посмотрите либу
https://sharp.pixelplumbing.com/Чеклист для оптимизации аудио:- конвертируем wav/mp3 в ogg. Если хотите поддержать девайсы apple, то важно применить libvorbis(opus не поддерживается).
- удаляйте метаданные, иногда там могут лежать большие картинки(да да, например, обложка к альбому)
Автоматизировать пришлось через баш скриптец, но потом переписал на Bun.$ и напрямую вызываю ffmpeg с параметрами.
————————
Давайте завтра соберемся на стрим, как раз повод хороший) Как обычно, в 19:00 по минску/мск. Ссылку оставлю завтра.