/webgl_extrapolation_pick.html

## webgl_extrapolation_pick.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>WebGL Pick - Extrapolation</title>
		<style type='text/css'>
			body{
				position: relative;
				left: 10px;
				top: 10px;
				padding: 0px;
				margin: 0px;
			}
			.container{
				padding: 0px;
				margin: 0px;
			}
			canvas{
				border-style:dashed;
				border-width:thin;
				cursor:crosshair;
				z-index: 0;
			}
		</style>

		<script type='text/javascript' src='./scripts/jquery.min.js'></script>
		<script type='text/javascript' src='./scripts/three.min.js'></script>

		<script type='text/javascript'>

			$(document).ready(function() {
				var camera, scene, renderer;
				var background;
				var projector;

				var quad;
				var follow = false;

				//extrapolation
				var mouseX, mouseY;

				var R = [[0, 0], [0, 0]];
				var dR = [0, 0];
				var d2R = [0, 0];
				var dt = [0, 0];

				function Push(arr, v){
					for(var i = arr.length - 1; i > 0; --i){
						arr[i] = arr[i - 1];
					}
					arr[0] = v;
				}

				var clock = new THREE.Clock();
				var animClock = new THREE.Clock();

				var width = 800, height = 600;

				init();
				animate();

				function animate(){
					requestAnimationFrame( animate );

					var delta = animClock.getDelta();

					if(follow == true){
						var ray = projector.pickingRay(new THREE.Vector2(mouseX, mouseY), camera);
						quad.position.x = ray.origin.x + delta * dR[0] + 0.5 * delta * delta * d2R[0];
						quad.position.y = ray.origin.y + delta * dR[1] + 0.5 * delta * delta * d2R[1];
					}

					renderer.render( scene, camera );
				}

				function onDocumentMouseMove(event){
					event.preventDefault();
					var elem = $("canvas");
					var offset = elem.offset();
					var offsetX = offset.left;
					var offsetY = offset.top;

					Push(dt, clock.getDelta());

					var prevX = mouseX;
					var prevY = mouseY;
					//NDC
					mouseX = ((event.clientX - offsetX) / width) * 2 - 1;
					mouseY = -((event.clientY - offsetY) / height) * 2 + 1;

					Push(R, [mouseX - prevX, mouseY - prevY]);

					dR = [R[0][0]/dt[0], R[0][1]/dt[0]];
					d2R = [(R[1][0] - R[0][0])/(dt[0] + dt[1]), (R[1][1] - R[0][1])/(dt[0] + dt[1])];
				}

				function onDocumentMouseDown(event){
					console.log("DOWN");
					event.preventDefault();
					var ray = projector.pickingRay(new THREE.Vector2(mouseX, mouseY), camera);

					var intersects = ray.intersectObjects(scene.children);

					if(intersects.length > 0){
						follow = true;
					}
				}

				function onDocumentMouseUp(event){
					event.preventDefault();

					console.log("UP");
					follow = false;
				}

				function init(){
					camera = new THREE.OrthographicCamera(-width/2.0, width/2.0, height/2.0, -height/2.0, -1, 10000);
					camera.position.z = 1000;

					scene = new THREE.Scene();

					projector = new THREE.Projector();

					var material = new THREE.MeshBasicMaterial({color: 0xff0000});
					quad = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), material);
					quad.position.z = -500;
					scene.add(quad);

					renderer = new THREE.WebGLRenderer();
					//renderer = new THREE.CanvasRenderer();
					renderer.setSize(width, height);

					$(".container").append(renderer.domElement);

					$(".container")[0].addEventListener('mousedown', onDocumentMouseDown, false);
					$(".container")[0].addEventListener('mousemove', onDocumentMouseMove, false);
					$(".container")[0].addEventListener('mouseup', onDocumentMouseUp, false);

					clock.start();
					animClock.start();
				}
			});
		</script>
	</head>

	<body>
		<div class = 'container'>
		</div>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>WebGL Pick - Extrapolation</title>
	<style type='text/css'>
	body{
	position: relative;
	left: 10px;
	top: 10px;
	padding: 0px;
	margin: 0px;
	}
	.container{
	padding: 0px;
	margin: 0px;
	}
	canvas{
	border-style:dashed;
	border-width:thin;
	cursor:crosshair;
	z-index: 0;
	}
	</style>

	<script type='text/javascript' src='./scripts/jquery.min.js'></script>
	<script type='text/javascript' src='./scripts/three.min.js'></script>

	<script type='text/javascript'>

	$(document).ready(function() {
	var camera, scene, renderer;
	var background;
	var projector;

	var quad;
	var follow = false;

	//extrapolation
	var mouseX, mouseY;

	var R = [[0, 0], [0, 0]];
	var dR = [0, 0];
	var d2R = [0, 0];
	var dt = [0, 0];

	function Push(arr, v){
	for(var i = arr.length - 1; i > 0; --i){
	arr[i] = arr[i - 1];
	}
	arr[0] = v;
	}

	var clock = new THREE.Clock();
	var animClock = new THREE.Clock();

	var width = 800, height = 600;

	init();
	animate();

	function animate(){
	requestAnimationFrame( animate );

	var delta = animClock.getDelta();

	if(follow == true){
	var ray = projector.pickingRay(new THREE.Vector2(mouseX, mouseY), camera);
	quad.position.x = ray.origin.x + delta * dR[0] + 0.5 * delta * delta * d2R[0];
	quad.position.y = ray.origin.y + delta * dR[1] + 0.5 * delta * delta * d2R[1];
	}

	renderer.render( scene, camera );
	}

	function onDocumentMouseMove(event){
	event.preventDefault();
	var elem = $("canvas");
	var offset = elem.offset();
	var offsetX = offset.left;
	var offsetY = offset.top;

	Push(dt, clock.getDelta());

	var prevX = mouseX;
	var prevY = mouseY;
	//NDC
	mouseX = ((event.clientX - offsetX) / width) * 2 - 1;
	mouseY = -((event.clientY - offsetY) / height) * 2 + 1;

	Push(R, [mouseX - prevX, mouseY - prevY]);

	dR = [R[0][0]/dt[0], R[0][1]/dt[0]];
	d2R = [(R[1][0] - R[0][0])/(dt[0] + dt[1]), (R[1][1] - R[0][1])/(dt[0] + dt[1])];
	}

	function onDocumentMouseDown(event){
	console.log("DOWN");
	event.preventDefault();
	var ray = projector.pickingRay(new THREE.Vector2(mouseX, mouseY), camera);

	var intersects = ray.intersectObjects(scene.children);

	if(intersects.length > 0){
	follow = true;
	}
	}

	function onDocumentMouseUp(event){
	event.preventDefault();

	console.log("UP");
	follow = false;
	}

	function init(){
	camera = new THREE.OrthographicCamera(-width/2.0, width/2.0, height/2.0, -height/2.0, -1, 10000);
	camera.position.z = 1000;

	scene = new THREE.Scene();

	projector = new THREE.Projector();

	var material = new THREE.MeshBasicMaterial({color: 0xff0000});
	quad = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), material);
	quad.position.z = -500;
	scene.add(quad);

	renderer = new THREE.WebGLRenderer();
	//renderer = new THREE.CanvasRenderer();
	renderer.setSize(width, height);

	$(".container").append(renderer.domElement);

	$(".container")[0].addEventListener('mousedown', onDocumentMouseDown, false);
	$(".container")[0].addEventListener('mousemove', onDocumentMouseMove, false);
	$(".container")[0].addEventListener('mouseup', onDocumentMouseUp, false);

	clock.start();
	animClock.start();
	}
	});
	</script>
	</head>

	<body>
	<div class = 'container'>
	</div>
	</body>
	</html>