├── .gitignore
├── favicon.ico
├── img
    ├── 1.jpg
    ├── 10.jpg
    ├── 11.jpg
    ├── 12.jpg
    ├── 13.jpg
    ├── 14.jpg
    ├── 15.jpg
    ├── 2.jpg
    ├── 3.jpg
    ├── 4.jpg
    ├── 5.jpg
    ├── 6.jpg
    ├── 7.jpg
    ├── 8.jpg
    └── 9.jpg
├── package.json
├── js
    ├── demo4.js
    ├── demo2.js
    ├── demo3.js
    ├── demo1.js
    ├── demo0.js
    ├── shader
    │   ├── vertexParticles.glsl
    │   ├── fragment.glsl
    │   ├── vertex.glsl
    │   └── vertex1.glsl
    ├── demo2
    │   ├── fragment.glsl
    │   └── vertex.glsl
    ├── demo4
    │   ├── fragment.glsl
    │   └── vertex.glsl
    ├── demo3
    │   ├── fragment.glsl
    │   └── vertex.glsl
    ├── demo0
    │   ├── fragment.glsl
    │   └── vertex.glsl
    ├── demo1
    │   ├── fragment.glsl
    │   └── vertex.glsl
    ├── lib
    │   └── getGeometry.js
    └── app.js
├── LICENSE
├── README.md
├── index1.html
├── index2.html
├── index4.html
├── index3.html
├── index.html
└── css
    └── base.css


/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | .cache/
3 | node_modules/
4 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/HEAD/favicon.ico


--------------------------------------------------------------------------------
/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/HEAD/img/1.jpg


--------------------------------------------------------------------------------
/img/10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/HEAD/img/10.jpg


--------------------------------------------------------------------------------
/img/11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/HEAD/img/11.jpg


--------------------------------------------------------------------------------
/img/12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/HEAD/img/12.jpg


--------------------------------------------------------------------------------
/img/13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/HEAD/img/13.jpg


--------------------------------------------------------------------------------
/img/14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/HEAD/img/14.jpg


--------------------------------------------------------------------------------
/img/15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/HEAD/img/15.jpg


--------------------------------------------------------------------------------
/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/HEAD/img/2.jpg


--------------------------------------------------------------------------------
/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/HEAD/img/3.jpg


--------------------------------------------------------------------------------
/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/HEAD/img/4.jpg


--------------------------------------------------------------------------------
/img/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/HEAD/img/5.jpg


--------------------------------------------------------------------------------
/img/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/HEAD/img/6.jpg


--------------------------------------------------------------------------------
/img/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/HEAD/img/7.jpg


--------------------------------------------------------------------------------
/img/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/HEAD/img/8.jpg


