Тестирование 3D графики в современных браузерах
При просмотре тестовой страницы трафик около 2Мбайт без учёта gzip. Тестовая страница с 3D-объектами
Выбор средств и начало работы
Потребовалось селать сервис для цветового подбора покупаемых стройматериалов, мебели и т.д. Что делать и как быть?
Необязательно ограничиваться привычным интернет-сайтом, можно без проблем сделать и десктопное приложение, используя Lazarus и Chromium (см. Lazarus fpCEF3 - приложение с браузером).
После непродолжительного поиска, решил остановиться на ThreeJS, оказалось не так сложно, как думал, никто-же не заставляет знать матан, достаточно использовать уже написанные умными людьми функции 3d-библиотеки. Преклоняюсь перед профессионализмом этих людей, огромное им Спасибо.
Но и тут сразу выявились некоторые проблемы, требующие решения.
- 1. ThreeJS подгружает модели и текстуры через XMLHttpRequest - пришлось править исходный код библиотеки в некоторых местах, чтобы обеспечить загрузку моделей и текстур только в виде передаваемых как параметры функций текстовых строк (base64 для текстур, JSON для моделей).
Наладить обмен текстовыми блоками данных с JavaScript на веб-странице можно как угодно, в том числе с помощью сервера. Считаю это самым правильным решением, дело 3D библиотеки - моделировать изображение, а уж как что подгрузить и откуда, мне лучше знать :) - 2. Где брать модели? Их надо рисовать, плюс импортировать в виде JSON.
После некоторых поисков остановился на Blender, довольно удобный 3D-редактор, с возможностью экспортировать в формат TrheeJS (при скачивании ThreeJS там есть аддоны для Blender для экспорта).
В итоге потратил больше времени на обучение работе с Blender, разные вопросы, связанные с правильным созданием и экспортом моделей (модель обязательно должна иметь массив faceVertexUvs - для наложения текстур, иначе можно будет менять только цвет).
Русская документация Blender , а скачать программу можно отсюда: https://www.blender.org/download/
Скачивать лучше ZIP-архив (без установки), экспорт в JSON для ThreeJS настраивается копированием некоторых файлов из комплекта ThreeJS.
Тестовая 3D страница
Как обычно, набросал тестовую страницу для тестирования 3D графики в разных браузерах. Тестовая страница с трафиком - примерно 2 Мбайта, их сервер сжимает в gzip, если клиент не против. Всё это дело одинаково работает и локально, на любом компе, так что можно спокойно сохранить все файлы себе на компьютер.
Хочу сообщить, что при поиске готовых моделей, крайне редко попадаются пригодные для загрузки в браузер «лёгкие» модели, почти все предназначены для специализированных графических программ. Поэтому так или иначе, нужно работать с 3D - редактором, а так же оптимизировать везде где можно - разумно уменьшать количество полигонов, при работе многократно клонировать исходные JSON-объекты с небольшими изменениями и т.д.
На тестовой странице примерно около 1 Мб исходников текстур и моделей - ThreeJS шевелится отлично (его исходник тоже около 1 Мб - это форк и он не сжат). Визуально, по отзывчивости и плавности страницы, выигрывают браузер Chrome и веб-движок Chromium, IE11 и FireFox могут подтормаживать, в зависимости от нагрузки. Памяти расходуется относительно мало, по сравнению с "современными" сайтами, которые съедают иногда до 1Гб и более.
Конечно, реалистично выглядящие объекты требуют более навороченных моделей и текстур, поэтому нужно как-то соблюдать компромисс между реалистичностью и комфортом работы. Для тестовой страницы выбраны самые лёгкие модели, которые удалось найти, одну пришлось самому делать.
Это первая страница, в будущем, возможно, будут появляться более нагруженные объектами тестовые страницы, чтобы можно было наблюдать за комфортностью работы браузеров.
При просмотре тестовой страницы трафик около 2Мбайт без учёта gzip. Тестовая страница с 3D-объектами
Уменьшение нагрузки на процессор
Как известно, 3D-изображение рендерится через вызовы requestAnimationFrame()
Но если нет анимации, то постоянные вызовы renderer.render(scene, camera) создают неслабую нагрузку на процессор.
Вызов рендеринга сцены необходим только в случае пользовательских действий (поворот, масштабирование и т.д.). Поэтому нужно завести переменную - флаг (или счётчик) и повесить обработчики на события mousemove и wheel (для Chromium и браузера Chrome - mousewheel - но это детали тестовой страницы). Обработчики вызывают функцию, которая обнуляет флаг (счётчик). Соответственно, новый рендеринг сцены происходит только при нулевом флаге (счётчике). Можно делать рендеринг реже с помощью чётных/нечётных значений счётчика и т.д.
Если оптимизировать вызовы рендеринга сцены, то можно загружать довольно объёмные и реалистичные модели - памяти потребляется относительно мало, при добавлении моделей рост занимаемой памяти небольшой, зато проблема в быстром росте нагрузки на процессор.
Для текущей тестовой страницы, в таблицах ниже приведены примерные характеристики загрузки процессора и используемой памяти на моём рабочем компьютере (4х ядерный процессор 3Ггц, встроенная графика Radeon HD 4250). Обращаю внимание, что веб-движок Chromium, используемый из десктопного приложения, часто нагружает процессор в 1.5 раза меньше, чем браузер Chrome, да и памяти потребляет меньше.
Данные ниже соответствуют последним версиям браузеров на период тестирования - Июнь 2016г.
Таблица 1. До оптимизации - безостановочный рендеринг через requestAnimationFrame
Браузер | При старте | При загрузке тестовой 3d-страницы | |
---|---|---|---|
Память | Память | Процессор (4 x 25%) | |
IE 11 | 50 Мб | 140 Мб | 70-80 % |
FireFox | 140 Мб | 200 Мб | 25-30 % |
Chrome | 150 Мб | 220 Мб | 25-30 % |
программа (exe-файл) + fpCEF3 (Chromium) | 50 Мб | 140 Мб | 10-30 % |
Таблица 2. После оптимизации - рендеринг через requestAnimationFrame только при действиях пользователя
Браузер | Нагрузка на процессор при дествиях пользователя | ||
---|---|---|---|
нет | вялые | активные (бешеные) | |
IE 11 | 0 | 10-60 % | 70 - 80 % (80 %) |
FireFox | 0 | 5-15 % | 20-25 % (30 %) |
Chrome | 0 | 7-20 % | 20-30 % (40 %) |
программа (exe-файл) + fpCEF3 (Chromium) | 0 | 7-10 % | 15-25 % (30 %) |
Вялые действия - как правило прокрутка колеса мыши. Максимальная загрузка 1 ядра равна 25%
При перемещении HTML-окон с выбором текстур и цветов на тестовой странице, все браузеры (кроме Chrome и Chromium) увеличивали нагрузку на процессор, поэтому при перемещении окон за заголовок, или изменении их размера, рендеринг сцены тоже отключается. Это особенно благотворно влияет на IE 11, так же и FireFox меньше грузит процессор. Отзывчивость страницы соответственно возрастает.
Это показывает важность оптимизации абсолютно всех объектов и стилей на любой веб-странице. Хорошо, если это получается сделать.
Июнь 2016г.