better design with selfmade shader

components/Shaders/Background/fragment.tsx

@@ -0,0 +1,82 @@
+
+export const fragmentShader = `
+uniform float u_intensity;
+uniform float u_time;
+uniform int width;
+uniform int height;
+
+varying vec2 vUv;
+varying float vDisplacement;
+
+//from Hash Functions for GPU Rendering (Jarzynski et al.)
+//http://www.jcgt.org/published/0009/03/02/
+vec3 pcg3d(uvec3 v)
+{
+    v = v * 1664525u + 1013904223u;
+    v.x += v.y*v.z; v.y += v.z*v.x; v.z += v.x*v.y;
+    v ^= v >> 16u;
+    v.x += v.y*v.z; v.y += v.z*v.x; v.z += v.x*v.y;
+    return vec3(v) * (1.0/float(0xffffffffu));
+}
+
+// convert texture coordinates to pixel
+float t2p(float t, int noOfPixels){
+    return t * float(noOfPixels) - 0.5;
+}
+
+#define M_PI 3.1415926535897932384626433832795
+vec2 randomGradient(uvec3 p){
+    vec3 _uv = pcg3d(p);
+    float r = sqrt(_uv[0]);
+    float phi = 2.0 * M_PI * _uv[1];
+    return vec2(r* cos(phi), r * sin(phi));
+}
+
+
+vec3 gradientNoise(vec2 pos, float gridSize){
+    vec2 gridPos = pos * gridSize;
+    uvec2 i = uvec2(gridPos);
+    vec2 f = fract(gridPos);
+
+    vec2 g11 = randomGradient(uvec3(i.x,i.y,1));
+    vec2 g12 = randomGradient(uvec3(i.x + 1u,i.y,1));
+    vec2 g21 = randomGradient(uvec3(i.x,i.y + 1u,1));
+    vec2 g22 = randomGradient(uvec3(i.x + 1u,i.y +1u,1));
+
+    float d11 = dot(g11, f);
+    float d12 = dot(g12, f - vec2(1.0, 0.0));
+    float d21 = dot(g21, f - vec2(0.0, 1.0));
+    float d22 = dot(g22, f - vec2(1.0, 1.0));
+
+    /*
+    vec3 f11 = vec3(d11);
+    vec3 f12 = vec3(d12);
+    vec3 f21 = vec3(d21);
+    vec3 f22 = vec3(d22);
+    */
+    
+    vec3 f11 = pcg3d(uvec3(i.x,i.y,0)) * (d11 + 1.0);
+    vec3 f12 = pcg3d(uvec3(i.x + 1u,i.y,0))* (d12 + 1.0);
+    vec3 f21 = pcg3d(uvec3(i.x,i.y + 1u,0))* (d21 + 1.0);
+    vec3 f22 = pcg3d(uvec3(i.x + 1u,i.y +1u,0))* (d22 + 1.0);
+    
+    f = smoothstep(0.0, 1.0, f);
+
+    vec3 q1 = mix(f11, f12, vec3(f.x));
+    vec3 q2 = mix(f21, f22, vec3(f.x));
+    vec3 p = mix(q1, q2, vec3(f.y));    
+    
+    return p;
+}
+
+
+void main() {
+    float distort = 2.0 * vDisplacement + u_intensity;
+    vec2 pos = vec2(u_time) /5.0 + vUv;
+    vec3 texColor = gradientNoise(pos, 4.0);
+    texColor.y = 0.0;
+    gl_FragColor = vec4(texColor, 1.0);
+}
+
+`
+

components/Shaders/Background/vertex.tsx

@@ -0,0 +1,108 @@
+export const vertexShader = `
+uniform float u_intensity;
+uniform float u_time;
+
+varying vec2 vUv;
+varying float vDisplacement;
+
+
+// Classic Perlin 3D Noise 
+// by Stefan Gustavson
+//
+vec4 permute(vec4 x) {
+    return mod(((x*34.0)+1.0)*x, 289.0);
+}
+
+vec4 taylorInvSqrt(vec4 r) {
+    return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+vec3 fade(vec3 t) {
+    return t*t*t*(t*(t*6.0-15.0)+10.0);
+}
+
+float cnoise(vec3 P) {
+    vec3 Pi0 = floor(P); // Integer part for indexing
+    vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
+    Pi0 = mod(Pi0, 289.0);
+    Pi1 = mod(Pi1, 289.0);
+    vec3 Pf0 = fract(P); // Fractional part for interpolation
+    vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
+    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+    vec4 iy = vec4(Pi0.yy, Pi1.yy);
+    vec4 iz0 = Pi0.zzzz;
+    vec4 iz1 = Pi1.zzzz;
+
+    vec4 ixy = permute(permute(ix) + iy);
+    vec4 ixy0 = permute(ixy + iz0);
+    vec4 ixy1 = permute(ixy + iz1);
+
+    vec4 gx0 = ixy0 / 7.0;
+    vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
+    gx0 = fract(gx0);
+    vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
+    vec4 sz0 = step(gz0, vec4(0.0));
+    gx0 -= sz0 * (step(0.0, gx0) - 0.5);
+    gy0 -= sz0 * (step(0.0, gy0) - 0.5);
+
+    vec4 gx1 = ixy1 / 7.0;
+    vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
+    gx1 = fract(gx1);
+    vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
+    vec4 sz1 = step(gz1, vec4(0.0));
+    gx1 -= sz1 * (step(0.0, gx1) - 0.5);
+    gy1 -= sz1 * (step(0.0, gy1) - 0.5);
+
+    vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
+    vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
+    vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
+    vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
+    vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
+    vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
+    vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
+    vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
+
+    vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
+    g000 *= norm0.x;
+    g010 *= norm0.y;
+    g100 *= norm0.z;
+    g110 *= norm0.w;
+    vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
+    g001 *= norm1.x;
+    g011 *= norm1.y;
+    g101 *= norm1.z;
+    g111 *= norm1.w;
+
+    float n000 = dot(g000, Pf0);
+    float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
+    float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
+    float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
+    float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
+    float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
+    float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
+    float n111 = dot(g111, Pf1);
+
+    vec3 fade_xyz = fade(Pf0);
+    vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
+    vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
+    float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); 
+    return 2.2 * n_xyz;
+}
+
+// End of Perlin Noise Code
+
+void main() {
+  vUv = uv;
+
+  vDisplacement = cnoise(position + vec3(2.0 * u_time));
+
+  vec3 newPosition = position + normal * (u_intensity * vDisplacement);
+
+  vec4 modelPosition = modelMatrix * vec4(newPosition, 1.0);
+  vec4 viewPosition = viewMatrix * modelPosition;
+  vec4 projectedPosition = projectionMatrix * viewPosition;
+
+  gl_Position = projectedPosition;
+}
+
+`