Может ли материал three.js иметь отдельные значения повторения для карты рельефа и карты текстуры?

Я пытаюсь разбить повторение в моей текстуре, применяя карту рельефа, которая повторяется гораздо реже. К сожалению, кажется, что он принимает значение повторения 'landTexture' ниже (64) вместо значения, которое я установил в (1).

landTexture.wrapS = landTexture.wrapT = THREE.RepeatWrapping;
landTexture.repeat.set(64, 64);
bumpTexture.wrapS = bumpTexture.wrapT = THREE.RepeatWrapping;
bumpTexture.repeat.set(1, 1);
var m = new THREE.MeshPhongMaterial({map:landTexture, 
                                     ambient: 0x552811, 
                                     specular: 0x333333, 
                                     shininess: 25, 
                                     bumpMap: bumpTexture, 
                                     bumpScale: 1, 
                                     metal: false });

Если я закомментирую map:landTexture, тогда масштаб карты рельефа равен 1. Могу ли я как-то смешать эти два повторяющихся значения?

Источник

2 ответа

Решение

Нет. Значения смещения и повторения по умолчанию равны одному из них:

// uv repeat and offset setting priorities
//  1. color map
//  2. specular map
//  3. displacement map
//  4. normal map
//  5. bump map
//  5. roughness map
//  5. metalness map
//  6. alpha map
//  7. emissive map

В вашем случае это было бы landTexture Настройки.

Обходной путь должен изменить Ваши текстуры, или создать пользовательский ShaderMaterial,

РЕДАКТИРОВАТЬ: Исключением являются карта освещения и карта окклюзии окружающей среды, каждый из которых использует второй набор UV. Это позволяет другим текстурам иметь более высокую детализацию, чем карта освещения / АО.

three.js r.84

Источник

Да. В последних версиях three.js r90^ имеет API, который можно использовать для изменения поведения встроенных материалов с помощью GLSL.

Это не легко сделать, но был сделан пример:

https://github.com/pailhead/three.js/blob/aa72250835b82f7dde2e8375775a4b039cb719c6/examples/webgl_materials_extended_multiple_uvs.html

https://github.com/mrdoob/three.js/pull/14174

В основном встроенные материалы основаны на шаблонах шейдеров, которые представляют собой просто упорядоченный список #include <some_chunk> заявления.

Некоторые из этих "кусков" содержат код, который выглядит следующим образом

/*...*/ texture2D( foo, vUv ) /*...*/

куда foo является alphaMap,map, specularMap и т.д. Это означает, что поиск текстуры выполняется в этом сэмплере по интерполированному атрибуту uv. Вам не важно, что предшествует этому коду или что следует за ним (это может быть просто точка с запятой) ; или какая-то маска .xy).

Итак, что вы хотите сделать, это применить некоторое смещение или способ, которым Three.js делает это, применить преобразование mat3.

Таким образом, GLSL должен выглядеть следующим образом

texture2D( foo, foo_transform * vUv )

Затем возникает проблема снабжения шейдера этой униформой. В этом примере немного грубой силы сначала компилируется шейдер, а затем выполняется поиск по всему объекту (в противном случае вы должны знать, в каких фрагментах искать этот текстурный поиск).

Это гораздо лучшее решение, чем модификация текстур, и на самом деле должно быть проще, чем написание ShaderMaterial,

Отказ от ответственности - три не на самом деле предназначен для использования, как это, но может быть. Так, например, в то время как каждая карта имеет префикс somethingMap карта альбедо нет, и это просто называется mapесли бы это было albedoMap регулярное выражение в этом примере будет проще.

Источник
Другие вопросы по тегам