my own shader.. with a weird artefact

html/index.html

@@ -12,33 +12,49 @@
         }
     </script>
     <script id="fragmentShader" type="x-shader/x-fragment">
-        #ifdef GL_ES
-        precision highp float;
-        #endif
-
-        //    #extension GL_OES_standard_derivatives : enable
+        uniform float iTime;
+        uniform vec2 iMouse;
+        uniform vec2 iResolution;
+        uniform sampler2D iChannel0;
+
+        vec2 GetGradient(vec2 intPos, float t) {
+            float rand = texture(iChannel0, intPos / 64.0).r * 4.0;
+            float angle = 6.283185 * rand + 4.0 * t * rand;
+            return vec2(cos(angle), sin(angle));
+        }
 
-        uniform float time;
-        uniform vec2  mouse;
-        uniform vec2 resolution;
+        float Pseudo3dNoise(vec3 pos) {
+            vec2 i = floor(pos.xy);
+            vec2 f = pos.xy - i;
+            vec2 blend = f * f * (3.0 -(2.0 * f));
+            float noiseVal =
+            mix(
+            mix(
+            dot(GetGradient(i + vec2(0, 0), pos.z), f - vec2(0, 0)),
+            dot(GetGradient(i + vec2(1, 0), pos.z), f - vec2(1, 0)),
+            blend.x),
+            mix(
+            dot(GetGradient(i + vec2(0, 1), pos.z), f - vec2(0, 1)),
+            dot(GetGradient(i + vec2(1, 1), pos.z), f - vec2(1, 1)),
+            blend.x),
+            blend.y
+            );
+            return noiseVal / 0.7;// normalize to about [-1..1]
+        }
 
-        void main(void) {
-            vec2 uv = (gl_FragCoord.xy - resolution * 0.7) / max(resolution.x, resolution.y) * 2.998;
-            vec2 position = gl_FragCoord.xy / resolution.xy;
-            float t = 0.255 / abs(abs(sin(1.)) - length(uv));
-            uv *= 1.0;
+        void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+            vec2 uv = fragCoord.xy / iResolution.y;
+            //period = iTime % 360;
 
-            float e = 0.25;
-            for (float i=3.0;i<=15.0;i+=1.0) {
-                e += 0.01/abs((i/15.) +sin((time/2.0) + 0.15*i*(uv.x) *(cos(i/4.0666 + (time / 2.0) + uv.x*2.2))) + 2.5*uv.y);
+            float time = iTime;
+            vec2 uvm = iMouse.xy / iResolution.y;
+            float noiseVal = 0.5 + 0.5 * Pseudo3dNoise(vec3(uv *4.0, time/10.));
 
-                gl_FragColor = vec4(vec3(e/1.5, e/1.5, e/1.5), 1.6);
-                //gl_FragColor.r = 1.0;
-                gl_FragColor.g = mouse.x / 15.0 + 0.128;
-                gl_FragColor.b = uv.y / 10.0 + 0.25;
-                gl_FragColor.a = uv.y + 1.4;
-            }
+            fragColor.rgb = vec3(sin(noiseVal * time + (sin(time) * time / 10.)));
+        }
 
+        void main() {
+            mainImage(gl_FragColor, gl_FragCoord.xy);
         }
     </script>
 </head>
@@ -51,6 +67,7 @@
 
 			let camera, scene, renderer;
 			let uniforms;
+			let texture;
 			init();
 			animate();
 
@@ -60,18 +77,25 @@
 				scene = new THREE.Scene();
 				const geometry = new THREE.PlaneGeometry( 2, 2 );
 
+                const loader = new THREE.TextureLoader();
+                const texture = loader.load('noise.png');
+                texture.minFilter = THREE.NearestFilter;
+                texture.magFilter = THREE.NearestFilter;
+                texture.wrapS = THREE.RepeatWrapping;
+                texture.wrapT = THREE.RepeatWrapping;
+
                 let quality = 1
 				uniforms = {
-					time: { value: 1.0 },
-					resolution: { value: new THREE.Vector2( window.innerWidth / quality, window.innerHeight / quality ) },
-					mouse: { value: new THREE.Vector2(0.0,0.0) }
+					iTime: { value: 1.0 },
+					iResolution: { value: new THREE.Vector2( window.innerWidth / quality, window.innerHeight / quality ) },
+					iMouse: { value: new THREE.Vector2(0.0,0.0) },
+					iChannel0: { value: texture },
 				};
 
 				const material = new THREE.ShaderMaterial( {
 					uniforms: uniforms,
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentShader' ).textContent
-
 				} );
 
 				const mesh = new THREE.Mesh( geometry, material );
@@ -91,7 +115,7 @@
                 var mouseX = clientX / window.innerWidth;
                 var mouseY = 1 - clientY / window.innerHeight;
 
-                uniforms[ 'mouse' ].value = new THREE.Vector2(mouseX, mouseY);
+                uniforms[ 'iMouse' ].value = new THREE.Vector2(mouseX, mouseY);
 			}
 
 			function onWindowResize() {
@@ -101,10 +125,12 @@
 
 			function animate() {
 				requestAnimationFrame( animate );
-				uniforms[ 'time' ].value = performance.now() / 1000;
+				uniforms[ 'iTime' ].value = performance.now() / 1000;
 				renderer.render( scene, camera );
 			}
 
+
+
 </script>
 </body>
 </html>