Поиск

Крайне приятно, когда результаты твоей работы показывают по федеральному каналу :)

Фрагмент здесь: https://www.1tv.ru/shows/dobroe-utro/reportazh/zhkh-eto-celaya-nauka-dobroe-utro-fragment-ot-27-08-2019

По работе снова столкнулся с необходимостью реализации 3D в вебе. Что хорошо - сейчас WebGL довольно развился и появились хорошие фреймворки, что плохо - до сих пор это сильно не дотягивает до Unity3D и подобных движков. Так что если есть возможность выбора - лучше собирать на Unity3D под web - проблем будет гораздо меньше.

Итак, у нас webgl-фреймворки, выбрал A-Frame. В будущем может потребоваться необходимость прикрутить виртуальную реальность, а он это умеет “из коробки”. Есть много компонентов (контроллеры, эффекты и т.п.).

По ходу разработки столкнулся с тем, что стандартные для Unity3D форматы obj и fbx плохо поддерживаются в A-Frame, как выяснилось позже - three.js, babylon.js тоже их не особо поддерживают, например, большинство fbx со сторов подгружались с поехавшими текстурами. После гуглежки выяснилось, что стоит применять формат glTF. В целом этот формат файлов имеет уже вторую версию (2.0) и хорошую поддержку аудитории. Его создавали специально под веб, следовательно сам имеет внутреннюю структуру как JSON и плюс бинарник для материалов и отдельные файлы текстур - jpg, png и т.п. Формат поддерживает текстуры, bump-мэппинг (не сразу получилось это найти), анимацию, свет (но его официально еще поддержки нет, поэтому лучше использовать не внутри модели, а расставлять через A-Frame). ВНИМАНИЕ! Используйте ТОЛЬКО стандартные или физические текстуры (PBR), V-Ray текстуры не отображаются без конвертации в стандартные, а физические имеют максимально возможную поддержку - как раз бампы работают только с ним. Также, можно упаковать это все в один файл - glb.

Вот способ, через который делали модели:

1. В 3dsmax делать модели с физическими или стандартными текстурами.
2. Все текстуры складывать в общую кучу и накладывать в 3dsmax оттуда, чтобы пути были максимально короткие и без “../../..” подобных вещей.
3. Установить плагин для 3dsmax - Babylon.js и экспорт делать в формат glTF через него со включенной конвертацией текстур. Все остальные галки по умолчанию. Директория с файлом и текстурами должна быть одна и та же. Все имена файлов должны быть на английском языке и без пробелов.
4. Объекты-линии делать всегда с модификатором Editable Poly.
5. Не использовать Pro Boolean - с ним текстуры накладываются совсем не так как надо и в итоге потом модель черного цвета.
6. Сохранять каждую модель, с которой возможно взаимодействовать, в отдельный файл с сохранением координат. Т.е. скрываем все, кроме одной двери, экспортируем, скрываем эту дверь, показываем другую, экспортируем и т.п. Остальную сцену можно сохранить целиком. Тут возможен другой вариант - сохранять все в нулевых координатах и расставлять движком - но это будет дольше для разработчика.
7. Использовать размеры текстуры, кратные двум. Можно просто изменить размер (не обрезать, а “resize” обычный). Т.е. если текстура 1000х1000, то ресайзим в 512х512. Если 1025 на 1023, то ресайзим в 1024х512. Если этого не сделаете вы, то это сделает three.js в рунтайме - и это будет заметно.
8. Для физических материалов настраивать металл (metalness) и шероховатости (roughness), чтобы блики от света были более реалистичными.
9. Запекать текстуры (texture baking) необходимо в 3dsmax, A-Frame на сегодняшний день не сделает красивых теней.

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