--------------------------------------------------------------------------------
/img/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/PolygonTransitions/HEAD/img/9.jpg


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "devDependencies": {
 3 |     "cssnano": "^4.1.10",
 4 |     "glslify-bundle": "^5.1.1",
 5 |     "glslify-deps": "^1.3.1"
 6 |   },
 7 |   "dependencies": {
 8 |     "dat.gui": "^0.7.7",
 9 |     "gsap": "^3.5.0",
10 |     "simplex-noise": "^2.4.0",
11 |     "three": "^0.119.1",
12 |     "three-orbit-controls": "^82.1.0"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/js/demo4.js:
--------------------------------------------------------------------------------
 1 | import Sketch from './app.js'
 2 | import fragment from "./demo4/fragment.glsl";
 3 | import vertex from "./demo4/vertex.glsl";
 4 | 
 5 | const sketch = new Sketch({
 6 |   dom: document.getElementById('container'),
 7 |   next: document.querySelector('.nav-next'),
 8 |   detail: 100,
 9 |   fragment: fragment,
10 |   vertex: vertex,
11 |   offsettop: .5,
12 | });
13 | 
14 | 


--------------------------------------------------------------------------------
/js/demo2.js:
--------------------------------------------------------------------------------
 1 | import Sketch from './app.js'
 2 | import fragment from "./demo2/fragment.glsl";
 3 | import vertex from "./demo2/vertex.glsl";
 4 | 
 5 | const sketch = new Sketch({
 6 |   dom: document.getElementById('container'),
 7 |   next: document.querySelector('.nav-next'),
 8 |   detail: 100,
 9 |   fragment: fragment,
10 |   vertex: vertex,
11 |   offsettop: 0.4,
12 |   
13 | });
14 | 
15 | 


--------------------------------------------------------------------------------
/js/demo3.js:
--------------------------------------------------------------------------------
 1 | import Sketch from './app.js'
 2 | import fragment from "./demo3/fragment.glsl";
 3 | import vertex from "./demo3/vertex.glsl";
 4 | 
 5 | const sketch = new Sketch({
 6 |   dom: document.getElementById('container'),
 7 |   next: document.querySelector('.nav-next'),
 8 |   detail: 20,
 9 |   fragment: fragment,
10 |   vertex: vertex,
11 |   offsettop: 0.4,
12 |   
13 | });
14 | 
15 | 


--------------------------------------------------------------------------------
/js/demo1.js:
--------------------------------------------------------------------------------
 1 | import Sketch from './app.js'
 2 | import fragment from "./demo1/fragment.glsl";
 3 | import vertex from "./demo1/vertex.glsl";
 4 | const sketch = new Sketch({
 5 |   dom: document.getElementById('container'),
 6 |   next: document.querySelector('.nav-next'),
 7 |   detail: 50,
 8 |   fragment: fragment,
 9 |   vertex: vertex,
10 |   offsettop: 0.9,
11 |   ease: "power2.in"
12 | });
13 | 
14 | 


--------------------------------------------------------------------------------
/js/demo0.js:
--------------------------------------------------------------------------------
 1 | import Sketch from './app.js'
 2 | import fragment from "./demo0/fragment.glsl";
 3 | import vertex from "./demo0/vertex.glsl";
 4 | 
 5 | const sketch = new Sketch({
 6 |   dom: document.getElementById('container'),
 7 |   next: document.querySelector('.nav-next'),
 8 |   detail: 10,
 9 |   duration: 2,
10 |   fragment: fragment,
11 |   vertex: vertex,
12 |   offsettop: 0.,
13 |   ease: "power2.in"
14 | });
15 | 
16 | 


--------------------------------------------------------------------------------
/js/shader/vertexParticles.glsl:
--------------------------------------------------------------------------------
 1 | uniform float time;
 2 | varying vec2 vUv;
 3 | varying vec2 vUv1;
 4 | varying vec4 vPosition;
 5 | 
 6 | uniform sampler2D texture1;
 7 | uniform sampler2D texture2;
 8 | uniform vec2 pixels;
 9 | uniform vec2 uvRate1;
10 | 
11 | void main() {
12 |   vUv = uv;
13 |   vec4 mvPosition = modelViewMatrix * vec4( position, 1. );
14 |   gl_PointSize = 1000. * ( 1. / - mvPosition.z );
15 |   gl_Position = projectionMatrix * mvPosition;
16 | }


--------------------------------------------------------------------------------
/js/shader/fragment.glsl:
--------------------------------------------------------------------------------
 1 | uniform float time;
 2 | uniform float progress;
 3 | uniform sampler2D texture1;
 4 | uniform vec4 resolution;
 5 | varying vec2 vUv;
 6 | varying float vProgress;
 7 | varying float vProgress1;
 8 | float PI = 3.141592653589793238;
 9 | varying vec3 vBary;
10 | void main()	{
11 | 
12 | 	float width =2.5*vProgress1;
13 | 	vec3 d = fwidth(vBary);
14 | 	vec3 s = smoothstep(d * (width + 0.5), d * (width - 0.5), vBary);
15 | 	float alpha = max(max(s.x, s.y), s.z);
16 | 	vec3 color = vec3(alpha);
17 | 
18 | 
19 | 	vec2 newUV = (vUv - vec2(0.5))*resolution.zw + vec2(0.5);
20 | 	vec4 t = texture2D(texture1,newUV);
21 | 	float opa = smoothstep(1.,0.5,vProgress);
22 | 	opa = 1. - vProgress;
23 | 	gl_FragColor = vec4(vUv,0.0,opa);
24 | 	gl_FragColor = vec4(t.rgb + 0.*color*vProgress1,opa);
25 | 	gl_FragColor.rgb = mix(gl_FragColor.rgb,vec3(1.,0.,0.),1. - opa);
26 | 	// gl_FragColor = vec4(color,opa);
27 | }


--------------------------------------------------------------------------------
/js/demo2/fragment.glsl:
--------------------------------------------------------------------------------
 1 | uniform float time;
 2 | uniform float progress;
 3 | uniform sampler2D texture1;
 4 | uniform vec4 resolution;
 5 | varying vec2 vUv;
 6 | varying float vProgress;
 7 | varying float vProgress1;
 8 | float PI = 3.141592653589793238;
 9 | varying vec3 vBary;
10 | void main()	{
11 | 
12 | 	float width =2.5*vProgress1;
13 | 	vec3 d = fwidth(vBary);
14 | 	vec3 s = smoothstep(d * (width + 0.5), d * (width - 0.5), vBary);
15 | 	float alpha = max(max(s.x, s.y), s.z);
16 | 	vec3 color = vec3(alpha);
17 | 
18 | 
19 | 	vec2 newUV = (vUv - vec2(0.5))*resolution.zw + vec2(0.5);
20 | 	vec4 t = texture2D(texture1,newUV);
21 | 	float opa = smoothstep(1.,0.5,vProgress);
22 | 	opa = 1. - vProgress;
23 | 	gl_FragColor = vec4(vUv,0.0,opa);
24 | 	opa = smoothstep(0.5,1.,opa);
25 | 	gl_FragColor = vec4(t.rgb + 1.*color*vProgress1,opa);
26 | 	// gl_FragColor.rgb = mix(gl_FragColor.rgb,vec3(1.,0.,0.),1. - opa);
27 | 	// gl_FragColor = vec4(color,opa);
28 | }


--------------------------------------------------------------------------------
/js/demo4/fragment.glsl:
--------------------------------------------------------------------------------
 1 | uniform float time;
 2 | uniform float progress;
 3 | uniform sampler2D texture1;
 4 | uniform vec4 resolution;
 5 | varying vec2 vUv;
 6 | varying float vProgress;
 7 | varying float vProgress1;
 8 | float PI = 3.141592653589793238;
 9 | varying vec3 vBary;
10 | void main()	{
11 | 
12 | 	float width =2.5*vProgress1;
13 | 	vec3 d = fwidth(vBary);
14 | 	vec3 s = smoothstep(d * (width + 0.5), d * (width - 0.5), vBary);
15 | 	float alpha = max(max(s.x, s.y), s.z);
16 | 	vec3 color = vec3(alpha);
17 | 
18 | 
19 | 	vec2 newUV = (vUv - vec2(0.5))*resolution.zw + vec2(0.5);
20 | 	vec4 t = texture2D(texture1,newUV);
21 | 	float opa = smoothstep(1.,0.5,vProgress);
22 | 	opa = 1. - vProgress;
23 | 	gl_FragColor = vec4(vUv,0.0,opa);
24 | 	opa = smoothstep(0.5,1.,opa);
25 | 	gl_FragColor = vec4(t.rgb + 1.*color*vProgress1,opa);
26 | 	// gl_FragColor.rgb = mix(gl_FragColor.rgb,vec3(1.,0.,0.),1. - opa);
27 | 	// gl_FragColor = vec4(color,opa);
28 | }


--------------------------------------------------------------------------------
/js/demo3/fragment.glsl:
--------------------------------------------------------------------------------
 1 | uniform float time;
 2 | uniform float progress;
 3 | uniform sampler2D texture1;
 4 | uniform vec4 resolution;
 5 | varying vec2 vUv;
 6 | varying float vProgress;
 7 | varying float vProgress1;
 8 | float PI = 3.141592653589793238;
 9 | varying vec3 vBary;
10 | void main()	{
11 | 
12 | 	float width =2.5*vProgress1;
13 | 	vec3 d = fwidth(vBary);
14 | 	vec3 s = smoothstep(d * (width + 0.5), d * (width - 0.5), vBary);
15 | 	float alpha = max(max(s.x, s.y), s.z);
16 | 	vec3 color = vec3(alpha);
17 | 
18 | 
19 | 	vec2 newUV = (vUv - vec2(0.5))*resolution.zw + vec2(0.5);
20 | 	vec4 t = texture2D(texture1,newUV);
21 | 	float opa = smoothstep(1.,0.5,vProgress);
22 | 	opa = 1. - vProgress;
23 | 	gl_FragColor = vec4(vUv,0.0,opa);
24 | 	// opa = smoothstep(0.5,1.,opa);
25 | 	gl_FragColor = vec4(t.rgb + 1.*color*vProgress1,opa);
26 | 	// gl_FragColor.rgb = mix(gl_FragColor.rgb,vec3(1.,0.,0.),1. - opa);
27 | 	// gl_FragColor = vec4(color,opa);
28 | }


--------------------------------------------------------------------------------
/js/demo0/fragment.glsl:
--------------------------------------------------------------------------------
 1 | uniform float time;
 2 | uniform float progress;
 3 | uniform sampler2D texture1;
 4 | uniform vec4 resolution;
 5 | varying vec2 vUv;
 6 | varying float vProgress;
 7 | varying float vProgress1;
 8 | float PI = 3.141592653589793238;
 9 | varying vec3 vBary;
10 | void main()	{
11 | 
12 | 	float width =2.5*vProgress1;
13 | 	vec3 d = fwidth(vBary);
14 | 	vec3 s = smoothstep(d * (width + 0.5), d * (width - 0.5), vBary);
15 | 	float alpha = max(max(s.x, s.y), s.z);
16 | 	vec3 color = vec3(alpha);
17 | 	vec2 newUV = (vUv - vec2(0.5))*resolution.zw + vec2(0.5);
18 | 	// newUV = vUv; 
19 | 	vec4 t = texture2D(texture1,newUV);
20 | 	float opa = smoothstep(1.,0.5,vProgress);
21 | 	opa = 1. - vProgress;
22 | 	gl_FragColor = vec4(vUv,0.0,opa);
23 | 	gl_FragColor = vec4(t.rgb + 1.*color*vProgress1,opa);
24 | 	// gl_FragColor.rgb = mix(gl_FragColor.rgb,vec3(1.,0.,0.),1. - opa);
25 | 	// gl_FragColor = vec4(color,opa);
26 | 	// gl_FragColor = vec4(t.rgb,opa);
27 | }


--------------------------------------------------------------------------------
/js/demo1/fragment.glsl:
--------------------------------------------------------------------------------
 1 | uniform float time;
 2 | uniform float progress;
 3 | uniform sampler2D texture1;
 4 | uniform vec4 resolution;
 5 | varying vec2 vUv;
 6 | varying float vProgress;
 7 | varying float vProgress1;
 8 | float PI = 3.141592653589793238;
 9 | varying vec3 vBary;
10 | void main()	{
11 | 
12 | 	float width =2.5*vProgress1;
13 | 	vec3 d = fwidth(vBary);
14 | 	vec3 s = smoothstep(d * (width + 0.5), d * (width - 0.5), vBary);
15 | 	float alpha = max(max(s.x, s.y), s.z);
16 | 	vec3 color = vec3(alpha);
17 | 
18 | 
19 | 	vec2 newUV = (vUv - vec2(0.5))*resolution.zw + vec2(0.5);
20 | 	// vec2 newUV = (vUv - vec2(0.5))*koef + vec2(0.5);
21 | 	vec4 t = texture2D(texture1,newUV);
22 | 	float opa = smoothstep(1.,0.5,vProgress);
23 | 	opa = 1. - vProgress;
24 | 	gl_FragColor = vec4(vUv,0.0,opa);
25 | 	gl_FragColor = vec4(t.rgb + 0.*color*vProgress1,opa);
26 | 	gl_FragColor.rgb = mix(gl_FragColor.rgb,vec3(1.,0.,0.),1. - opa);
27 | 	// gl_FragColor = vec4(color,opa);
28 | 	gl_FragColor = vec4(t.rgb,opa);
29 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2009 - 2020 [Codrops](https://tympanus.net/codrops)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Experimental Polygon Transitions with WebGL
 2 | 
 3 | Some experimental animations using triangles for image transitions with WebGL.
 4 | 
 5 | ![Triangles](https://tympanus.net/codrops/wp-content/uploads/2020/08/Triangles_Featured.jpg)
 6 | 
 7 | [Article on Codrops](https://tympanus.net/codrops/?p=50876)
 8 | 
 9 | [Demo](https://github.com/akella/PolygonTransitions/archive/master.zip)
10 | 
11 | 
12 | ## Installation
13 | 
14 | To run demo you will need [Parcel](https://parceljs.org/), either install it
15 | ```
16 | npm install -g parcel-bundler
17 | parcel index.html
18 | ```
19 | Or run without installation:
20 | ```
21 | npx parcel index.html
22 | ```
23 | After that demo should be available on http://localhost:1234.
24 | 
25 | ## Misc
26 | 
27 | Follow Yuriy: [Twitter](http://twitter.com/akella), [GitHub](https://github.com/akella) 
28 | 
29 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/)
30 | 
31 | ## License
32 | [MIT](LICENSE)
33 | 
34 | Made with :blue_heart: by [Codrops](http://www.codrops.com)
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 


--------------------------------------------------------------------------------
/js/shader/vertex.glsl:
--------------------------------------------------------------------------------
 1 | uniform float time;
 2 | uniform float progress;
 3 | varying vec2 vUv;
 4 | varying vec4 vPosition;
 5 | varying float vProgress;
 6 | varying float vProgress1;
 7 | uniform vec2 pixels;
 8 | 
 9 | attribute float offset;
10 | attribute vec3 centroid1;
11 | attribute vec3 bary;
12 | varying vec3 vBary;
13 | 
14 | mat4 rotationMatrix(vec3 axis, float angle) {
15 |     axis = normalize(axis);
16 |     float s = sin(angle);
17 |     float c = cos(angle);
18 |     float oc = 1.0 - c;
19 |     
20 |     return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,
21 |                 oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,
22 |                 oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,
23 |                 0.0,                                0.0,                                0.0,                                1.0);
24 | }
25 | 
26 | vec3 rotate(vec3 v, vec3 axis, float angle) {
27 | 	mat4 m = rotationMatrix(axis, angle);
28 | 	return (m * vec4(v, 1.0)).xyz;
29 | }
30 | 
31 | float easeInOutQuint(float t){
32 |   return t < 0.5 ? 16.0 * t * t * t * t * t : 1.0 + 16.0 * (--t) * t * t * t * t;
33 | }
34 | float easeOutQuint(float t){
35 |   return 1. + (--t) * t * t * t * t;
36 | }
37 | float easeOut(float t){
38 |   return  t * t * t;
39 | }
40 | 
41 | void main() {
42 |   float PI = 3.141592653589793238;
43 |   vUv = uv;
44 |   vBary = bary;
45 | 
46 |   vec3 newpos = position;
47 |   
48 |   float o = 1. - offset;
49 |   float prog = clamp( (progress - o*0.99) /0.01,0.,1.);
50 |   vProgress =  prog;
51 |   vProgress1 =  clamp( (progress - (o - 0.1)*0.9) /0.1,0.,1.);
52 |   // prog = easeInOutQuint(prog);
53 |   newpos = rotate(newpos - centroid1, vec3(1.,0.,0.),-prog*PI) + centroid1 + vec3(0.,-1.,0.)*prog*0.;
54 |   // newpos.y += 0.4*sin(time + offset);
55 |   gl_Position = projectionMatrix * modelViewMatrix * vec4( newpos, 1.0 );
56 | }


--------------------------------------------------------------------------------
/js/shader/vertex1.glsl:
--------------------------------------------------------------------------------
 1 | uniform float time;
 2 | uniform float progress;
 3 | varying vec2 vUv;
 4 | varying vec4 vPosition;
 5 | varying float vProgress;
 6 | varying float vProgress1;
 7 | uniform vec2 pixels;
 8 | 
 9 | attribute float offset;
10 | attribute vec3 centroid1;
11 | attribute vec3 bary;
12 | varying vec3 vBary;
13 | 
14 | mat4 rotationMatrix(vec3 axis, float angle) {
15 |     axis = normalize(axis);
16 |     float s = sin(angle);
17 |     float c = cos(angle);
18 |     float oc = 1.0 - c;
19 |     
20 |     return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,
21 |                 oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,
22 |                 oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,
23 |                 0.0,                                0.0,                                0.0,                                1.0);
24 | }
25 | 
26 | vec3 rotate(vec3 v, vec3 axis, float angle) {
27 | 	mat4 m = rotationMatrix(axis, angle);
28 | 	return (m * vec4(v, 1.0)).xyz;
29 | }
30 | 
31 | float easeInOutQuint(float t){
32 |   return t < 0.5 ? 16.0 * t * t * t * t * t : 1.0 + 16.0 * (--t) * t * t * t * t;
33 | }
34 | float easeOutQuint(float t){
35 |   return 1. + (--t) * t * t * t * t;
36 | }
37 | float easeOut(float t){
38 |   return  t * t * t;
39 | }
40 | 
41 | void main() {
42 |   float PI = 3.141592653589793238;
43 |   vUv = uv;
44 |   vBary = bary;
45 | 
46 |   vec3 newpos = position;
47 |   
48 |   float o = 1. - offset;
49 |   float prog = clamp( (progress - o*0.999) /0.001,0.,1.);
50 |   vProgress =  prog;
51 |   vProgress1 =  clamp( (progress - (o - 0.1)*0.9) /0.1,0.,1.);
52 |   // prog = easeInOutQuint(prog);
53 |   // newpos = rotate(newpos - centroid1, vec3(1.,0.,0.),-prog*PI) + centroid1 + vec3(0.,-1.,0.)*prog*0.;
54 |   newpos.y += prog*0.05;
55 |   // newpos.x += sin(10.*offset)*prog;
56 |   // newpos.y += 0.4*sin(time + offset);
57 |   gl_Position = projectionMatrix * modelViewMatrix * vec4( newpos, 1.0 );
58 | }


--------------------------------------------------------------------------------
/index1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 		<title>Experimental Polygon Transitions with WebGL | Demo 2 | Codrops</title>
 7 | 		<meta name="description" content="Some experimental animations using triangles for image transitions with WebGL." />
 8 | 		<meta name="keywords" content="webgl, transition, image, animation, frontend, image slider, demo" />
 9 | 		<meta name="author" content="Codrops" />
10 | 		<link rel="shortcut icon" href="favicon.ico">
11 | 		<link rel="stylesheet" href="https://use.typekit.net/tly1rdy.css">
12 | 		<link rel="stylesheet" type="text/css" href="/css/base.css" />
13 | 		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
14 | 	</head>
15 | 	<body class="demo-1 loading">
16 | 		<main>	
17 | 			<div class="frame">
18 | 				<h1 class="frame__title">Experimental Polygon Transitions with WebGL</h1>	
19 | 				<div class="frame__links">
20 | 					<a href="https://tympanus.net/Development/ThumbFullTransition/">Previous demo</a>
21 | 					<a href="https://tympanus.net/codrops/?p=50876">Article</a>
22 | 					<a href="https://github.com/akella/PolygonTransitions">GitHub</a>
23 | 				</div>
24 | 				<div class="frame__demos">
25 | 					<a href="index.html" class="frame__demo">1</a>
26 | 					<a href="index1.html" class="frame__demo frame__demo--current">2</a>
27 | 					<a href="index2.html" class="frame__demo">3</a>
28 | 					<a href="index3.html" class="frame__demo">4</a>
29 | 					<a href="index4.html" class="frame__demo">5</a>
30 | 				</div>
31 | 			</div>
32 | 			<div id="container" data-images='["/4.jpg","/5.jpg","/6.jpg"]'></div>
33 | 			<div class="content">
34 | 				<h2 class="content__title">Sati Zen 18 <em>Mindfulness</em> Sessions</h2>
35 | 				<a class="nav nav-next">Next</a>
36 | 			</div>
37 | 		</main>
38 | 		<script src="js/demo1.js"></script>
39 | 	</body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/index2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 		<title>Experimental Polygon Transitions with WebGL | Demo 3 | Codrops</title>
 7 | 		<meta name="description" content="Some experimental animations using triangles for image transitions with WebGL." />
 8 | 		<meta name="keywords" content="webgl, transition, image, animation, frontend, image slider, demo" />
 9 | 		<meta name="author" content="Codrops" />
10 | 		<link rel="shortcut icon" href="favicon.ico">
11 | 		<link rel="stylesheet" href="https://use.typekit.net/tly1rdy.css">
12 | 		<link rel="stylesheet" type="text/css" href="/css/base.css" />
13 | 		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
14 | 	</head>
15 | 	<body class="demo-2 loading">
16 | 		<main>	
17 | 			<div class="frame">
18 | 				<h1 class="frame__title">Experimental Polygon Transitions with WebGL</h1>	
19 | 				<div class="frame__links">
20 | 					<a href="https://tympanus.net/Development/ThumbFullTransition/">Previous demo</a>
21 | 					<a href="https://tympanus.net/codrops/?p=50876">Article</a>
22 | 					<a href="https://github.com/akella/PolygonTransitions">GitHub</a>
23 | 				</div>
24 | 				<div class="frame__demos">
25 | 					<a href="index.html" class="frame__demo">1</a>
26 | 					<a href="index1.html" class="frame__demo ">2</a>
27 | 					<a href="index2.html" class="frame__demo frame__demo--current">3</a>
28 | 					<a href="index3.html" class="frame__demo">4</a>
29 | 					<a href="index4.html" class="frame__demo">5</a>
30 | 				</div>
31 | 			</div>
32 | 			<div id="container" data-images='["/7.jpg","/8.jpg","/9.jpg"]'></div>
33 | 			<div class="content">
34 | 				<h2 class="content__title">Desert Hill <em>Experience</em> Destinations</h2>
35 | 				<a class="nav nav-next">Next</a>
36 | 			</div>
37 | 		</main>
38 | 		<script src="js/demo2.js"></script>
39 | 	</body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/index4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 		<title>Experimental Polygon Transitions with WebGL | Demo 5 | Codrops</title>
 7 | 		<meta name="description" content="Some experimental animations using triangles for image transitions with WebGL." />
 8 | 		<meta name="keywords" content="webgl, transition, image, animation, frontend, image slider, demo" />
 9 | 		<meta name="author" content="Codrops" />
10 | 		<link rel="shortcut icon" href="favicon.ico">
11 | 		<link rel="stylesheet" href="https://use.typekit.net/tly1rdy.css">
12 | 		<link rel="stylesheet" type="text/css" href="/css/base.css" />
13 | 		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
14 | 	</head>
15 | 	<body class="demo-4 loading">
16 | 		<main>	
17 | 			<div class="frame">
18 | 				<h1 class="frame__title">Experimental Polygon Transitions with WebGL</h1>	
19 | 				<div class="frame__links">
20 | 					<a href="https://tympanus.net/Development/ThumbFullTransition/">Previous demo</a>
21 | 					<a href="https://tympanus.net/codrops/?p=50876">Article</a>
22 | 					<a href="https://github.com/akella/PolygonTransitions">GitHub</a>
23 | 				</div>
24 | 				<div class="frame__demos">
25 | 					<a href="index.html" class="frame__demo">1</a>
26 | 					<a href="index1.html" class="frame__demo ">2</a>
27 | 					<a href="index2.html" class="frame__demo ">3</a>
28 | 					<a href="index3.html" class="frame__demo ">4</a>
29 | 					<a href="index4.html" class="frame__demo frame__demo--current">5</a>
30 | 				</div>
31 | 			</div>
32 | 			<div id="container" data-images='["/13.jpg","/14.jpg","/15.jpg"]'></div>
33 | 			<div class="content">
34 | 				<h2 class="content__title">Aurelie Libre <em>Performance</em> Academy</h2>
35 | 				<a class="nav nav-next">Next</a>
36 | 			</div>
37 | 		</main>
38 | 		<script src="js/demo4.js"></script>
39 | 	</body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/index3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 		<title>Experimental Polygon Transitions with WebGL | Demo 4 | Codrops</title>
 7 | 		<meta name="description" content="Some experimental animations using triangles for image transitions with WebGL." />
 8 | 		<meta name="keywords" content="webgl, transition, image, animation, frontend, image slider, demo" />
 9 | 		<meta name="author" content="Codrops" />
10 | 		<link rel="shortcut icon" href="favicon.ico">
11 | 		<link rel="stylesheet" href="https://use.typekit.net/tly1rdy.css">
12 | 		<link rel="stylesheet" type="text/css" href="/css/base.css" />
13 | 		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
14 | 	</head>
15 | 	<body class="demo-3 loading">
16 | 		<main>	
17 | 			<div class="frame">
18 | 				<h1 class="frame__title">Experimental Polygon Transitions with WebGL</h1>	
19 | 				<div class="frame__links">
20 | 					<a href="https://tympanus.net/Development/ThumbFullTransition/">Previous demo</a>
21 | 					<a href="https://tympanus.net/codrops/?p=50876">Article</a>
22 | 					<a href="https://github.com/akella/PolygonTransitions">GitHub</a>
23 | 				</div>
24 | 				<div class="frame__demos">
25 | 					<a href="index.html" class="frame__demo">1</a>
26 | 					<a href="index1.html" class="frame__demo ">2</a>
27 | 					<a href="index2.html" class="frame__demo ">3</a>
28 | 					<a href="index3.html" class="frame__demo frame__demo--current">4</a>
29 | 					<a href="index4.html" class="frame__demo">5</a>
30 | 				</div>
31 | 			</div>
32 | 			<div id="container" data-images='["/10.jpg","/11.jpg","/12.jpg"]'></div>
33 | 			<div class="content">
34 | 				<h2 class="content__title">Julian Brecht <em>Fantomasia</em> Installations</h2>
35 | 				<a class="nav nav-next">Next</a>
36 | 			</div>
37 | 		</main>
38 | 		<script src="js/demo3.js"></script>
39 | 	</body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 		<title>Experimental Polygon Transitions with WebGL | Demo 1 | Codrops</title>
 7 | 		<meta name="description" content="Some experimental animations using triangles for image transitions with WebGL." />
 8 | 		<meta name="keywords" content="webgl, transition, image, animation, frontend, image slider, demo" />
 9 | 		<meta name="author" content="Codrops" />
10 | 		<link rel="shortcut icon" href="favicon.ico">
11 | 		<link rel="stylesheet" href="https://use.typekit.net/tly1rdy.css">
12 | 		<link rel="stylesheet" type="text/css" href="/css/base.css" />
13 | 		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
14 | 	</head>
15 | 	<body class="demo-0 loading">
16 | 		<main>	
17 | 			<div class="frame">
18 | 				<h1 class="frame__title">Experimental Polygon Transitions with WebGL</h1>	
19 | 				<div class="frame__links">
20 | 					<a href="https://tympanus.net/Development/ThumbFullTransition/">Previous demo</a>
21 | 					<a href="https://tympanus.net/codrops/?p=50876">Article</a>
22 | 					<a href="https://github.com/akella/PolygonTransitions">GitHub</a>
23 | 				</div>
24 | 				<div class="frame__demos">
25 | 					<a href="index.html" class="frame__demo frame__demo--current">1</a>
26 | 					<a href="index1.html" class="frame__demo">2</a>
27 | 					<a href="index2.html" class="frame__demo">3</a>
28 | 					<a href="index3.html" class="frame__demo">4</a>
29 | 					<a href="index4.html" class="frame__demo">5</a>
30 | 				</div>
31 | 			</div>
32 | 			<div id="container" data-images='["/1.jpg","/2.jpg","/3.jpg"]'></div>
33 | 			<div class="content">
34 | 				<h2 class="content__title"><span>South Alpine</span><em>Engineering</em><span>Solutions</span></h2>
35 | 				<a class="nav nav-next">Next</a>
36 | 			</div>
37 | 		</main>
38 | 		<script src="js/demo0.js"></script>
39 | 	</body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/js/demo0/vertex.glsl:
--------------------------------------------------------------------------------
 1 | uniform float time;
 2 | uniform float progress;
 3 | uniform vec4 resolution;
 4 | varying vec2 vUv;
 5 | varying vec4 vPosition;
 6 | varying float vProgress;
 7 | varying float vProgress1;
 8 | uniform vec2 pixels;
 9 | 
10 | attribute float offset;
11 | attribute float random;
12 | attribute vec3 centroid1;
13 | attribute vec3 bary;
14 | varying vec3 vBary;
15 | 
16 | mat4 rotationMatrix(vec3 axis, float angle) {
17 |     axis = normalize(axis);
18 |     float s = sin(angle);
19 |     float c = cos(angle);
20 |     float oc = 1.0 - c;
21 |     
22 |     return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,
23 |                 oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,
24 |                 oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,
25 |                 0.0,                                0.0,                                0.0,                                1.0);
26 | }
27 | 
28 | vec3 rotate(vec3 v, vec3 axis, float angle) {
29 |   mat4 m = rotationMatrix(axis, angle);
30 |   return (m * vec4(v, 1.0)).xyz;
31 | }
32 | 
33 | float easeInOutQuint(float t){
34 |   return t < 0.5 ? 16.0 * t * t * t * t * t : 1.0 + 16.0 * (--t) * t * t * t * t;
35 | }
36 | float easeOutQuint(float t){
37 |   return 1. + (--t) * t * t * t * t;
38 | }
39 | float easeOut(float t){
40 |   return  t * t * t;
41 | }
42 | 
43 | 
44 | 
45 | void main() {
46 |   float PI = 3.141592653589793238;
47 |   vUv = uv;
48 |   vBary = bary;
49 | 
50 |   vec3 newpos = position;
51 |   
52 |   float o = 1. - offset;
53 |   // float prog = clamp( (progress - o*0.999) /0.001,0.,1.);
54 |   float pr = (progress - 0.5)*(0. + resolution.y/resolution.x) + 0.5;
55 |   pr = progress;
56 |   float prog = clamp( (pr - o*0.9) /0.1,0.,1.);
57 |   vProgress =  prog;
58 |   vProgress1 =  clamp( (pr - clamp(o - 0.1,0.,1.)*0.9) /0.1,0.,1.);
59 |   // prog = easeInOutQuint(prog);
60 |   newpos = rotate((newpos - centroid1), vec3(1.,0.,0.),-prog*PI) + centroid1 + vec3(0.,-1.,0.)*prog*0.;
61 |   // newpos.y += prog*1.5*sin(PI*random);
62 |   // newpos.x += prog*1.5*cos(PI*random);
63 |   // newpos.x += sin(10.*offset)*prog;
64 |   // newpos.y += 0.4*sin(time + offset);
65 |   gl_Position = projectionMatrix * modelViewMatrix * vec4( newpos, 1.0 );
66 | }


--------------------------------------------------------------------------------
/js/demo1/vertex.glsl:
--------------------------------------------------------------------------------
 1 | uniform float time;
 2 | uniform float progress;
 3 | uniform vec4 resolution;
 4 | varying vec2 vUv;
 5 | varying vec4 vPosition;
 6 | varying float vProgress;
 7 | varying float vProgress1;
 8 | uniform vec2 pixels;
 9 | 
10 | attribute float offset;
11 | attribute float random;
12 | attribute vec3 centroid1;
13 | attribute vec3 bary;
14 | varying vec3 vBary;
15 | 
16 | mat4 rotationMatrix(vec3 axis, float angle) {
17 |     axis = normalize(axis);
18 |     float s = sin(angle);
19 |     float c = cos(angle);
20 |     float oc = 1.0 - c;
21 |     
22 |     return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,
23 |                 oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,
24 |                 oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,
25 |                 0.0,                                0.0,                                0.0,                                1.0);
26 | }
27 | 
28 | vec3 rotate(vec3 v, vec3 axis, float angle) {
29 |   mat4 m = rotationMatrix(axis, angle);
30 |   return (m * vec4(v, 1.0)).xyz;
31 | }
32 | 
33 | float easeInOutQuint(float t){
34 |   return t < 0.5 ? 16.0 * t * t * t * t * t : 1.0 + 16.0 * (--t) * t * t * t * t;
35 | }
36 | float easeOutQuint(float t){
37 |   return 1. + (--t) * t * t * t * t;
38 | }
39 | float easeOut(float t){
40 |   return  t * t * t;
41 | }
42 | 
43 | 
44 | 
45 | void main() {
46 |   float PI = 3.141592653589793238;
47 |   vUv = uv;
48 |   vBary = bary;
49 | 
50 |   vec3 newpos = position;
51 |   
52 |   float o = 1. - offset;
53 |   // float prog = clamp( (progress - o*0.999) /0.001,0.,1.);
54 |   float pr = (progress - 0.5)*(0.3 + resolution.y/resolution.x) + 0.5;
55 |   pr = progress;
56 |   float prog = clamp( (pr - o*0.6) /0.4,0.,1.);
57 |   vProgress =  prog;
58 |   vProgress1 =  clamp( (pr - (o - 0.1)*0.9) /0.1,0.,1.);
59 |   // prog = easeInOutQuint(prog);
60 |   // newpos = rotate(newpos - centroid1, vec3(1.,0.,0.),-prog*PI) + centroid1 + vec3(0.,-1.,0.)*prog*0.;
61 |   newpos.y += easeOut(prog)*1.5*sin(PI*random);
62 |   newpos.x += easeOut(prog)*1.5*cos(PI*random);
63 |   // newpos.x += sin(10.*offset)*prog;
64 |   // newpos.y += 0.4*sin(time + offset);
65 |   gl_Position = projectionMatrix * modelViewMatrix * vec4( newpos, 1.0 );
66 | }


--------------------------------------------------------------------------------
/js/demo4/vertex.glsl:
--------------------------------------------------------------------------------
 1 | uniform float time;
 2 | uniform float progress;
 3 | varying vec2 vUv;
 4 | varying vec4 vPosition;
 5 | varying float vProgress;
 6 | varying float vProgress1;
 7 | uniform vec2 pixels;
 8 | 
 9 | attribute float offset;
10 | attribute float random;
11 | attribute vec3 centroid1;
12 | attribute vec3 control0;
13 | attribute vec3 control1;
14 | attribute vec3 bary;
15 | varying vec3 vBary;
16 | 
17 | mat4 rotationMatrix(vec3 axis, float angle) {
18 |     axis = normalize(axis);
19 |     float s = sin(angle);
20 |     float c = cos(angle);
21 |     float oc = 1.0 - c;
22 |     
23 |     return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,
24 |                 oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,
25 |                 oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,
26 |                 0.0,                                0.0,                                0.0,                                1.0);
27 | }
28 | 
29 | vec3 rotate(vec3 v, vec3 axis, float angle) {
30 |   mat4 m = rotationMatrix(axis, angle);
31 |   return (m * vec4(v, 1.0)).xyz;
32 | }
33 | 
34 | 
35 | float easeOutQuint(float t){
36 |   return 1. + (--t) * t * t * t * t;
37 | }
38 | float easeOut(float t){
39 |   return  t * t * t;
40 | }
41 | 
42 | vec3 cubicBezier(vec3 p0, vec3 c0, vec3 c1, vec3 p1, float t) {
43 |     float tn = 1.0 - t;
44 | 
45 |     return tn * tn * tn * p0 + 3.0 * tn * tn * t * c0 + 3.0 * tn * t * t * c1 + t * t * t * p1;
46 | }
47 | 
48 | vec2 cubicBezier(vec2 p0, vec2 c0, vec2 c1, vec2 p1, float t) {
49 |     float tn = 1.0 - t;
50 | 
51 |     return tn * tn * tn * p0 + 3.0 * tn * tn * t * c0 + 3.0 * tn * t * t * c1 + t * t * t * p1;
52 | }
53 | 
54 | vec3 bezier4(vec3 a, vec3 b, vec3 c, vec3 d, float t) {
55 |     return mix(mix(mix(a, b, t), mix(b, c, t), t), mix(mix(b, c, t), mix(c, d, t), t), t);
56 |   }
57 | 
58 |   float easeInOutQuint(float t){
59 |     return t < 0.5 ? 16.0 * t * t * t * t * t : 1.0 + 16.0 * (--t) * t * t * t * t;
60 |   }
61 | 
62 | void main() {
63 |   float PI = 3.141592653589793238;
64 |   vUv = uv;
65 |   vBary = bary;
66 | 
67 |   vec3 newpos = position;
68 |   
69 |   float o = 1. - offset;
70 |   // float prog = clamp( (progress - o*0.999) /0.001,0.,1.);
71 |   float prog = clamp( (progress - o*0.6) /0.4,0.,1.);
72 |   vProgress =  prog;
73 |   vProgress1 =  clamp( (progress - clamp(o - 0.2,-0.,1.)*0.6) /0.4,0.,1.);
74 |   // newpos = bezier4(newpos, control0, control1, newpos, easeOut(prog));
75 |   // newpos.z = abs(newpos.z);
76 |   // prog = easeInOutQuint(prog);
77 |   newpos = rotate(newpos , vec3(0.,1.,0.),-prog*PI) + 0.*centroid1 + vec3(0.,-1.,0.)*prog*0.;
78 |   // newpos.y += prog*1.5*sin(PI*random);
79 |   // newpos.x += prog*1.5*cos(PI*random);
80 |   // newpos.x += sin(10.*offset)*prog;
81 |   // newpos.y += 0.4*sin(time + offset);
82 |   gl_Position = projectionMatrix * modelViewMatrix * vec4( newpos, 1.0 );
83 | }


--------------------------------------------------------------------------------
/js/demo2/vertex.glsl:
--------------------------------------------------------------------------------
 1 | uniform float time;
 2 | uniform float progress;
 3 | varying vec2 vUv;
 4 | varying vec4 vPosition;
 5 | varying float vProgress;
 6 | varying float vProgress1;
 7 | uniform vec2 pixels;
 8 | 
 9 | attribute float offset;
10 | attribute float random;
11 | attribute vec3 centroid1;
12 | attribute vec3 control0;
13 | attribute vec3 control1;
14 | attribute vec3 bary;
15 | varying vec3 vBary;
16 | 
17 | mat4 rotationMatrix(vec3 axis, float angle) {
18 |     axis = normalize(axis);
19 |     float s = sin(angle);
20 |     float c = cos(angle);
21 |     float oc = 1.0 - c;
22 |     
23 |     return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,
24 |                 oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,
25 |                 oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,
26 |                 0.0,                                0.0,                                0.0,                                1.0);
27 | }
28 | 
29 | vec3 rotate(vec3 v, vec3 axis, float angle) {
30 |   mat4 m = rotationMatrix(axis, angle);
31 |   return (m * vec4(v, 1.0)).xyz;
32 | }
33 | 
34 | 
35 | float easeOutQuint(float t){
36 |   return 1. + (--t) * t * t * t * t;
37 | }
38 | float easeOut(float t){
39 |   return  t * t * t;
40 | }
41 | 
42 | vec3 cubicBezier(vec3 p0, vec3 c0, vec3 c1, vec3 p1, float t) {
43 |     float tn = 1.0 - t;
44 | 
45 |     return tn * tn * tn * p0 + 3.0 * tn * tn * t * c0 + 3.0 * tn * t * t * c1 + t * t * t * p1;
46 | }
47 | 
48 | vec2 cubicBezier(vec2 p0, vec2 c0, vec2 c1, vec2 p1, float t) {
49 |     float tn = 1.0 - t;
50 | 
51 |     return tn * tn * tn * p0 + 3.0 * tn * tn * t * c0 + 3.0 * tn * t * t * c1 + t * t * t * p1;
52 | }
53 | 
54 | vec3 bezier4(vec3 a, vec3 b, vec3 c, vec3 d, float t) {
55 |     return mix(mix(mix(a, b, t), mix(b, c, t), t), mix(mix(b, c, t), mix(c, d, t), t), t);
56 |   }
57 | 
58 |   float easeInOutQuint(float t){
59 |     return t < 0.5 ? 16.0 * t * t * t * t * t : 1.0 + 16.0 * (--t) * t * t * t * t;
60 |   }
61 | 
62 | void main() {
63 |   float PI = 3.141592653589793238;
64 |   vUv = uv;
65 |   vBary = bary;
66 | 
67 |   vec3 newpos = position;
68 |   
69 |   float o = 1. - offset;
70 |   // float prog = clamp( (progress - o*0.999) /0.001,0.,1.);
71 |   float prog = clamp( (progress - o*0.6) /0.4,0.,1.);
72 |   vProgress =  prog;
73 |   vProgress1 =  clamp( (progress - clamp(o - 0.2,-0.,1.)*0.6) /0.4,0.,1.);
74 |   newpos = bezier4(newpos, control0, control1, newpos, easeOut(prog));
75 |   // newpos.z = abs(newpos.z);
76 |   // prog = easeInOutQuint(prog);
77 |   // newpos = rotate(newpos - centroid1, vec3(1.,0.,0.),-prog*PI) + centroid1 + vec3(0.,-1.,0.)*prog*0.;
78 |   // newpos.y += prog*1.5*sin(PI*random);
79 |   // newpos.x += prog*1.5*cos(PI*random);
80 |   // newpos.x += sin(10.*offset)*prog;
81 |   // newpos.y += 0.4*sin(time + offset);
82 |   gl_Position = projectionMatrix * modelViewMatrix * vec4( newpos, 1.0 );
83 | }


--------------------------------------------------------------------------------
/js/demo3/vertex.glsl:
--------------------------------------------------------------------------------
 1 | uniform float time;
 2 | uniform float progress;
 3 | varying vec2 vUv;
 4 | varying vec4 vPosition;
 5 | varying float vProgress;
 6 | varying float vProgress1;
 7 | uniform vec2 pixels;
 8 | 
 9 | attribute float offset;
10 | attribute float random;
11 | attribute vec3 centroid1;
12 | attribute vec3 control0;
13 | attribute vec3 control1;
14 | attribute vec3 bary;
15 | varying vec3 vBary;
16 | 
17 | mat4 rotationMatrix(vec3 axis, float angle) {
18 |     axis = normalize(axis);
19 |     float s = sin(angle);
20 |     float c = cos(angle);
21 |     float oc = 1.0 - c;
22 |     
23 |     return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,
24 |                 oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,
25 |                 oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,
26 |                 0.0,                                0.0,                                0.0,                                1.0);
27 | }
28 | 
29 | vec3 rotate(vec3 v, vec3 axis, float angle) {
30 |   mat4 m = rotationMatrix(axis, angle);
31 |   return (m * vec4(v, 1.0)).xyz;
32 | }
33 | 
34 | 
35 | float easeOutQuint(float t){
36 |   return 1. + (--t) * t * t * t * t;
37 | }
38 | float easeOut(float t){
39 |   return  t * t * t;
40 | }
41 | 
42 | vec3 cubicBezier(vec3 p0, vec3 c0, vec3 c1, vec3 p1, float t) {
43 |     float tn = 1.0 - t;
44 | 
45 |     return tn * tn * tn * p0 + 3.0 * tn * tn * t * c0 + 3.0 * tn * t * t * c1 + t * t * t * p1;
46 | }
47 | 
48 | vec2 cubicBezier(vec2 p0, vec2 c0, vec2 c1, vec2 p1, float t) {
49 |     float tn = 1.0 - t;
50 | 
51 |     return tn * tn * tn * p0 + 3.0 * tn * tn * t * c0 + 3.0 * tn * t * t * c1 + t * t * t * p1;
52 | }
53 | 
54 | vec3 bezier4(vec3 a, vec3 b, vec3 c, vec3 d, float t) {
55 |     return mix(mix(mix(a, b, t), mix(b, c, t), t), mix(mix(b, c, t), mix(c, d, t), t), t);
56 |   }
57 | 
58 |   float easeInOutQuint(float t){
59 |     return t < 0.5 ? 16.0 * t * t * t * t * t : 1.0 + 16.0 * (--t) * t * t * t * t;
60 |   }
61 | 
62 | void main() {
63 |   float PI = 3.141592653589793238;
64 |   vUv = uv;
65 |   vBary = bary;
66 | 
67 |   vec3 newpos = position;
68 |   
69 |   float o = 1. - offset;
70 |   // float prog = clamp( (progress - o*0.999) /0.001,0.,1.);
71 |   float prog = clamp( (progress - o*0.6) /0.4,0.,1.);
72 |   vProgress =  prog;
73 |   vProgress1 =  clamp( (progress - clamp(o - 0.1,-0.,1.)*0.9) /0.1,0.,1.);
74 |   // newpos = bezier4(newpos, control0, control1, newpos, easeInOutQuint(prog));
75 |   // newpos.z = abs(newpos.z);
76 |   // prog = easeInOutQuint(prog);
77 |   // newpos = rotate(newpos - centroid1, vec3(1.,0.,0.),-prog*PI) + centroid1 + vec3(0.,-1.,0.)*prog*0.;
78 |   // newpos.y += prog*1.5*sin(PI*random);
79 |   // newpos.x += prog*1.5*cos(PI*random);
80 |   // newpos.x += sin(10.*offset)*prog;
81 |   // newpos.y += 0.4*sin(time + offset);
82 |   gl_Position = projectionMatrix * modelViewMatrix * vec4( newpos, 1.0 );
83 | }


--------------------------------------------------------------------------------
/js/lib/getGeometry.js:
--------------------------------------------------------------------------------
  1 | import * as THREE from "three";
  2 | let SimplexNoise = require('simplex-noise'),
  3 |     simplex = new SimplexNoise(Math.random);
  4 | 
  5 | function clamp(a){
  6 |   return Math.max(0,Math.min(1,a));
  7 | }
  8 | export default function getGeometry(detail,offsettop){
  9 |   offsettop = offsettop || 0;
 10 |   let geometry = new THREE.BufferGeometry();
 11 |   let number = detail;
 12 |   let width = 2;
 13 |   let height = 2;
 14 |   
 15 |   let gran = width/number;
 16 |   let granH = gran*Math.sqrt(3)/2;
 17 |   let rows = height/granH;
 18 | 
 19 |   let offsets = []
 20 |   let positions = [];
 21 |   let centroids = [];
 22 |   let control0 = [];
 23 |   let control1 = [];
 24 |   let randoms = [];
 25 |   let uvs = [];
 26 |   let currentShift = 0;
 27 |   let bary = [];
 28 |   let currentheight = 0;
 29 |   let numberOfTriangles = 0;
 30 |   let scale = 2;
 31 | 
 32 |   for (let j = 0; j < rows; j++) {
 33 |     currentheight = j*granH;
 34 |     if(j%2===1){ currentShift = -gran/2;}
 35 |     else{currentShift = 0;}
 36 |     for (let i = 0; i <= number; i++) {
 37 |       let sign = Math.sign(i*gran + currentShift - width/2)
 38 |       // sign =1
 39 |       // first triangle
 40 |       positions.push(i*gran + currentShift - width/2,currentheight - height/2,0);
 41 |       uvs.push((i*gran + currentShift)/width, (currentheight)/height)
 42 |       positions.push(i*gran + gran/2 + currentShift - width/2,granH + currentheight - height/2,0);
 43 |       uvs.push((i*gran + gran/2 + currentShift)/width, (granH + currentheight)/height)
 44 |       positions.push(i*gran - gran/2 + currentShift - width/2,granH + currentheight - height/2,0);
 45 |       uvs.push((i*gran - gran/2 + currentShift)/width, (granH + currentheight)/height)
 46 | 
 47 |       let simp = simplex.noise2D(i/rows, j/rows) + Math.random()
 48 |       let o = clamp(currentheight/height + 2*simp/detail);
 49 |       let r = Math.random()
 50 |       offsets.push(o,clamp(o + 0.1*offsettop),clamp(o + 0.1*offsettop));
 51 |       randoms.push(r,r,r);
 52 |       let c = [i*gran + currentShift - width/2,currentheight - height/2,0];
 53 |       centroids.push(...c,...c,...c)
 54 | 
 55 |       let ctrl0 = [
 56 |        scale*sign*THREE.Math.randFloat(-.3, 0.3),
 57 |        -scale*THREE.Math.randFloat(-.3, 0.3) * 1.5,
 58 |        -THREE.Math.randFloatSpread(.5)
 59 |        ];
 60 |       let ctrl1 = [
 61 |        scale*sign*THREE.Math.randFloat(0.3, 0.6),
 62 |        -scale*THREE.Math.randFloat(0.3, 0.6) * 1.5,
 63 |        -THREE.Math.randFloatSpread(.5)
 64 |        ];
 65 |       control0.push(...ctrl0,...ctrl0,...ctrl0)
 66 |       control1.push(...ctrl1,...ctrl1,...ctrl1)
 67 | 
 68 | 
 69 |       bary.push(0,0,1, 0,1,0, 1,0,0);
 70 |       // second triangle
 71 |       positions.push(i*gran + currentShift - width/2,currentheight - height/2,0);
 72 |       uvs.push((i*gran + currentShift)/width, (currentheight)/height)
 73 |       positions.push(i*gran + gran + currentShift - width/2,currentheight - height/2,0);
 74 |       uvs.push((i*gran + gran + currentShift)/width, (currentheight)/height)
 75 |       positions.push(i*gran + gran/2 + currentShift - width/2,granH + currentheight - height/2,0);
 76 |       uvs.push((i*gran + gran/2 + currentShift)/width, (granH + currentheight)/height)
 77 |       
 78 |       simp = simplex.noise2D((i+1)/rows, j/rows) + Math.random()
 79 |       let o1 = clamp(currentheight/height + 2*simp/detail);
 80 |       r = Math.random()
 81 |       offsets.push(o1,o1,clamp(o1 + 0.1*offsettop));
 82 |       randoms.push(r,r,r);
 83 |       let c1 = [i*gran + currentShift - width/2,currentheight - height/2,0]
 84 |       
 85 |       control0.push(...ctrl0,...ctrl0,...ctrl0)
 86 |       control1.push(...ctrl1,...ctrl1,...ctrl1)
 87 | 
 88 |       centroids.push(...c1,...c1,...c1)
 89 |       bary.push(0,0,1, 0,1,0, 1,0,0);
 90 | 
 91 |       numberOfTriangles += 2;
 92 |     }
 93 |   }
 94 |   // console.log(control1,control0,centroids);
 95 |   geometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array(positions), 3 ) );
 96 |   geometry.addAttribute( 'bary', new THREE.BufferAttribute( new Float32Array(bary), 3 ) );
 97 |   geometry.addAttribute( 'uv', new THREE.BufferAttribute( new Float32Array(uvs), 2 ) );
 98 |   geometry.addAttribute( 'offset', new THREE.BufferAttribute( new Float32Array(offsets), 1 ) );
 99 |   geometry.addAttribute( 'centroid1', new THREE.BufferAttribute( new Float32Array(centroids), 3 ) );
