mpercivalxyz

this website!
Log | Files | Refs | README

shader-container.js (1554B)

      1 var container;
      2 var camera, scene, renderer;
      3 var uniforms;
      4 
      5 init();
      6 animate();
      7 
      8 function init() {
      9     container = document.getElementById( 'container' );
     10 
     11     camera = new THREE.Camera();
     12     camera.position.z = 1;
     13 
     14     scene = new THREE.Scene();
     15 
     16     var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
     17 
     18     uniforms = {
     19         u_time: { type: "f", value: 1.0 },
     20         u_resolution: { type: "v2", value: new THREE.Vector2() },
     21         u_mouse: { type: "v2", value: new THREE.Vector2() }
     22     };
     23 
     24     var material = new THREE.ShaderMaterial( {
     25         uniforms: uniforms,
     26         vertexShader: document.getElementById( 'vertexShader' ).textContent,
     27         fragmentShader: document.getElementById( 'fragmentShader' ).textContent
     28     } );
     29 
     30     var mesh = new THREE.Mesh( geometry, material );
     31     scene.add( mesh );
     32 
     33     renderer = new THREE.WebGLRenderer();
     34     renderer.setPixelRatio( window.devicePixelRatio );
     35 
     36     container.appendChild( renderer.domElement );
     37 
     38     onWindowResize();
     39     window.addEventListener( 'resize', onWindowResize, false );
     40 
     41     document.onmousemove = function(e){
     42       uniforms.u_mouse.value.x = e.pageX
     43       uniforms.u_mouse.value.y = e.pageY
     44     }
     45 }
     46 
     47 function onWindowResize( event ) {
     48     renderer.setSize(400, 400);
     49     uniforms.u_resolution.value.x = renderer.domElement.width;
     50     uniforms.u_resolution.value.y = renderer.domElement.height;
     51 }
     52 
     53 function animate() {
     54     requestAnimationFrame( animate );
     55     render();
     56 }
     57 
     58 function render() {
     59     uniforms.u_time.value += 0.05;
     60     renderer.render( scene, camera );
     61 }