75 lines
1.9 KiB
HTML
75 lines
1.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Loader concept</title>
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
|
||
|
|
<link rel="stylesheet" href="./style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- partial:index.partial.html -->
|
||
|
|
<script id="vertexShader" type="x-shader/x-vertex">
|
||
|
|
varying vec2 vUv;
|
||
|
|
void main() {
|
||
|
|
vUv = uv;
|
||
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script id="fragmentShader" type="x-shader/x-fragment">
|
||
|
|
varying vec2 vUv;
|
||
|
|
|
||
|
|
uniform sampler2D texture;
|
||
|
|
uniform sampler2D texture2;
|
||
|
|
uniform sampler2D disp;
|
||
|
|
|
||
|
|
uniform float time;
|
||
|
|
uniform float random;
|
||
|
|
uniform float dispFactor;
|
||
|
|
|
||
|
|
vec2 rotate(vec2 v, float a) {
|
||
|
|
float s = sin(a);
|
||
|
|
float c = cos(a);
|
||
|
|
mat2 m = mat2(c, -s, s, c);
|
||
|
|
return m * v;
|
||
|
|
}
|
||
|
|
|
||
|
|
void main() {
|
||
|
|
|
||
|
|
vec2 uv = vUv;
|
||
|
|
|
||
|
|
vec2 newUV = vec2(uv.x, uv.y);
|
||
|
|
|
||
|
|
newUV -= 0.5;
|
||
|
|
vec2 rotUV = rotate(newUV, random);
|
||
|
|
rotUV += 0.5;
|
||
|
|
|
||
|
|
|
||
|
|
vec4 disp = texture2D(disp, rotUV);
|
||
|
|
|
||
|
|
|
||
|
|
vec2 distortedPosition = vec2(uv.x + dispFactor * (disp.g*0.3), uv.y);
|
||
|
|
vec2 distortedPosition2 = vec2(uv.x - (1.0 - dispFactor) * (disp.g*0.3), uv.y);
|
||
|
|
|
||
|
|
vec4 _texture = texture2D(texture, distortedPosition);
|
||
|
|
vec4 _texture2 = texture2D(texture2, distortedPosition2);
|
||
|
|
|
||
|
|
|
||
|
|
vec2 distortedPosition3 = vec2(uv.x + dispFactor * (disp.g*0.25), uv.y);
|
||
|
|
vec4 _texture3 = texture2D(texture2, distortedPosition3);
|
||
|
|
|
||
|
|
|
||
|
|
vec4 finalTexture = mix(_texture, _texture2, dispFactor);
|
||
|
|
|
||
|
|
vec4 finalTexture2 = mix(_texture, _texture3, dispFactor);
|
||
|
|
|
||
|
|
gl_FragColor = finalTexture * finalTexture2;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<!-- partial -->
|
||
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js'></script>
|
||
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script>
|
||
|
|
<script src="./script.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|