GLSL Filters

RTT

by ak532892

HTML

<div id="container"></div>
<div id="info">
<br/> Homework 8
<br/>
</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">
	varying vec2 vUv;
	void main() {
		gl_Position = projectionMatrix* modelViewMatrix * vec4( position, 1.0);
		vUv = uv; 
	}
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
	uniform sampler2D texture; 
	uniform int imageSize;
	varying vec2 vUv; 
	float step_w = 1.0/float(imageSize); 
	float step_h = 1.0/float(imageSize); 
	//http://stackoverflow.com/questions/15262729/const-float-array-in-webgl-shader 
	void main() { 
		float kernel[9];
		
		float gx[9];
		
		gx[0] = gx[6] = -1.0;
		gx[1] = gx[4] = gx[7] = 0.0;
		gx[2] = gx[8] = 1.0;
		gx[3] = -2.0;
		gx[5] = 2.0;
		
		float gy[9];
		
		gy[0] = gy[2] = -1.0;
		gy[3] = gy[4] = gy[5] = 0.0;
		gy[6] = gy[8] = 1.0;
		gy[1] = -2.0;
		gy[7] = 2.0;
		
		//for (int i = 0 ; i < 9; i++)
//			kernel[i] = sqrt((gx[i] * gx[i]) + (gy[i] * gy[i]));
		
		vec2 offset[9]; 
		offset[0]=vec2(-step_w, -step_h); 
		offset[1]=vec2(0.0, -step_h); offset[2]=vec2(step_w, -step_h), 
		offset[3]=vec2(-step_w, 0.0), offset[4]=vec2(0.0, 0.0), offset[5]=vec2(step_w, 0.0), 
		offset[6]=vec2(-step_w, step_h), offset[7]=vec2(0.0, step_h), offset[8]=vec2(step_w, step_h); 
		vec3 sum = vec3(0.0);
		float Gx = 0.0, Gy = 0.0;
		if (vUv.s < 0.49) { 
			for (int i = 0 ; i < 9; i++) { 
				float tmp = texture2D (texture, vUv+offset[i]).r; 
				Gx += tmp * gx[i];
				Gy += tmp * gy[i];
			} 
			vec3 n = normalize(cross(vec3(1, 0, Gx), vec3(0, 1, Gy)));
			gl_FragColor = vec4 (((n + 1.0) / 2.0), 1.0); 
		} else if (vUv.s > 0.51) { 
			sum = texture2D (texture, vUv).rgb;
			gl_FragColor = vec4 (sum, 1.0); 
		} else { 
			sum = vec3 (1.0, 0.0,...

CSS

body {
	  background-color: #fff;
	  color: #111;
	  margin: 0px;
	  overflow: hidden;
	  font-family: Monospace;
	  font-size: 20px;
	  position: absolute;
	}
  
	#info {
	  position: absolute;
	  top: 0px;
	  width: 100%;
	  padding: 5px;
	  text-align: center;
	  color: #ffff00
	}

JavaScript

var scene, renderer, camera, controls;
var material_shh;
var width, height;
var scene2, camera2, rtTexture;
var tex1;
var pointLight, lightSphere;
var angle = 0;

init();
animate();

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

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

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100000);
	camera.position.y = 80;
	camera.position.z = 300;
	camera.lookAt(new THREE.Vector3(0, 0, 0));

	// add control here (after the camera is defined)
	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);
	scene.add(pointLight);
	
	lightSphere = new THREE.Mesh(new THREE.SphereGeometry(5),
    new THREE.MeshBasicMaterial({
        color: 0xffff00,
        wireframe: true
    }));
    scene.add(lightSphere);
	
	var ambientLight = new THREE.AmbientLight(0x555555);
	scene.add(ambientLight);

	window.addEventListener('resize', onWindowResize, false);

	var vertShader = document.getElementById('myVertexShader').innerHTML;
	var fragShader = document.getElementById('myFragmentShader').innerHTML;
	THREE.ImageUtils.crossOrigin = '';
	tex1 = THREE.ImageUtils.loadTexture('http://ak532892.github.io/ComputerGraphics2016/hw/hw4/images/410105130.jpg');

	var uniforms = {
		imageSize: {
			type: 'i',
			value: 256
		},
		texture: {
			type: 't',
			value: tex1
		} ,
	};

	material_shh = new THREE.ShaderMaterial({
		uniforms: uniforms,
		vertexShader: vertShader,
		fragmentShader: fragShader
	});

	// all face uses the same material; 
	// no need for MeshFaceMaterial (materialArray)
	material_shh.side = THREE.DoubleSide;
	var...