100 |   geometry.addAttribute( 'control0', new THREE.BufferAttribute( new Float32Array(control0), 3 ) );
101 |   geometry.addAttribute( 'control1', new THREE.BufferAttribute( new Float32Array(control1), 3 ) );
102 |   geometry.addAttribute( 'random', new THREE.BufferAttribute( new Float32Array(randoms), 1 ) );
103 | 
104 |   return geometry;
105 | }


--------------------------------------------------------------------------------
/css/base.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *::after,
  3 | *::before {
  4 | 	box-sizing: border-box;
  5 | }
  6 | 
  7 | :root {
  8 | 	font-size: 15px;
  9 | }
 10 | 
 11 | body {
 12 | 	margin: 0;
 13 | 	--color-text: #202127;
 14 |     --color-bg: #e6e6e6;
 15 |     --color-link: #a06d2d;
 16 |     --color-link-hover: #ba7e31;
 17 | 	color: var(--color-text);
 18 | 	background-color: var(--color-bg);
 19 | 	font-family: tenon, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
 20 | 	font-weight: 300;
 21 | }
 22 | 
 23 | body #cdawrap {
 24 | 	--cda-left: auto;
 25 |     --cda-right: 3rem;
 26 |     --cda-top: 6rem;
 27 |     --cda-bottom: auto;
 28 |     --cda-text-align: right;
 29 |     --footer-align: end;
 30 |     --cda-width: 255px;
 31 |     --cda-text-size: 12px;
 32 |     --cda-text-color: var(--color-text);
 33 |     --cda-footer-fontsize: 10px;
 34 |     --cda-footer-color: var(--color-text);
 35 | }
 36 | 
 37 | .demo-1 {
 38 | 	--color-text: #fff;
 39 |     --color-bg: #000;
 40 |     --color-link: #edc4a4;
 41 |     --color-link-hover: #fff;
 42 | }
 43 | 
 44 | .demo-2 {
 45 | 	--color-text: #fff;
 46 |     --color-bg: #000;
 47 |     --color-link: #b7491a;
 48 |     --color-link-hover: #fff;
 49 | }
 50 | 
 51 | .demo-3 {
 52 | 	--color-text: #fff;
 53 |     --color-bg: #000;
 54 |     --color-link: #ebea9b;
 55 |     --color-link-hover: #fff;
 56 | }
 57 | 
 58 | .demo-4 {
 59 | 	--color-text: #000;
 60 |     --color-bg: #fff;
 61 |     --color-link: #3f51b5;
 62 |     --color-link-hover: #000;
 63 | }
 64 | 
 65 | /* Page Loader */
 66 | .js .loading::before,
 67 | .js .loading::after {
 68 | 	content: '';
 69 | 	position: fixed;
 70 | 	z-index: 1000;
 71 | }
 72 | 
 73 | .js .loading::before {
 74 | 	top: 0;
 75 | 	left: 0;
 76 | 	width: 100%;
 77 | 	height: 100%;
 78 | 	background: var(--color-bg);
 79 | }
 80 | 
 81 | .js .loading::after {
 82 | 	top: 50%;
 83 | 	left: 50%;
 84 | 	width: 60px;
 85 | 	height: 60px;
 86 | 	margin: -30px 0 0 -30px;
 87 | 	border-radius: 50%;
 88 | 	opacity: 0.4;
 89 | 	background: var(--color-link);
 90 | 	animation: loaderAnim 0.7s linear infinite alternate forwards;
 91 | }
 92 | 
 93 | @keyframes loaderAnim {
 94 | 	to {
 95 | 		opacity: 1;
 96 | 		transform: scale3d(0.5,0.5,1);
 97 | 	}
 98 | }
 99 | 
