Fix: it was the alpha value, weird that seems to be handled implementation defined.

html/index.html

@@ -12,17 +12,18 @@
         }
     </script>
     <script id="fragmentShader" type="x-shader/x-fragment">
-        #ifdef GL_FRAGMENT_PRECISION_HIGH
+        #ifdef GL_ES
         precision highp float;
-        #else
-        precision mediump 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;
@@ -55,7 +56,8 @@
             vec2 uvm = iMouse.xy / iResolution.y;
             float noiseVal = 0.5 + 0.5 * Pseudo3dNoise(vec3(uv *6.0, time/10.));
 
-            fragColor.rgb = vec3( 0.8+ 0.2*sin(noiseVal * time + (sin(time) * time / 10.)));
+            float val = sin(noiseVal * time + (sin(time) * time / 10.));
+            fragColor.rgba = vec4( val, val, val, 1.);
         }
 
         void main() {
@@ -92,7 +94,7 @@
 					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 },
+                    iChannel0: { value: texture },
 				};
 
 				const material = new THREE.ShaderMaterial( {
@@ -127,13 +129,12 @@
 
 
 			function animate() {
-				window.requestAnimationFrame( animate );
+				requestAnimationFrame( animate );
 				uniforms[ 'iTime' ].value = performance.now() / 1000;
 				renderer.render( scene, camera );
 			}
 
 
-
 </script>
 </body>
 </html>