Untitled

<!DOCTYPE>
<html>
	<head>
		<title>Computer Graphcis - Vertex and Fragment Shader - APT GG Task 1 - Coloring a Sphere</title>
		<script type="text/javascript" src="three.r84.js"></script>
		<script type="text/javascript">
			/**
			 * This part is executed on the CPU: in your browser!
			 * There are a lot of Three.js specific things here, ask me if you feel confused.
			 */
			var renderer, scene, camera; 	// First some global variables
			var sphere;						// We will have one object, a sphere

			var vertexShader, fragmentShader; // These variables will hold the shader code, which will be sent to the GPU

			var lightPosition = new THREE.Vector3(2.0, 2.0, 0.0);	// Light source position is currently in the view space (relative to the camera) for simplicity
			var viewerPosition = new THREE.Vector3(0.0, 0.0, 3.0);	// Viewer position in our right-handed world

			/**
			 * This function is executed once your webpage has been loaded
			 */
			function onLoad() {
				var canvasContainer = document.getElementById('myCanvasContainer'); // We get the element to render our 3D into
				var width = 800;
				var height = 500;

				vertexShader = document.getElementById('vertexShader').textContent;		// We get our shader codes
				fragmentShader = document.getElementById('fragmentShader').textContent;

				renderer = new THREE.WebGLRenderer(); 	// This is Three.js renderer
				renderer.setSize(width, height);
				canvasContainer.appendChild(renderer.domElement); // Adds a rendering viewport into our page

				scene = new THREE.Scene(); // Three.js has a scene, where our 3D objects are in

				//We will use a perspective camera, with FOV 80 degrees
				camera = new THREE.PerspectiveCamera(80, width / height, 1, 1000);
				camera.position.set(viewerPosition.x, viewerPosition.y, viewerPosition.z);
				camera.up = new THREE.Vector3(0, 1, 0);
				camera.lookAt(new THREE.Vector3(0, 0, 0)); // Camera is looking at the center of the world
				scene.add(camera);


				sphere = createSphere();
				scene.add(sphere);

				draw();

				window.addEventListener('keydown', function(event) { // When you press Space, you see the wireframe
					if (event.keyCode == 32) { //Space
						sphere.material.wireframe = !sphere.material.wireframe;
					}
				}, false);
			}

			/**
			 * This is our main rendering loop.
			 */

			var ScaleF = 0;

			function draw() {
				requestAnimationFrame(draw);
				renderer.render(scene, camera);
				sphere.rotateX(0.01);
			}

			/**
			 * Every 3D mesh object consists of a geometry and a material.
			 * Here we create a sphere and use a custom material (with our own shaders)
			 */
			function createSphere() {
				var geometry = new THREE.SphereGeometry(1, 32, 32);
				var material = createShaderMaterial();
				var sphereMesh = new THREE.Mesh(geometry, material);

				return sphereMesh;
			}

			/**
			 * This creates a material, which uses our own shaders
			 */
			function createShaderMaterial() {

				return new THREE.ShaderMaterial({
					uniforms: {
						lightPosition: {
							value: lightPosition
						}
					},
					vertexShader: vertexShader,
					fragmentShader: fragmentShader
				});
			}

		</script>

		<!--
			Below are the shader codes for the vertex and fragment shaders.

			-- Task --
			1) Make 2 varying vec3 variables: interpolatedPosition and interpolatedNormal (feel free to name them as you like)
			   You need to define them in both the vertex and fragment shaders
			2) In the vertex shader assign:
			2.1) The position transformed into view space to interpolatedPosition (note that modelViewMatrix is mat4)
			2.2) The normal (Three.js sends it to you) transformed into view space (use normalMatrix from Three.js) to interpolatedNormal
			3) In the fragment shader:
			3.1) Define the uniform vec3 lightPosition
			3.2) Create a vec3 n, set it to the normalized interpolatedNormal
			3.3) Create a vec3 l, calculate and set it to the normalized vector towards the light source
			3.4) Use n and l to find the Lambertian reflectance coefficient
			3.5) Take into account some color for the material
			3.6) Take into account some ambient light
		-->
		<script id="vertexShader" type="x-shader/x-vertex">

		varying vec3 interpolatedPosition;
		varying vec3 interpolatedNormal;
			void main() {
				interpolatedNormal = normalMatrix * normal;
				interpolatedPosition = (modelViewMatrix * vec4(position, 1.0)).xyz;
				gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
			}
		</script>
		<script id="fragmentShader" type="x-shader/x-fragment">
		varying vec3 interpolatedNormal;
		varying vec3 interpolatedPosition;
		uniform vec3 lightPosition;
			void main() {
				vec3 n = normalize(interpolatedNormal);
				vec3 l = normalize(lightPosition - interpolatedPosition);

				vec3 baseColor = vec3(0.5, 0.5, 0.0);

				vec3 color = baseColor * 0.2;

				gl_FragColor = vec4(color, 1.0);
			}
		</script>
	</head>
	<body onload="onLoad()">
		<div id="myCanvasContainer"></div>
	</body>
</html>