Тестирование 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г.