distortion slider 2

with Three.js.

horizontal

const fragment = `
varying vec2 vUv;

// images
uniform sampler2D texture1;
uniform sampler2D texture2;
uniform sampler2D disp;

uniform float dispPower; // 0 ~ 1
uniform float intensity;

void main() {
  vec2 uv = vUv;

  vec4 disp = texture2D(disp, uv);
  vec2 dispVec = vec2(disp.x, disp.y);

  // horizontal
  vec2 distPos1 = vec2(uv.x + (dispVec.x * intensity * dispPower), uv.y);
  vec2 distPos2 = vec2(uv.x + (dispVec.x * -(intensity * (1.0 - dispPower))), uv.y);

  vec4 _texture1 = texture2D(texture1, distPos1);
  vec4 _texture2 = texture2D(texture2, distPos2);

  gl_FragColor = mix(_texture1, _texture2, dispPower);
}
`;

new DistortionSlider(this.$refs.slider, {
  images: [
    'https://images.unsplash.com/photo-1548112129-b5cf67e9558d',
    'https://images.unsplash.com/photo-1548106755-5c6bf746ca84',
    'https://images.unsplash.com/photo-1547962041-6d2d7c4bdf6e',
  ],
  texture: '/images/texture/03.jpg',
  deep: .5,
  fragment,
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

vertical

const fragment = `
varying vec2 vUv;

// images
uniform sampler2D texture1;
uniform sampler2D texture2;
uniform sampler2D disp;

uniform float dispPower; // 0 ~ 1
uniform float intensity;

void main() {
  vec2 uv = vUv;

  vec4 disp = texture2D(disp, uv);
  vec2 dispVec = vec2(disp.x, disp.y);

  // vertical
  vec2 distPos1 = vec2(uv.x, uv.y - (dispVec.y * intensity * dispPower));
  vec2 distPos2 = vec2(uv.x, uv.y - (dispVec.y * -(intensity * (1.0 - dispPower))));

  vec4 _texture1 = texture2D(texture1, distPos1);
  vec4 _texture2 = texture2D(texture2, distPos2);

  gl_FragColor = mix(_texture1, _texture2, dispPower);
}
`;

new DistortionSlider(this.$refs.slider, {
  images: [
    'https://images.unsplash.com/photo-1548112129-b5cf67e9558d',
    'https://images.unsplash.com/photo-1548106755-5c6bf746ca84',
    'https://images.unsplash.com/photo-1547962041-6d2d7c4bdf6e',
  ],
  texture: '/images/texture/01.png',
  deep: 10.0,
  fragment,
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38