HW5

GLSL

by KUO YOU-TING

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 vec3 color;
  varying vec4 positionTmp;
	
  void perVertexShading() {
  	if (positionTmp.x > 0.0) 
    	color = vec3 (1, 1, 1);
    else
    	color = vec3 (0, 0, 0);
  }
	void perPixelShading() {}
	void main() {
		gl_Position = projectionMatrix* modelViewMatrix * vec4(position, 1.0);
    if(coordinate == 0)
    	positionTmp = vec4(position, 1.0);
    else if(coordinate == 1)
    	positionTmp = modelMatrix * vec4(position, 1.0);
    else 
    	positionTmp = modelViewMatrix * vec4(position, 1.0);
    
    if (shading == 0)  // per-vertex shading
    	perVertexShading();
    else
    	perPixelShading();
  }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
	uniform int shading;
  varying vec3 color;
  varying vec4 positionTmp;
	void main() {
		if(shading == 0)
    	gl_FragColor = vec4 (color, 1.0);
    else {
    	if (positionTmp.x > 0.0) 
    		gl_FragColor = vec4 (1, 1, 1, 1.0);
    	else
    		gl_FragColor = vec4 (0, 0, 0, 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;
var floor;
var light = new THREE.Object3D();

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, 0.1, 10000);
  camera.position.set(0, 100, 200);
  camera.lookAt(new THREE.Vector3(0, 0, 0));

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

	floor = new THREE.Mesh(new THREE.PlaneGeometry(200, 200, 32),  new THREE.MeshLambertMaterial({color: 0x4761c9, side: THREE.DoubleSide}));
  floor.rotation.x = Math.PI/2;
  floor.receiveShadow = true;
  scene.add(floor);

  // spotlight
  light1 = new THREE.SpotLight(0xffffff, 1.5);
  light1.position.set(-100, 200, 100);
  light1.angle = Math.PI/4;
  light1.exponent = 10;
  light.add(light1);
  scene.add(light);

  // 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;
  
/////////////////////////////////////////////
	gcontrols = new function() {
  	this.floor = 'Lambert';
    this.shading = 0;
    this.coordinate = 0;
  }

  var gui = new dat.GUI();
  gui.domElement.id = 'gui';
	
  var f1 = gui.addFolder("Floor Geometry");
  f1.add (gcontrols, 'floor', ['Lambert', 'Phong']);
  var f2 = gui.addFolder("Coordinate System");
  f2.add (gcontrols, 'coordinate', {'object': 0, 'world': 1, 'eye': 2});
  var f3 = gui.addFolder('Shading Computation');
  f3.add (gcontrols, 'shading', {'per-vertex':0, 'per-pixel':1});

/////////////////////////////////////////////////////////////////
  teapotMaterial = new THREE.ShaderMaterial({
  ...