most simple webshader

7 months ago · 01855b4b5d
2 changed files with 139 additions and 0 deletions
--- a/html/index.html
+++ b/html/index.html
@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>three.js webgl - shader [Monjori]</title>
+    <meta charset="utf-8">
+    <script id="vertexShader" type="x-shader/x-vertex">
+        varying vec2 vUv;
+
+        void main()    {
+            vUv = uv;
+            gl_Position = vec4(position, 1.0);
+        }
+    </script>
+    <script id="fragmentShader" type="x-shader/x-fragment">
+        #ifdef GL_FRAGMENT_PRECISION_HIGH
+        precision highp float;
+        #else
+        precision mediump float;
+        #endif
+
+        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));
+        }
+
+        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 mainImage(out vec4 fragColor, in vec2 fragCoord) {
+            vec2 uv = fragCoord.xy / iResolution.y;
+
+            float time = iTime * (iTime * 0.1);
+            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.)));
+        }
+
+        void main() {
+            mainImage(gl_FragColor, gl_FragCoord.xy);
+        }
+    </script>
+</head>
+
+<body>
+<div id="container"></div>
+
+<script type="module">
+			import * as THREE from 'https://unpkg.com/three/build/three.module.js';
+
+			let camera, scene, renderer;
+			let uniforms;
+			let texture;
+			init();
+			animate();
+
+			function init() {
+				const container = document.getElementById( 'container' );
+				camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+				scene = new THREE.Scene();
+				const geometry = new THREE.PlaneGeometry( 2, 2 );
+
+                const loader = new THREE.TextureLoader();
+                const texture = loader.load('noise.png');
+                texture.wrapS = THREE.RepeatWrapping;
+                texture.wrapT = THREE.RepeatWrapping;
+
+                let quality = 1
+				uniforms = {
+					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 );
+				scene.add( mesh );
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				container.appendChild( renderer.domElement );
+				onWindowResize();
+				window.addEventListener( 'resize', onWindowResize );
+				document.addEventListener( 'pointermove', onPointerMove);
+			}
+
+			function onPointerMove(event) {
+                var clientX = event.clientX;
+                var clientY = event.clientY;
+
+                var mouseX = clientX / window.innerWidth;
+                var mouseY = 1 - clientY / window.innerHeight;
+
+                uniforms[ 'iMouse' ].value = new THREE.Vector2(mouseX, mouseY);
+			}
+
+			function onWindowResize() {
+				renderer.setSize( window.innerWidth, window.innerHeight );
+			}
+
+
+			function animate() {
+				window.requestAnimationFrame( animate );
+				uniforms[ 'iTime' ].value = performance.now() / 1000;
+				renderer.render( scene, camera );
+			}
+
+
+
+</script>
+</body>
+</html>
--- a/html/noise.png
+++ b/html/noise.png