100 | a {
101 | 	text-decoration: none;
102 | 	color: var(--color-link);
103 | 	outline: none;
104 | }
105 | 
106 | a:hover,
107 | a:focus {
108 | 	color: var(--color-link-hover);
109 | 	outline: none;
110 | }
111 | 
112 | main {
113 | 	height: 100vh;
114 | 	display: flex;
115 | 	flex-direction: column;
116 | 	justify-content: space-between;
117 | }
118 | 
119 | .frame {
120 | 	padding: 3rem 5vw;
121 | 	text-align: center;
122 | 	position: relative;
123 | 	z-index: 1000;
124 | }
125 | 
126 | .frame__title {
127 | 	font-size: 1rem;
128 | 	margin: 0 0 1rem;
129 | 	font-weight: 300;
130 | }
131 | 
132 | .frame__links {
133 | 	display: inline;
134 | }
135 | 
136 | .frame__links a {
137 | 	text-decoration: underline;
138 | }
139 | 
140 | .frame__links a:hover,
141 | .frame__links a:focus {
142 | 	text-decoration: none;
143 | }
144 | 
145 | .frame__demos {
146 | 	position: relative;
147 | 	margin: 1rem 0;
148 | }
149 | 
150 | .frame__demos a,
151 | .frame__links a {
152 | 	margin: 0 1rem;
153 | }
154 | 
155 | .frame__demos::before {
156 | 	content: 'More demos';
157 | 	text-align: center;
158 | 	margin: 0 0 1rem;
159 | 	display: block;
160 | }
161 | 
162 | .frame__demos a {
163 | 	position: relative;
164 | }
165 | 
166 | .frame__demo--current,
167 | .frame__demo--current:hover {
168 | 	color: var(--color-text);
169 | }
170 | 
171 | .frame__demo--current::after {
172 | 	content: '';
173 | 	position: absolute;
174 | 	left: calc(50% - 1rem);
175 | 	width: 2rem;
176 | 	height: 1px;
177 | 	top: calc(0% + 0.5rem);
178 | 	background: currentColor;
179 | }
180 | 
181 | #container{
182 | 	width: 100vw;
183 | 	height: 100vh;
184 | 	position: absolute;
185 | 	top: 0;
186 | 	left: 0;
187 | }
188 | 
189 | .content {
190 | 	display: flex;
191 | 	flex-direction: column;
192 | 	width: 100vw;
193 | 	position: relative;
194 | 	align-items: flex-start;
195 | 	justify-content: flex-end;
196 | 	background-position: 50% 50%;
197 | 	background-size: cover;
198 | 	padding: 2rem 5vw;
199 | }
200 | 
201 | .content__title {
202 | 	font-size: clamp(2rem,10vw,9rem);
203 | 	text-transform: uppercase;
204 | 	line-height: 0.7;
205 | 	font-family: degular, sans-serif;
206 | 	font-weight: 500;
207 | 	letter-spacing: clamp(-0.05rem,-0.12vw,-0.15rem);
208 | 	margin: 0 0 5rem 0;
209 | 	max-width: 60rem;
210 | }
211 | 
212 | .content__title span {
213 | 	white-space: nowrap;
214 | }
215 | 
216 | .content__title em {
217 | 	display: block;
218 | 	font-weight: 200;
219 | }
220 | 
221 | .nav {
222 | 	position: relative;
223 | 	cursor: pointer;
224 | 	padding-left: 7rem;
225 | }
226 | 
227 | .nav::before {
228 | 	content: '';
229 | 	height: 1px;
230 | 	width: 6rem;
231 | 	background: currentColor;
232 | 	position: absolute;
233 | 	left: 0;
234 | 	top: 50%;
235 | }
236 | 
237 | @media screen and (min-width: 53em) {
238 | 	main {
239 | 		display: block;
240 | 	}
241 | 	.frame {
242 | 		position: fixed;
243 | 		text-align: left;
244 | 		z-index: 100;
245 | 		top: 0;
246 | 		left: 0;
247 | 		display: grid;
248 | 		align-content: space-between;
249 | 		width: 100%;
250 | 		max-width: none;
251 | 		height: 100vh;
252 | 		padding: 3rem;
253 | 		pointer-events: none;
254 | 		grid-template-columns: 50% 50%;
255 | 		grid-template-rows: auto auto auto;
256 | 		grid-template-areas: 'title links'
257 | 							'... ...'
258 | 							'... demos';
259 | 	}
260 | 	.frame__title-wrap {
261 | 		grid-area: title;
262 | 		display: flex;
263 | 	}
264 | 	.frame__title {
265 | 		margin: 0;
266 | 	}
267 | 	.frame__tagline {
268 | 		position: relative;
269 | 		margin: 0 0 0 1rem;
270 | 		padding: 0 0 0 1rem;
271 | 		opacity: 0.5;
272 | 	}
273 | 	.frame__demos {
274 | 		margin: 0;
275 | 		grid-area: demos;
276 | 		justify-self: end;
277 | 	}
278 | 	.frame__links a:last-child,
279 | 	.frame__demos a:last-child {
280 | 		margin-right: 0;
281 | 	}
282 | 	.frame__demos::before {
283 | 		text-align: right;
284 | 	}
285 | 	.frame__links {
286 | 		grid-area: links;
287 | 		padding: 0;
288 | 		justify-self: end;
289 | 	}
290 | 	.frame a {
291 | 		pointer-events: auto;
292 | 	}
293 | 	.content {
294 | 		padding: 3rem;
295 | 		height: 100vh;
296 | 	}
297 | }


