diff --git a/html/index.html b/html/index.html
index 4bf006a..e2be90b 100644
--- a/html/index.html
+++ b/html/index.html
@@ -12,33 +12,49 @@
}
@@ -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 );
}
+
+