Лучшие практики для Playcanvas

Vasyl Lukianenko
Vasyl Lukianenko
3D Artist and Technical Author

Рекомендации работы с Playcanvas

За долгое время работы в Playcanvas и работы в команде, мы собрали лучшие практики, которые применяем в каждом нашем проекте.

Наименование объектов

Правильные имена это путь от хаоса к порядку.
Рекомендуем соблюдать следующие правила в названиях:

Asset Type

Prefix

Example

Static Mesh

SM_

SM_Floor

Dynamic Mesh

DM_

DM_Fish

Materials

M_

M_Roof_Rust

Textures

T_

T_Brick_D

Sounds

S_

S_Swirl

Fonts

Font_

Font_Raleway

Для всех текстур необходимо добавлять постфикс в имени.

Например: 
T_Texture_Name_N
T_Texture_Name_AO

Texture Type

Postfix

Example

Ambient Occlusion

_AO

T_Wall_AO

Diffuse

_D

T_Concrete_D

Metalness

_M

T_Door_Handle_M

Glossiness

_G

T_Paint_G

Roughness

_R

T_Toy_R

Emissive

_E

T_Pendant_Spot_E

Normal

_N

T_Barelief_N

Light Map

_LM

T_House_LM

Важно! 
В названиях не использовать пробелы. Заменяйте пробелы на нижнее подчеркивание “_”.

Наименование материалов

Рассмотрим пример для SM_Car_03, у которого присутствуют 3 ID.

В 3Ds Max мы можем называть материалы как угодно, но для Playcanvas правильный нейминг является обязательным условием.

Например:
M_Car_03_0
M_Car_03_1
M_Car_03_2

Идентификатор в конце название показывает порядок Id в Multimaterial в 3Ds Max.

Экспорт объектов

Для экспорта объектов из 3Ds Max необходимо использовать только FBX формат.

Настройки экспорта приведены ниже.

export from 3dsmax fbx to playcanvas settings
Loading...

Импорт в Playcanvas

Импорт моделей осуществляется обычным перетаскиванием файлов FBX на панель Assets.

После импорта будут автоматически созданы *.glb файлы, которые мы будем в дальнейшем использовать в нашей работе.

Важно! 
Удаление всех FBX файлов из Assets необходимо производить только в самом конце проекта!

Структура папок

📁 Mesh - папка для объектов. Необходимо создать отдельную папку для каждого FBX файла.

Например:
SM_Floor_01 (папка)
SM_Walls (папка)
SM_Kitchen_Appliciance_01 (папка)
SM_Sofa_01 (папка)

Такие папки могут содержать собственные уникальные текстуры и материалы, которые относятся к конкретному FBX.

📁  Textures - папка с различными текстурами.

📁 Cubemap - папка для  картинок и материалов cubemap.

📁 Scripts - папка для скриптов.

Оптимизация текстур

Все текстуры должны строго соответствовать размерам и быть кратными 2.

Например:
4096x4096
2048x2048
1024x1024
512x512
256x256

Не забывайте применять компрессию когда сохраняете картинки в Photoshop.

Используйте File → Save for Web и устанавливайте качество на 90%.

Рекомендую также использоваться JPEG Optimize утилиту, которая позволяет сжимать картинки в несколько раз без потери качества.

Скачать JPEG Optimize и подробная инструкция доступна подписчикам Patreon.

Patreon

Также можно пользоваться встроенными возможностями Playcanvas и использовать BASIS компрессию в инспекторе ассетов.

Прозрачность

Для того чтобы прозрачность отображалась правильно на всех устройствах вы должны использовать черно-белую карту.

black white map opacity for playcanvas
Loading...

Cubemap

Cubemap — это особый тип текстурных ассетов. Они формируются из 6 текстурных ресурсов, где каждая текстура представляет собой грань куба.

Для конвертации обычной 360° панорамы в cubemap воспользуйтесь сервисом:

https://matheowis.github.io/HDRI-to-CubeMap/
PlayCanvas Developer Resources
PlayCanvas Tutorials
3D Ground Playcanvas Articles

Редактирование статьи

Автор оставляет за собой право редактировать и дополнять статью по мере необходимости. 
Чтобы не пропустить обновления, подписывайтесь на Patreon!

Patreon

FAQ

1. О чём эта статья?
Статья посвящена лучшим практикам работы с PlayCanvas и рекомендациям, которые помогают создавать более быстрые, стабильные и удобные в поддержке веб-3D проекты.
2. Что такое PlayCanvas?
PlayCanvas — это облачный движок для создания интерактивной 3D-графики, конфигураторов, веб-приложений, игр и визуализаций, работающих прямо в браузере.
3. Почему важно следовать Best Practices?
Правильная организация проекта помогает улучшить производительность, уменьшить количество ошибок и упростить дальнейшую поддержку приложения.
4. Какие преимущества даёт оптимизация в PlayCanvas?
Оптимизация позволяет ускорить загрузку сцены, снизить потребление памяти и обеспечить более стабильную работу на разных устройствах.
5. Нужно ли оптимизировать 3D-модели перед импортом?
Да. Чем лучше подготовлены модели, тем быстрее будет работать проект и тем меньше ресурсов потребуется пользователям.
6. Важна ли оптимизация текстур?
Да. Текстуры часто занимают значительную часть памяти и напрямую влияют на скорость загрузки сцены.
7. Следует ли использовать сжатие ресурсов?
Да. Сжатие моделей, текстур и других файлов помогает уменьшить размер проекта и ускорить его загрузку через интернет.
8. Как влияет количество объектов в сцене на производительность?
Большое количество объектов может увеличивать нагрузку на процессор и видеокарту, поэтому сцены желательно делать максимально оптимизированными.
9. Нужно ли использовать LOD-системы?
Да. Level of Detail позволяет отображать менее детализированные версии объектов на большом расстоянии и повышать производительность.
10. Важно ли уменьшать количество материалов?
Да. Использование меньшего количества материалов и текстурных наборов помогает сократить количество draw calls.
11. Что такое draw calls и почему они важны?
Draw calls — это команды от процессора к видеокарте на отрисовку объектов. Их большое количество может существенно снижать производительность.
12. Нужно ли тестировать проект на мобильных устройствах?
Да. Даже если проект создаётся для компьютеров, проверка на мобильных устройствах помогает выявить потенциальные проблемы производительности.
13. Влияет ли качество освещения на скорость работы?
Да. Сложное динамическое освещение может значительно увеличивать нагрузку на систему.
14. Следует ли использовать систему контроля версий?
Да. Контроль версий помогает безопасно работать над проектом, отслеживать изменения и восстанавливать предыдущие версии при необходимости.
15. Полезны ли профилирование и анализ производительности?
Да. Регулярный анализ производительности помогает находить узкие места и своевременно устранять проблемы.
16. Для кого будут полезны эти рекомендации?
Для разработчиков PlayCanvas, технических художников, 3D-художников, веб-разработчиков и всех, кто создаёт интерактивные 3D-приложения для браузера.
Vasyl Lukianenko
Vasyl Lukianenko
3D Artist and Technical Author
Vasyl Lukianenko is a 3D artist and technical author focused on practical workflows, optimization, and production-ready techniques. He publishes tutorials, courses, and tools to help artists work faster and get cleaner results.
{{commentsMsg}}
  

Никто не оставил комментариев
{{comment.lastname}} {{comment.name}} {{comment.date}}
{{comment.text}}
Sponsored content