HW5

shader and shadow

by chaiche

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="https://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 pos;
	varying float which;

	void perVertexShading() {
		which = 1.0;
		if (pos.x > 0.0) 
			color = vec3 (1,1,1);
		else
			color = vec3 (0,0,0);
	}
	void perPixelShading() {
		which = 2.0;
	}
	void main() {
		
		gl_Position = projectionMatrix* modelViewMatrix * vec4( position, 1.0);

		//posPixel = gl_Position;
		
		if(coordinate == 0){
			pos = vec4(position,1.0);
		}	
		else if(coordinate == 1){
			pos = modelMatrix* vec4( position, 1.0);
		}
		else if(coordinate == 2){
			pos = modelViewMatrix * vec4( position, 1.0);
		}
		if (shading == 0)  // per-vertex shading
			perVertexShading();
		else
			perPixelShading();
	}
</script>

<script id="myFragmentShader" type="x-shader/x-fragment">
  	
  	varying vec3 color;
	varying vec4 pos;
	varying float which;

	void main() {
		if(which ==1.0){
			gl_FragColor = vec4 (color, 1.0);
		}
		else if(which==2.0){
			if (pos.x > 0.0) 
				gl_FragColor = vec4 (1.0,1.0,1.0, 1.0);
			else
				gl_FragColor = vec4 (0.0,0.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;

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.z = 200;
  camera.lookAt(new THREE.Vector3(0, 0, 0));

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

  // var gridXZ = new THREE.GridHelper(100, 10);
  // gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
  // scene.add(gridXZ);

  // pointLight = new THREE.PointLight(0xffffff);
  // pointLight.position.set(200, 300, 200);
  // scene.add(pointLight);
  // var ambientLight = new THREE.AmbientLight(0x111111);
  // scene.add(ambientLight);

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

  var gui = new dat.GUI();

  gui.domElement.id = 'gui';

  var f1 = gui.addFolder("Coordinate System");
  f1.add (gcontrols, 'coordinate', ['object', 'world', 'eye']);
  var f2 = gui.addFolder('Shading Computation');
  f2.add (gcontrols, 'shading', ['per-vertex', 'per-pixel']);
  var f3 = gui.addFolder("floorMaterial");
  f3.add (gcontrols, 'floorMaterial', ['lambert', 'phong']);

/////////////////////////////////////////////////////////////////
  teapotMaterial = new THREE.ShaderMaterial({
    uniforms: {
      lightpos: {value: new THREE.Vector3(0, 30, 20) },
	  shading: {type : 'i',value: 0},
      coordinate: {type: 'i',value: 0},
		},
    vertexShader: document.getElementById('myVertexShader').textContent,
    fragmentShader: document.getElementById('myFragmentShader').textContent
  });

  var jsonLoader = new...