Animating ThreeJS ShaderMaterial Uniforms

by Thanos Saringelos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
		<script id="fragmentShader" type="x-shader/x-fragment">

			uniform float frame;
			uniform vec2 resolution;

			varying vec2 vUv;

			void main( void ) {

				vec2 position = -1.0 + 2.0 * vUv;

				float red = abs( sin( position.x * position.y + frame / 5.0 ) );
				float green = abs( sin( position.x * position.y + frame / 4.0 ) );
				float blue = abs( sin( position.x * position.y + frame / 3.0 ) );
				gl_FragColor = vec4( red, green, blue, 0.98 );

			}

		</script>
    

		<script id="vertexShader" type="x-shader/x-vertex">

			varying vec2 vUv;

			void main()
			{
				vUv = uv;
				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
				gl_Position = projectionMatrix * mvPosition;
			}

		</script>
    
    <div id="container" style='z-index:100000; position:absolute;top:0px;left:0px;' ></div>
    <div style='z-index:0; position:absolute;top:0px;left:0px;'>sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa .sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa . sasasa ....

JavaScript

var container, stats;

var camera, scene, renderer, mesh, mixer;

var uniforms1, uniforms2;

var clock = new THREE.Clock();

init();
animate();

function init() {

  container = document.getElementById( 'container' );

  camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 3000 );
  camera.position.z = 4;

  scene = new THREE.Scene();

  var geometry = new THREE.BoxGeometry( 0.75, 0.75, 0.75 );

  uniforms1 = {
    frame:      { value: 1.0 },
    resolution: { value: new THREE.Vector2() }
  };

  var material = new THREE.ShaderMaterial( {

    uniforms: uniforms1,
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent

  } );

  mesh = new THREE.Mesh( geometry, material );
	mesh.materialDotUniformsDotFrame = material.uniforms.frame;
  var track = new THREE.NumberKeyframeTrack( '.materialDotUniformsDotFrame[value]', [ 0, 1, 2 ], [ 1, 0, 1 ] );
  var clip = new THREE.AnimationClip( 'Action', 3, [ track ] );
  mixer = new THREE.AnimationMixer( mesh );
  var clipAction = mixer.clipAction( clip );
  clipAction.play();

	scene.add( mesh );

  renderer = new THREE.WebGLRenderer({alpha:true});
  renderer.setClearColor(0x000000,0)
  renderer.setPixelRatio( window.devicePixelRatio );
  container.appendChild( renderer.domElement );

  onWindowResize();

  window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize( event ) {

  uniforms1.resolution.value.x = window.innerWidth;
  uniforms1.resolution.value.y = window.innerHeight;

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

  requestAnimationFrame( animate );

  render();

}

function render() {

  var delta = clock.getDelta();

  mixer.update( delta );
 

  renderer.render( scene, camera );

}