Shaders-Torus.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Shaders</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }

		</style>
		<meta charset="utf-8">
	
	<body>
	
		<script src="js/three.js"></script>
		<script src="js/OrbitControls.js"></script>
		
		<script id="vert" type="shader">
		
			uniform float time;
			
			varying vec3 norm;
			varying vec2 vUv;
			varying vec3 pos;
		
			void main() {
				norm = normal;
				vUv = uv;
				pos = position;
				
				vec3 p1 = position + ( 0.2 * normal * (sin(time * 13.0) + 0.1) );
				
				vec3 p2 = vec3( p1.x , p1.y + 0.1 * sin(time * 13.0) * sin(p1.x * 9.0 + time * 50.0) , 
				
				p1.z + 0.08 * sin( -time * 21.0) * sin(p1.y * 9.0 + time * 90.0) );
				
				gl_Position = projectionMatrix * modelViewMatrix * vec4(p2, 1.0);
			}	
		
		</script>
		
		<script id="frag" type="shader">
		
			uniform float time;
			
			uniform sampler2D tex;
			
			varying vec3 norm;
			varying vec2 vUv;
			varying vec3 pos;
			
			void main() {		
			
			//	gl_FragColor = vec4(0.8, sin( time * gl_FragCoord.x ), cos( time * gl_FragCoord.y ), 1.0);
			
				vec3 pointLight = vec3( 3.0 * cos(20.0 * time), 2.5 * sin(20.0 * time), 3.0);
				
				vec3 lightRay = normalize(pointLight - pos);
			
				float lightness = pow( abs(dot( norm, lightRay )), 5.5 ) + 0.25;
				
				float blip = 1.0 - pow( sin( gl_FragCoord.y / 5.0) + 0.9, 6.0) ;
			
				vec3 tColor = texture2D( tex, vec2( vUv.x * sin( 1.8 * time ), vUv.y * cos ( 6.89 * time) ) ).rgb;
				
				gl_FragColor = vec4( tColor *lightness, 1.0 );

			}
		
		</script>
		
		<script>

			// @author PWhiddy
		
			var camera, scene, renderer, shaderMat, cubey, controls;
		
			initialize();
			
			render();
		
			function initialize() {
		
				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 200 );
				camera.position.z = 9;
				
				scene = new THREE.Scene();
				
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setSize( window.innerWidth, window.innerHeight ); 
				renderer.setPixelRatio( window.devicePixelRatio );

				document.body.appendChild( renderer.domElement );

				controls = new THREE.OrbitControls( camera, renderer.domElement );
				controls.enableDamping = true;
				controls.dampingFactor = 0.25;
				controls.zoomSpeed = 0.5;
				controls.rotateSpeed = 0.5;
				
				var geo = new THREE.TorusGeometry( 1, 0.5, 150, 300);
				geo.computeFaceNormals();
				
				var dim = 512;
				var size = dim * dim;
				var data = new Uint8Array( size * 3);
				for (var i = 0; i < size; i++) {
					data[ i * 3 + 0] = ( Math.sin( i / 2000 ) * 255 );
					data[ i * 3 + 1] = Math.cos(i % 50) * 255;
					data[ i * 3 + 2] = (Math.cos(i / 10000) * 1000) % 255;
				}
				
				map = new THREE.DataTexture( data, dim, dim, THREE.RGBFormat );
				map.needsUpdate = true;
				
				var material = new THREE.MeshBasicMaterial( { map: map, side: THREE.DoubleSide } );
				shaderMat = new THREE.ShaderMaterial( {
					uniforms: { time: { type: "f", value: 2.36 },
								 tex: { type: "t", value: map }
							   },
					vertexShader: document.getElementById( 'vert' ).textContent,
					fragmentShader: document.getElementById( 'frag' ).textContent
				} );


				cubey = new THREE.Mesh(geo, shaderMat);
				
				//alert(renderer.getContext().getParameter(renderer.getContext().MAX_VERTEX_TEXTURE_IMAGE_UNITS));
				
				scene.add( cubey );
				cubey.rotation.x += 2.0;
				
			}
			
			
			function render() {
				requestAnimationFrame( render );
				controls.update();
				cubey.rotation.z += 0.0002;
				cubey.rotation.x += 0.0025;
				cubey.rotation.y += 0.0001;
				shaderMat.uniforms.time.value += 0.0005;
				renderer.render( scene, camera);
			}
		
		
		</script>
 	
	</body>