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 ); } + +