index.html

<!DOCTYPE html>
<html lang="en">

<head>
	<title>Knittable Stitch Meshes</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link rel="stylesheet" href="ksm-core/main.css">
</head>

<body>

<div id="title">
	This is the demo for </br>
	<em>Kui Wu, Hannah Swan, Cem Yuksel,</em></br>
	<em><a href="http://people.csail.mit.edu/kuiwu/stitchmodeling#knittable"> Knittable Stitch Meshes</a>,</em> </br>
	<em>ACM Transactions on Graphics (TOG), 38, 1, 2019</em>
</div>

<div id="info">
	<h1 id="model_name">Teapot tiny</h1>
	<div>Press (N) or (Next) button to start the demo / next step</div>
	<div>Press (B) or (Back) button to back to the previous step</div>
	<div>Drag (Step) to the certain step</div>
</div>

<div id="instr0">
</div>
<div id="instr1">
</div>
<div id="instr2">
</div>
<div id="instr3">
</div>
<div id="instr4">
</div>
<div id="instr5">
</div>
<div id="instr6">
</div>

<div id="copyright">
	©Copyright by <a href="http://people.csail.mit.edu/kuiwu/">Kui Wu</a>. All rights reserved.
</div>

<script src="ksm-core/three.js"></script>
<script src="ksm-core/dat.gui.min.js"></script>
<script src="ksm-core/detector.js"></script>
<script src="ksm-core/trackball-controls.js"></script>
<script src="ksm-core/vector.js"></script>
<script src="ksm-core/emscripten-memory-manager.js"></script>
<script src="ksm-core/vertex.js"></script>
<script src="ksm-core/edge.js"></script>
<script src="ksm-core/face.js"></script>
<script src="ksm-core/halfedge.js"></script>
<script src="ksm-core/corner.js"></script>
<script src="ksm-core/mesh.js"></script>
<script src="ksm-core/geometry.js"></script>
<script src="ksm-core/meshio.js"></script>

<script src="input/teapot_tiny.js"></script>
<script src="input/teapot_tiny_order.js"></script>
<script src="input/shape_A.js"></script>
<script src="input/shape_A_order.js"></script>
<script src="input/shape_C.js"></script>
<script src="input/shape_C_order.js"></script>
<script src="input/shape_G.js"></script>
<script src="input/shape_G_order.js"></script>
<script src="input/shape_I.js"></script>
<script src="input/shape_I_order.js"></script>
<script src="input/shape_S.js"></script>
<script src="input/shape_S_order.js"></script>
<script src="input/shape_P.js"></script>
<script src="input/shape_P_order.js"></script>
<script src="input/shape_R.js"></script>
<script src="input/shape_R_order.js"></script>
<script src="input/shape_H.js"></script>
<script src="input/shape_H_order.js"></script>

