/*
Most of the stuff in here is just bootstrapping. Essentially it's just
setting ThreeJS up so that it renders a flat surface upon which to draw
the shader. The only thing to see here really is the uniforms sent to
the shader. Apart from that all of the magic happens in the HTML view
under the fragment shader.
*/let container;let camera, scene, renderer;let uniforms;let loader=newTHREE.TextureLoader();let texture;
loader.setCrossOrigin("anonymous");
loader.load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/noise.png',functiondo_something_with_texture(tex){
texture = tex;
texture.wrapS =THREE.RepeatWrapping;
texture.wrapT =THREE.RepeatWrapping;
texture.minFilter =THREE.LinearFilter;init();animate();});functioninit(){
container = document.getElementById('container');
camera =newTHREE.Camera();
camera.position.z =1;
scene =newTHREE.Scene();var geometry =newTHREE.PlaneBufferGeometry(2,2);
uniforms ={
u_time:{ type:"f", value:1.0},
u_resolution:{ type:"v2", value:newTHREE.Vector2()},
u_noise:{ type:"t", value: texture },
u_mouse:{ type:"v2", value:newTHREE.Vector2()}};var material =newTHREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
});
material.extensions.derivatives =true;var mesh =newTHREE.Mesh( geometry, material );
scene.add( mesh );
renderer =newTHREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
container.appendChild( renderer.domElement );onWindowResize();
window.addEventListener('resize', onWindowResize,false);
document.addEventListener('pointermove',(e)=>{let ratio = window.innerHeight / window.innerWidth;
uniforms.u_mouse.value.x =(e.pageX - window.innerWidth /2)/ window.innerWidth / ratio;
uniforms.u_mouse.value.y =(e.pageY - window.innerHeight /2)/ window.innerHeight *-1;
e.preventDefault();});}functiononWindowResize( event ){
renderer.setSize( window.innerWidth, window.innerHeight );
uniforms.u_resolution.value.x = renderer.domElement.width;
uniforms.u_resolution.value.y = renderer.domElement.height;}functionanimate(){requestAnimationFrame( animate );render();}functionrender(){
uniforms.u_time.value +=0.01;
renderer.render( scene, camera );}