Three.js Dexa Map Parallax выглядит «выключенной» / плавание-как мне правильно выровнять глубину с текстурой? ⇐ Javascript

[Anonymous]

Я создаю многослойный эффект параллакса в React + Three.js, где каждая текстура PNG имеет соответствующую карту глубины серого. Сцена рендерирует, и мышиная параллакс работает, но движение выглядит неестественно - почти как карта глубины слегка неправильно зарегистрирована с цветом, вызывая функции «плавать», когда я перемещаю мышь. OrthographicCamera , поэтому слои сохраняют их размер; Parallax происходит от отбора проб глубины в фрагментной шейдере. < /li>
[*] Каждый слой имеет цветную текстуру и карту глубины; Оба являются PNG с одним и тем же аспектом и (насколько я могу судить) одни и те же размеры и выравнивание пикселей. Я разрешаю настройку для перспективы с помощью Texturez и dynemz .

минимальный шейдер (фрагмент):

Код: Выделить всё

uniform sampler2D u_image;
uniform sampler2D u_depth;
uniform vec2 u_mouse;     // normalized [0..1]
uniform float u_strength; // 0.15
uniform float u_texZ;     // per-layer
uniform float u_depthZ;   // per-layer
varying vec2 vUv;

void main() {
float d = texture2D(u_depth, vUv).r;   // grayscale depth
float zFactor = (u_texZ - u_depthZ) * 0.057; // tuning constant
vec2 center = u_mouse;
vec2 disp = (vUv - center) * u_strength * (1.0 - d) * zFactor;
vec2 uv = vUv + disp;
gl_FragColor = texture2D(u_image, uv);
}
< /code>
Полный компонент (React + три) включен ниже для справки. Изгиб или сдвиг тонко, а не сохранять жесткие. Npm). 
[*] Текстуры и карты глубины - PNG, линейная фильтрация.
[*] рендерер: antialias: true 

, альфа: true , srgbencoding не явно установлен. macos). < /li>
< /ul>
вещи, которые я уже проверил /попробовал < /h2>

одинаковое разрешение и аспект < /strong> для карты текстуры и глубины: используется в редакторе изображения. vuv является стандартным [0..1] .
[*] фильтрация [/b]: linearfilter для min/mag; все еще плавает.
[*] режим упаковки : не установлен явно; по умолчанию применяется.
[*] полярность глубины : попробовал d против 1.0 - d ; только изменяет направление, а не «плавать». Эффект меньше, но все еще выглядит смело. Визуально правильная укладка, но артефакт сохраняется. кажется правильным. < /li>
< /ol>
подозрения < /h2>

несоответствие цветового пространства < /strong>: цветовая текстура может быть отобрана в SRGB, глубине в линейной, что приводит к нелинейной глубине. Я не установил рендерер. Метрически согласованная (например, не линеаризованная), вызывая локальный/недостаток. может немного растянуть текстуры по сравнению с их родной сеткой пикселей, раскрывая небольшие ошибки регистрации. />
Какой правильный способ обеспечить совместимость с глубиной < /br /> < /li>
Должен ли я откровенно установить incodings и reps < /press> write: < /p>


Подробнее здесь: https://stackoverflow.com/questions/797 ... align-dept