Карты направленного смещения в THREE.js? - PullRequest
Новая
       55

Карты направленного смещения в THREE.js?

0 голосов
/ 18 декабря 2018

Я в основном следую этому примеру Codrops , чтобы добавить эффект карты смещения для моего сайта.Однако я хочу сделать это слайд-шоу с указанием направления, например, нажав «Далее», карта смещения переместится вправо и переместится на изображение, и наоборот для нажатия «предыдущий».Ниже приведен код шейдера:

Фрагмент шейдера: 

varying vec2 vUv;

uniform sampler2D texture1;
uniform sampler2D texture2;
uniform sampler2D disp;

uniform float dispFactor;
uniform float effectFactor;

void main() {

    vec4 disp = texture2D(disp, vUv);
    vec2 distortedPosition1 = vec2(uv.x + dispFactor * (disp.r*effectFactor), uv.y);
    vec2 distortedPosition2 = vec2(uv.x - (1.0 - dispFactor) * (disp.r*effectFactor), uv.y);

    vec4 _texture1 = texture2D(texture1, distortedPosition1);
    vec4 _texture2 = texture2D(texture2, distortedPosition2);

    vec4 finalTexture = mix(_texture1, _texture2, dispFactor);

    gl_FragColor = finalTexture;
}

Прямо сейчас я могу получить только направление чередования вправо / влево.Для этого я отслеживаю текущую текстуру, которую я показываю на слайд-шоу.Для перехода я установил другую равномерную текстуру (texture2, если отображается texture1 и наоборот), а затем переключаю dispFactor назад и вперед между 0 и 1.Поэтому, если я продолжу нажимать «Далее», анимация будет смахивать вправо, влево, вправо, влево и так далее.

Я пытаюсь обернуть голову вокруг этого и найти способ ввести направление, но я думаю, что именно здесь я достиг предела своих знаний Three.js.

...