--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
  1 | import * as THREE from "three";
  2 | import getGeometry from './lib/getGeometry'
  3 | import * as dat from "dat.gui";
  4 | // let OrbitControls = require("three-orbit-controls")(THREE);
  5 | import gsap from 'gsap';
  6 | export default class Sketch {
  7 |   constructor(options) {
  8 | 
  9 |     this.scene = new THREE.Scene();
 10 |     this.renderer = new THREE.WebGLRenderer({
 11 |       // antialias: true
 12 |     });
 13 |     this.detail = options.detail;
 14 |     this.nextDOM = options.next;
 15 |     this.fragment = options.fragment;
 16 |     this.offsettop = options.offsettop || 0;
 17 |     this.ease = options.ease || 'none';
 18 |     this.duration = options.duration || 2;
 19 |     this.vertex = options.vertex;
 20 |     this.container = options.dom;
 21 |     this.width = this.container.offsetWidth;
 22 |     this.height = this.container.offsetHeight;
 23 |     this.images = JSON.parse(this.container.getAttribute('data-images'));
 24 |     this.renderer.setPixelRatio(window.devicePixelRatio);
 25 |     this.renderer.setSize(this.width, this.height);
 26 |     this.renderer.setClearColor(0xeeeeee, 1);
 27 |     this.renderer.physicallyCorrectLights = true;
 28 |     this.renderer.outputEncoding = THREE.sRGBEncoding;
 29 |     this.currentIndex = 0;
 30 |     this.rendering = true;
 31 | 
 32 |     
 33 |     this.container.appendChild(this.renderer.domElement);
 34 | 
 35 |     this.camera = new THREE.PerspectiveCamera(
 36 |       70,
 37 |       window.innerWidth / window.innerHeight,
 38 |       0.001,
 39 |       1000
 40 |     );
 41 |     this.camera.position.set(0, 0, 2);
 42 |     // this.controls = new OrbitControls(this.camera, this.renderer.domElement);
 43 |     this.time = 0;
 44 |     this.paused = false;
 45 |     this.textures = []
 46 |     this.initiate(()=>{
 47 |       this.imageAspect = this.textures[0].image.naturalHeight/this.textures[0].image.naturalWidth
 48 |       this.setupResize();
 49 |       this.addObjects();
 50 |       this.resize();
 51 |       this.render();
 52 |       // this.settings();
 53 |       this.nextEvent();
 54 |       document.body.classList.remove('loading')
 55 |     })
 56 |     
 57 |   }
 58 | 
 59 |   nextEvent(){
 60 |     this.nextDOM.addEventListener('click',()=>{
 61 |       this.next();
 62 |     })
 63 |   }
 64 | 
 65 |   initiate(cb){
 66 |     const promises = [];
 67 |     let that = this;
 68 |     this.images.forEach((url,i)=>{
 69 |       let promise = new Promise(resolve => {
 70 |         that.textures[i] = new THREE.TextureLoader().load( url, resolve );
 71 |       });
 72 |       promises.push(promise);
 73 |     })
 74 |     Promise.all(promises).then(() => {
 75 |       cb();
 76 |     });
 77 |   }
 78 | 
 79 |   settings() {
 80 |     let that = this;
 81 |     this.settings = {
 82 |       progress: 0,
 83 |       next: function(){
 84 |         that.next();
 85 |       }
 86 |     };
 87 |     this.gui = new dat.GUI();
 88 |     this.gui.add(this.settings, "progress", 0, 1, 0.01);
 89 |     this.gui.add(this.settings, "next");
 90 |   }
 91 | 
 92 |   setupResize() {
 93 |     window.addEventListener("resize", this.resize.bind(this));
 94 |   }
 95 | 
 96 |   resize() {
 97 |     this.width = this.container.offsetWidth;
 98 |     this.height = this.container.offsetHeight;
 99 |     this.renderer.setSize(this.width, this.height);
100 |     this.camera.aspect = this.width / this.height;
101 |     
102 | 
103 |     // image cover
104 |     let a1; let a2;
105 |     if(this.height/this.width<this.imageAspect) {
106 |       a2 =   (1/this.imageAspect)*this.height/this.width ;
107 |       a1 = 1;
108 |     } else{
109 |       a2 = 1;
110 |       a1= this.width/this.height* this.imageAspect;
111 |     }
112 |     this.material.uniforms.resolution.value.x = this.width;
113 |     this.material1.uniforms.resolution.value.x = this.width;
114 |     this.material.uniforms.resolution.value.y = this.height;
115 |     this.material1.uniforms.resolution.value.y = this.height;
116 |     this.material.uniforms.resolution.value.z = a1;
117 |     this.material1.uniforms.resolution.value.z = a1;
118 |     this.material.uniforms.resolution.value.w = a2;
119 |     this.material1.uniforms.resolution.value.w = a2;
120 |     console.log(this.material.uniforms.resolution.value);
121 | 
122 | 
123 |     // optional - cover with quad
124 |     const dist  = this.camera.position.z;
125 |     const height = 2;
126 |     let koef = 1;
127 |     // if(this.width>this.height) koef = this.camera.aspect
128 | 
129 |     this.nextMesh.scale.set(this.camera.aspect,1,1)
130 |     this.currentMesh.scale.set(this.camera.aspect,1,1)
131 |     this.camera.fov = 2*(180/Math.PI)*Math.atan(height/(2*dist*koef));
132 |     this.camera.updateProjectionMatrix();
133 |   }
134 | 
135 | 
136 |   next(){
137 |     let that = this;
138 |     
139 |     if(!this.isRunning){
140 |       this.isRunning = true;
141 |       this.rendering = true;
142 |       this.currentIndex++;
143 |       this.nextTexture = this.textures[this.currentIndex%this.textures.length];
144 |       this.nextnextTexture = this.textures[(this.currentIndex+1)%this.textures.length];
145 |       gsap.to(this.settings,{
146 |         duration: this.duration,
147 |         progress: 1,
148 |         ease: this.ease,
149 |         onComplete: ()=>{
150 |           this.isRunning = false;
151 |           this.settings.progress = 0;
152 |           this.material.uniforms.texture1.value = this.nextTexture;
153 |           this.material1.uniforms.texture1.value = this.nextnextTexture;
154 |           this.rendering = false;
155 |         }
156 |       })
157 |     }
158 |     
159 |   }
160 |   
161 | 
162 |   addObjects() {
163 |     let that = this;
164 |     this.material = new THREE.ShaderMaterial({
165 |       extensions: {
166 |         derivatives: "#extension GL_OES_standard_derivatives : enable"
167 |       },
168 |       side: THREE.DoubleSide,
169 |       uniforms: {
170 |         time: { type: "f", value: 0 },
171 |         progress: { type: "f", value: 0 },
172 |         resolution: { type: "v4", value: new THREE.Vector4() },
173 |         texture1: { type: "t", value: this.textures[0] }
174 |       },
175 |       // wireframe: true,
176 |       transparent: true,
177 |       vertexShader: this.vertex,
178 |       fragmentShader: this.fragment,
179 |       depthTest: false,
180 |       depthWrite: false
181 |     });
182 |     
183 |     let geo = getGeometry(this.detail,this.offsettop);
184 |     this.material1 = this.material.clone()
185 |     let t = this.textures[1];
186 |     this.material1.uniforms.texture1.value = t;
187 |     this.currentMesh = new THREE.Mesh(geo, this.material);
188 |     this.nextMesh = new THREE.Mesh(geo, this.material1);
189 |     
190 |     this.nextMesh.position.z = -0.0001;
191 |     this.scene.add(this.currentMesh);
192 |     this.scene.add(this.nextMesh);
193 |     // this.geometry = new THREE.PlaneGeometry(1, 1, 10, 10);
194 |     // this.testMesh = new THREE.Mesh(this.geometry, new THREE.MeshBasicMaterial({color:0x000000,wireframe: true}));
195 |     // this.scene.add(this.testMesh);
196 |   }
197 | 
198 |   render() {
199 |     if (this.paused) return;
200 |     if(this.material) this.material.uniforms.progress.value = this.settings.progress;
201 |     requestAnimationFrame(this.render.bind(this));
202 |     // if(this.rendering) 
203 |     this.renderer.render(this.scene, this.camera);
204 |   }
205 | }
206 | 
207 | 
208 | 


--------------------------------------------------------------------------------