<script>
	if (!Detector.webgl) Detector.addGetWebGLMessage();

	let input = document.getElementById("fileInput");
	let renderer = undefined;
	let camera = undefined;
	let controls = undefined;
	let showWireframe = true;
	let shiftClick = false;
	let scene = undefined;
	let threeMesh = undefined;
	let threeMeshCurrent = undefined;
	let threeGeometry = undefined;
	let threeGeometryCurrent = undefined;
	let wireframe = undefined;
	let threeMaterial = undefined;
	let positions = undefined;
	let normals = undefined;
	let colors = undefined;
	let colorsCurrent = undefined;
	let indices = undefined;
	let indicesCurrent = undefined;

	let memoryManager = new EmscriptenMemoryManager();
	let mesh = undefined;
	let geometry = undefined;

	let types = undefined;

	let faceIdPrefixsum = undefined;
	let currentInstId = -1;

	var obj = {
		Step: currentInstId,
	};

	let stepListener = undefined;

	let metaElement = undefined;
	let instrElement0 = undefined;
	let instrElement1 = undefined;
	let instrElement2 = undefined;
	let instrElement3 = undefined;
	let instrElement4 = undefined;
	let instrElement5 = undefined;
	let instrElement6 = undefined;

	let knitting_order = undefined;
	let instructions = undefined;

	let mesh_data = {
		"Teapot tiny" : teapot_tiny,
		"Shape A" : shape_A,
		"Shape C" : shape_C,
		"Shape G" : shape_G,
		"Shape I" : shape_I,
		"Shape S" : shape_S,
		"Shape P" : shape_P,
		"Shape R" : shape_R,
		"Shape H" : shape_H
	};

	let order_data = {
		"Teapot tiny" : teapot_tiny_knitting_order,
		"Shape A" : shape_A_knitting_order,
		"Shape C" : shape_C_knitting_order,
		"Shape G" : shape_G_knitting_order,
		"Shape I" : shape_I_knitting_order,
		"Shape S" : shape_S_knitting_order,
		"Shape P" : shape_P_knitting_order,
		"Shape R" : shape_R_knitting_order,
		"Shape H" : shape_H_knitting_order,
	};

	let instr_data = {
		"Teapot tiny" : teapot_tiny_instructions,
		"Shape A" : shape_A_instructions,
		"Shape C" : shape_C_instructions,
		"Shape G" : shape_G_instructions,
		"Shape I" : shape_I_instructions,
		"Shape S" : shape_S_instructions,
		"Shape P" : shape_P_instructions,
		"Shape R" : shape_R_instructions,
		"Shape H" : shape_H_instructions,
	};

	//const ORANGE = new Vector(1.0, 0.5, 0.0);
	const GREY = new Vector(0.688, 0.688, 0.688);
	const GREEN = new Vector(0.3, 0.6, 0.3);
	const YELLOW = new Vector(1.0, 1.0, 0.0);
	const BLUE = new Vector(0.1, 0.4, 0.8);
	const RED = new Vector(0.5, 0.1, 0.1);
	const DARKGREY = new Vector(0.344, 0.344, 0.344);
	const DARKRED = new Vector(1.0, 0.1, 0.1);
	const DARKBLUE = new Vector(0.3, 0.3, 1.0);
	const MAGENTA = new Vector(1.0, 0.2, 1.0);
	const ORANGE = new Vector(1.0, 0.7, 0.1);
	const CYAN = new Vector(0.1, 0.8, 0.7);

	let guiFields = {
		"Load Mesh": function() {
			input.click();
		},
		"Model": "Teapot tiny",
		"Reset": function() {

		},
		"Next": function() {
			currentInstId++;
			updateInstAndMesh();

			stepListener.object.Step = currentInstId;
			stepListener.updateDisplay();
		},
		"Back": function() {
			currentInstId--;
			updateInstAndMesh();

			stepListener.object.Step = currentInstId;
			stepListener.updateDisplay();
		},
		"Show Wireframe": showWireframe
	};

	init();
	animate();

	function init() {
		let container = document.createElement("div");
		document.body.appendChild(container);

		initRenderer(container);
		initGUI();
		initCamera();
		initScene();
		initLights();
		initMesh(teapot_tiny);
		initControls();
		addEventListeners();
	}

	function initRenderer(container) {
		renderer = new THREE.WebGLRenderer({
			antialias: true
		});
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.setClearColor(0xffffff, 1.0);
		renderer.setSize(window.innerWidth, window.innerHeight);
		container.appendChild(renderer.domElement);
	}

	function initGUI() {
		let gui = new dat.GUI( { fontSize: 20  } );
		gui.add(guiFields, "Model", ["Teapot tiny",  "Shape G", "Shape R",  "Shape A",  "Shape P",  "Shape H", "Shape I", "Shape C", "Shape S"]).onChange(updateModel).listen();
		knitting_order = teapot_tiny_knitting_order;
		instructions = teapot_tiny_instructions;
		stepListener = gui.add(obj, 'Step').min(0).max(instructions.length - 1).step(1);
		gui.add(guiFields, "Next");
		gui.add(guiFields, "Back");
		gui.add(guiFields, "Show Wireframe").onChange(toggleWireframe).listen();
	}

	function updateModel(model_id) {
		knitting_order = order_data[model_id];
		instructions = instr_data[model_id];
		initMesh(mesh_data[model_id]);
		stepListener.max(instructions.length - 1);
		stepListener.setValue(0);

		let modelName = document.getElementById("model_name");
		modelName.textContent = model_id;
	}

	window.onload = function() {

	}

	stepListener.onChange(
			function(newStep) {
				currentInstId = newStep;
				updateInstAndMesh();
			});

	function toggleWireframe(checked) {
		showWireframe = checked;
		if (showWireframe) threeMesh.add(wireframe);
		else threeMesh.remove(wireframe);
	}

	function initCamera() {
		const fov = 45.0;
		const aspect = window.innerWidth / window.innerHeight;
		const near = 0.1;
		const far = 1000;
		const eyeZ = 3.5;

		camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
		camera.position.z = eyeZ;
	}

	function initScene() {
		scene = new THREE.Scene();
		scene.background = new THREE.Color(0xffffff);
	}

	function initLights() {
		let ambient = new THREE.AmbientLight(0xffffff, 0.35);
		camera.add(ambient);

		let point = new THREE.PointLight(0xffffff);
		point.position.set(2, 20, 15);
		camera.add(point);

		scene.add(camera);
	}

	function initMesh(text) {
		let polygonSoup = MeshIO.readOBJ(text);
		types = polygonSoup.t;
		mesh = new Mesh();
		if (mesh.build(polygonSoup)) {
			// remove any previously loaded mesh from scene
			scene.remove(threeMesh);
			scene.remove(threeMeshCurrent);
			memoryManager.deleteExcept([]);

			// create geometry object
			geometry = new Geometry(mesh, polygonSoup["v"]);

			// create a THREE.js mesh (and geometry) object
			initThreeMesh();
			scene.add(threeMesh);
			scene.add(threeMeshCurrent);

			guiFields["Reset"]();

			instrElement0 = document.getElementById("instr0");
			instrElement0.textContent = " ";
			instrElement1 = document.getElementById("instr1");
			instrElement1.textContent = " ";
			instrElement2 = document.getElementById("instr2");
			instrElement2.textContent = " ";
			instrElement3 = document.getElementById("instr3");
			instrElement3.textContent = "Ready to knit?";
			instrElement4 = document.getElementById("instr4");
			instrElement4.textContent = " ";
			instrElement5 = document.getElementById("instr5");
			instrElement5.textContent = " ";
			instrElement6 = document.getElementById("instr6");
			instrElement6.textContent = " ";
		} else {
			alert("Unable to build halfedge mesh");
		}
	}

	function initThreeMesh() {

		faceIdPrefixsum = new Uint32Array(knitting_order.length);
		let len = 0;
		for (let fi of knitting_order[0]) {
			let f = mesh.faces[fi]
			len += (f.degree() - 2) * 3;
		}

		faceIdPrefixsum[0] = len;

		for (let i = 1; i < knitting_order.length; i++)
		{
			len = 0;
			for (let fi of knitting_order[i]) {
				let f = mesh.faces[fi]
				len += (f.degree() - 2) * 3;
			}
			faceIdPrefixsum[i] = faceIdPrefixsum[i-1] + len;
		}

		// create geometry object
		threeGeometry = new THREE.BufferGeometry();
		threeGeometryCurrent = new THREE.BufferGeometry();

		// fill position, normal and color buffers
		let V = 0;
		for (let faceList of knitting_order)
		{
			for (let fi of faceList) {
				let f = mesh.faces[fi]
				V += f.degree();
			}
		}

		positions = new Float32Array(V * 3);
		normals = new Float32Array(V * 3);
		colors = new Float32Array(V * 3);
		colorsCurrent = new Float32Array(V * 3);
		V = 0;
		for (let faceList of knitting_order)
		{
			for (let fi of faceList)
			{
				let f = mesh.faces[fi]
				let degree = f.degree();
				let halfedge = f.adjacentHalfedges()._halfedge;
				let normal = geometry.faceNormal(f);
				for (let i = 0; i < degree; i++) {
					positions[V * 3 + 0] = geometry.positions[halfedge.vertex.index].x;
					positions[V * 3 + 1] = geometry.positions[halfedge.vertex.index].y;
					positions[V * 3 + 2] = geometry.positions[halfedge.vertex.index].z;
					normals[V * 3 + 0] = normal.x;
					normals[V * 3 + 1] = normal.y;
					normals[V * 3 + 2] = normal.z;
					if (types[fi] == 0) {
						colors[V * 3 + 0] = GREY.x;
						colors[V * 3 + 1] = GREY.y;
						colors[V * 3 + 2] = GREY.z;
					}
					else if (types[fi] == 1) {
						colors[V * 3 + 0] = GREEN.x;
						colors[V * 3 + 1] = GREEN.y;
						colors[V * 3 + 2] = GREEN.z;
					}
					else if (types[fi] == 2) {
						colors[V * 3 + 0] = BLUE.x;
						colors[V * 3 + 1] = BLUE.y;
						colors[V * 3 + 2] = BLUE.z;
					}
					else if (types[fi] == 3) {
						colors[V * 3 + 0] = YELLOW.x;
						colors[V * 3 + 1] = YELLOW.y;
						colors[V * 3 + 2] = YELLOW.z;
					}
					else if (types[fi] == 4) {
						colors[V * 3 + 0] = RED.x;
						colors[V * 3 + 1] = RED.y;
						colors[V * 3 + 2] = RED.z;
					}
					else if (types[fi] == 5) {
						colors[V * 3 + 0] = DARKGREY.x;
						colors[V * 3 + 1] = DARKGREY.y;
						colors[V * 3 + 2] = DARKGREY.z;
					}
					else if (types[fi] == 6) {
						colors[V * 3 + 0] = CYAN.x;
						colors[V * 3 + 1] = CYAN.y;
						colors[V * 3 + 2] = CYAN.z;
					}
					else if (types[fi] == 7) {
						colors[V * 3 + 0] = ORANGE.x;
						colors[V * 3 + 1] = ORANGE.y;
						colors[V * 3 + 2] = ORANGE.z;
					}
					else if (types[fi] == 8) {
						colors[V * 3 + 0] = MAGENTA.x;
						colors[V * 3 + 1] = MAGENTA.y;
						colors[V * 3 + 2] = MAGENTA.z;
					}
					else if (types[fi] == 9) {
						colors[V * 3 + 0] = DARKBLUE.x;
						colors[V * 3 + 1] = DARKBLUE.y;
						colors[V * 3 + 2] = DARKBLUE.z;
					}
					else
					{
						colors[V * 3 + 0] = 0;
						colors[V * 3 + 1] = 0;
						colors[V * 3 + 2] = 0;
					}

					colorsCurrent[V * 3 + 0] = DARKRED.x;
					colorsCurrent[V * 3 + 1] = DARKRED.y;
					colorsCurrent[V * 3 + 2] = DARKRED.z;

					halfedge = halfedge.next;
					V++;
				}
			}
		}

		// fill index buffer
		let totalCount = 0;
		for (let faceList of knitting_order)
		{
			for (let fi of faceList) {
				let f = mesh.faces[fi]
				totalCount += (f.degree() - 2) * 3;
			}
		}
		indices = new Uint32Array(totalCount);
		indicesCurrent = indices.slice(0, 0);
		totalCount = 0;
		V = 0;
		for (let faceList of knitting_order)
		{
			for (let fi of faceList) {
				let f = mesh.faces[fi]
				let degree = f.degree();
				for (let i = 1; i < degree - 1; i++) {
					indices[totalCount++] = V;
					indices[totalCount++] = V + i;
					indices[totalCount++] = V + i + 1;
				}
				V += degree;
			}
		}

		// set geometry
		threeGeometry.setIndex(new THREE.BufferAttribute(indices, 1));
		threeGeometry.addAttribute("position", new THREE.BufferAttribute(positions, 3));
		threeGeometry.addAttribute("normal", new THREE.BufferAttribute(normals, 3));
		threeGeometry.addAttribute("color", new THREE.BufferAttribute(colors, 3));

		threeGeometryCurrent.setIndex(new THREE.BufferAttribute(indicesCurrent, 1));
		threeGeometryCurrent.addAttribute("position", new THREE.BufferAttribute(positions, 3));
		threeGeometryCurrent.addAttribute("normal", new THREE.BufferAttribute(normals, 3));
		threeGeometryCurrent.addAttribute("color", new THREE.BufferAttribute(colorsCurrent, 3));

		// create material
		threeMaterial = new THREE.MeshPhongMaterial({
			vertexColors: THREE.VertexColors,
			polygonOffset: true,
			polygonOffsetFactor: 1,
			polygonOffsetUnits: 1,
			side: THREE.DoubleSide
		});

		// create wireframe
		let totalEdgeCount = 0;
		for (let f of mesh.faces) {
			totalEdgeCount += f.degree();
		}

		let edgePositions = new Float32Array(totalEdgeCount * 2 * 3);
		totalEdgeCount = 0;
		for (let f of mesh.faces) {
			let degree = f.degree();
			let halfedge = f.adjacentHalfedges()._halfedge;
			for (let i = 0; i < degree; i++) {
				edgePositions[totalEdgeCount * 3 + 0] = geometry.positions[halfedge.vertex.index].x;
				edgePositions[totalEdgeCount * 3 + 1] = geometry.positions[halfedge.vertex.index].y;
				edgePositions[totalEdgeCount * 3 + 2] = geometry.positions[halfedge.vertex.index].z;
				totalEdgeCount++;
				halfedge = halfedge.next;
				edgePositions[totalEdgeCount * 3 + 0] = geometry.positions[halfedge.vertex.index].x;
				edgePositions[totalEdgeCount * 3 + 1] = geometry.positions[halfedge.vertex.index].y;
				edgePositions[totalEdgeCount * 3 + 2] = geometry.positions[halfedge.vertex.index].z;
				totalEdgeCount++;
			}
		}

		let frameGeometry = new THREE.BufferGeometry();
		frameGeometry.addAttribute('position', new THREE.BufferAttribute(edgePositions, 3));
		const material = new THREE.LineBasicMaterial({
			color: 0x000000,
			linewidth: 0.75,
			opacity: 0.2,
			transparent: true
		});
		wireframe = new THREE.LineSegments(frameGeometry, material);

		// create mesh
		threeMesh = new THREE.Mesh(threeGeometry, threeMaterial);
		threeMeshCurrent = new THREE.Mesh(threeGeometryCurrent, threeMaterial);

		// toggle wireframe
		toggleWireframe(showWireframe);
	}

	function initControls() {
		controls = new THREE.TrackballControls(camera, renderer.domElement);
		controls.rotateSpeed = 5.0;
	}

	function addEventListeners() {
		window.addEventListener("click", onMouseClick, false);
		window.addEventListener("resize", onWindowResize, false);
		window.addEventListener("keydown", onKeyDown, false);
	}

	function onMouseClick(event) {
		if (event.clientX >= 0 && event.clientX <= window.innerWidth &&
				event.clientY >= 0 && event.clientY <= window.innerHeight) {
			shiftClick = event.shiftKey;
		}
	}

	function onWindowResize() {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();

		renderer.setSize(window.innerWidth, window.innerHeight);
		controls.handleResize();
		render();
	}

	function onKeyDown(event) {
		var keyCode = event.which;
		if (keyCode == 78)
		{
			currentInstId++;
			updateInstAndMesh();

			stepListener.object.Step = currentInstId;
			stepListener.updateDisplay();
		}
		else if (keyCode == 66)
		{
			currentInstId--;
			updateInstAndMesh();

			stepListener.object.Step = currentInstId;
			stepListener.updateDisplay();
		}
	}

	function animate() {
		requestAnimationFrame(animate);
		controls.update();
		render();
	}

	function render() {
		renderer.render(scene, camera);
	}

	function updateInstAndMesh() {
		if (currentInstId < 0) {
			currentInstId = 0;
			return;
		}

		if (currentInstId > faceIdPrefixsum.length)
		{
			currentInstId = faceIdPrefixsum.length - 1;
			return;
		}

		if (currentInstId == 0) {
			let currentIndicesCurrent = indices.slice(0, faceIdPrefixsum[currentInstId]);
			threeGeometryCurrent.setIndex(new THREE.BufferAttribute(currentIndicesCurrent, 1));

			let currentIndices = indices.slice(0, 0);
			threeGeometry.setIndex(new THREE.BufferAttribute(currentIndices, 1));
		}
		else if (currentInstId > 0) {
			let currentIndicesCurrent = indices.slice(faceIdPrefixsum[currentInstId - 1], faceIdPrefixsum[currentInstId]);
			threeGeometryCurrent.setIndex(new THREE.BufferAttribute(currentIndicesCurrent, 1));

			let currentIndices = indices.slice(0, faceIdPrefixsum[currentInstId - 1]);
			threeGeometry.setIndex(new THREE.BufferAttribute(currentIndices, 1));
		}

		if (currentInstId > 2)
			instrElement6.textContent = instructions[currentInstId - 3];
		else
			instrElement6.textContent = " ";
		if (currentInstId > 1)
			instrElement5.textContent = instructions[currentInstId - 2];
		else
			instrElement5.textContent = " ";
		if (currentInstId > 0)
			instrElement4.textContent = instructions[currentInstId - 1];
		else
			instrElement4.textContent = " ";
		instrElement3.textContent = instructions[currentInstId - 0];
		if (currentInstId < faceIdPrefixsum.length - 2)
			instrElement2.textContent = instructions[currentInstId + 1];
		else
			instrElement2.textContent = " ";
		if (currentInstId < faceIdPrefixsum.length - 3)
			instrElement1.textContent = instructions[currentInstId + 2];
		else
			instrElement1.textContent = " ";
		if (currentInstId < faceIdPrefixsum.length - 4)
			instrElement0.textContent = instructions[currentInstId + 3];
		else
			instrElement0.textContent = " ";
	}
</script>
</body>


/*
	The part of mesh code is based on https://geometrycollective.github.io/geometry-processing-js/
*/
</html>