Workflow

WebGL material workflow

Используйте compact procedural maps и предсказуемые channel settings для Three.js, custom WebGL renderers и browser material previews.

Цель экспорта

Цель: Three.js / custom WebGL
Рекомендуемый путь: GLB для быстрой загрузки или PNG maps для custom shaders
Основной вывод: GLB material или individual PNG maps

Настройка каналов

Используйте sRGB color space для видимой base color texture в Three.js или эквивалентную конверсию в custom shaders.

Сэмплируйте normal maps как data textures и настраивайте normal scale в материале вместо rebake texture.

Roughness и AO держите linear. В Three.js AO также требует UV2 или соответствующей secondary UV обработки.

Включите repeat wrapping для seamless surfaces и задавайте repeat values в коде, чтобы один export подходил разным asset sizes.

GLB используйте для быстрого carrier material. Individual PNG maps используйте, когда renderer сам управляет shader и texture binding.

Назначьте sRGB для color maps и держите roughness, normal, height и AO как linear data textures.

Для seamless surfaces установите wrapS и wrapT в repeat, затем управляйте scale через material repeat values или shader uniforms.

Проверьте resolution, compression и количество channels на целевом устройстве до использования больших map sets в production.

Если AO не виден в Three.js, проверьте, что geometry имеет UV set, требуемый материалом.

Base color, прочитанный как linear, может быть слишком тёмным; data maps как sRGB ломают roughness или normal response.

Browser scenes чувствительны к texture memory. Используйте минимальную resolution, достаточную для camera distance.

Для быстрого material review — да. Для production renderers individual maps часто дают больше контроля над compression, loading и shader inputs.

Да. Установите texture wrapping mode в repeat и управляйте repeat scale на material или texture instance.