hw5

GLSL

by ak532892

HTML

<div id="info">
  hw5 <br>GLSL
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script id="myVertexShader" type="x-shader/x-vertex">
	uniform int shading;
	uniform int coordinate;
	varying vec4 myeyepos;
	varying vec3 mycolor;
	
	void main() {
		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0);
		if(coordinate == 0){
			vec4 objpos = vec4( position, 1.0);
			if (objpos.x > 0.0) 
				mycolor = vec3 (0, 0, 0);
			else
				mycolor = vec3 (1, 1, 1);
			myeyepos = objpos;
		}
		else if(coordinate == 1){
			vec4 worldpos = modelMatrix * vec4( position, 1.0);
			if (worldpos.x > 0.0) 
				mycolor = vec3 (0, 0, 0);
			else
				mycolor = vec3 (1, 1, 1);
			myeyepos = worldpos;
		}
		else{	
			vec4 eyepos = modelViewMatrix * vec4( position, 1.0);
			if (eyepos.x > 0.0) 
				mycolor = vec3 (0, 0, 0);
			else
				mycolor = vec3 (1, 1, 1);
			myeyepos = eyepos;
		}
	}
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
	uniform int shading;
	varying vec4 myeyepos;
	varying vec3 mycolor;
	vec3 mycolor2;
	
	void perPixelShading() {
		if (myeyepos.x > 0.0) 
			mycolor2 = vec3 (0, 0, 0);
		else
			mycolor2 = vec3 (1, 1, 1);
	}
	
	void main() {
		if(shading == 0){
			gl_FragColor = vec4 (mycolor, 1.0);
		}
		else{
			perPixelShading();
			gl_FragColor = vec4 (mycolor2, 1.0);
		}
	}
</script>

CSS

#info {
  position: absolute;
  top: 2%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}
#gui {
  position: absolute;
  top: 30px;
  right: 1%;
  height: 350px;
  width: 100px;
}

body {
  overflow: hidden;
}

JavaScript

var scene, renderer, camera;
var controls;
var jsonModel, jsonModel2;
var angle = 0;

init();
animate();

function init() {
	var width = window.innerWidth;
	var height = window.innerHeight;

	renderer = new THREE.WebGLRenderer({
		antialias: true
	});
	renderer.setSize(width, height);
	renderer.setClearColor(0x888888);
	document.body.appendChild(renderer.domElement);
	
	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
	camera.position.z = 200;//200
	camera.lookAt(new THREE.Vector3(0, 0, 0));

	controls = new THREE.OrbitControls(camera, renderer.domElement);

	///
	THREE.ImageUtils.crossOrigin = '';
	var ppTexture = THREE.ImageUtils.loadTexture("http://i.imgur.com/MlyH6zx.jpg");
	//change
	var floorMesh = new THREE.Mesh(new THREE.PlaneGeometry(600, 600), new THREE.MeshBasicMaterial({
		map:ppTexture,
		side:THREE.DoubleSide
	}));
	floorMesh.rotation.x = Math.PI / 2;
	scene.add(floorMesh);
	///

	light1 = new THREE.SpotLight(0xffffff, 1.5);
	light1.position.set(0, 150, 0);
	light1.angle = Math.PI/2;
	light1.exponent = 10;
		
	scene.add(light1);

	// shadow map settings
	light1.castShadow = true;
	light1.shadowMapWidth = 1024;
	light1.shadowMapHeight = 1024;
	light1.shadowCameraNear = 10;
	light1.shadowCameraFar = 4000;
	light1.shadowCameraFov = light1.angle / Math.PI * 180;
	light2 = new THREE.DirectionalLight(0xffffff);
	light2.position.set(200, 100, 0);
	light2.castShadow = true;
	light2.shadowCameraLeft = -80;
	light2.shadowCameraTop = -80;
	light2.shadowCameraRight = 80;
	light2.shadowCameraBottom = 80;
	light2.shadowCameraNear = 1;
	light2.shadowCameraFar = 1000;
	light2.shadowBias = -.0001
	light2.shadowMapWidth = light2.shadowMapHeight = 1024;
	light2.shadowDarkness = .7;
	scene.add(light2);

	/////////////////////////////////////////////
	gcontrols = new function() {
		this.shading = 'per-vertex';
		this.coordinate = 'object';
	}

	var gui = new dat.GUI();
	gui.domElement.id = 'gui';

	var f1 =...