first commit webworker

created web worker implementation

added class D3D.SlicerWorker
converts geometry to bufferGeometry
sends bufferGeometry to worker
in worker bufferGeometry gets converted back to geometry

index.html

@@ -20,9 +20,11 @@ $(document).ready(function () {
 
 	var listDoodle = $("#printers-doodle");
 	var listSliceTest = $("#printers-slicetest");
+	var listSliceWebworker = $("#printers-webworker");
 
 	listDoodle.append("<li><a href='doodle.html#192.168.5.1'>Wired Printer</a></li>");
 	listSliceTest.append("<li><a href='slice_test.html#192.168.5.1'>Wired Printer</a></li>");
+	listSliceWebworker.append("<li><a href='webworker_test.html#192.168.5.1'>Wired Printer</a></li>");
 
 	/*
 	printers.push({
@@ -44,6 +46,7 @@ $(document).ready(function () {
 
 			listDoodle.append("<li><a href='doodle.html#" + box.localip + "'>" + box.wifiboxid + "</a></li>");
 			listSliceTest.append("<li><a href='slice_test.html#" + box.localip + "'>" + box.wifiboxid + "</a></li>");
+			listSliceWebworker.append("<li><a href='webworker_test.html#" + box.localip + "'>" + box.wifiboxid + "</a></li>");
 		}
 	});
 });
@@ -54,6 +57,10 @@ $(document).ready(function () {
 
 <p>Slice Test</p>
 <ul id="printers-slicetest"></ul>
+
+<p>Webworkers</p>
+<ul id="printers-webworker"></ul>
+
 <!--
 <table>
 	<tr>

slice_test.html

@@ -14,9 +14,6 @@
 <script src="src/paths.js"></script>
 <script src="src/slicer.js"></script>
 
-<script src="gcode/testgcode.js"></script>
-<script src="gcode/easterbunny.js"></script>
-
 <style>
 canvas {border: 1px solid black;}
 </style>
@@ -33,9 +30,9 @@ function init () {
 	var scene = createScene();
 
 	var localIp = location.hash.substring(1);
-	doodleBox = new D3D.Box(localIp);
+	//doodleBox = new D3D.Box(localIp);
 
-	var printer = new D3D.Printer(USER_SETTINGS, PRINTER_SETTINGS["ultimaker"]);
+	var printer = new D3D.Printer().updateConfig(USER_SETTINGS).updateConfig(PRINTER_SETTINGS["ultimaker"]);
 
 	var loader = new THREE.STLLoader();
 	loader.load("models/pokemon/pikachu.stl", function (geometry) {
@@ -77,16 +74,17 @@ function init () {
 
 		//scene.add(mesh);
 
-		var slicer = new D3D.Slicer().setMesh(mesh);
+		mesh.updateMatrix();
+		var slicer = new D3D.Slicer().setMesh(mesh.geometry, mesh.matrix);
 
 		var mesh = new THREE.Mesh(slicer.geometry, material);
 		scene.add(mesh);
 		
-		var canvas = document.getElementById("canvas");
+		//var canvas = document.getElementById("canvas");
-		var context = canvas.getContext("2d");
+		//var context = canvas.getContext("2d");
 
-		var img = slicer.drawPaths(printer, 0, 1);
+		//var img = slicer.drawPaths(printer, 0, 1);
-		context.drawImage(img, 0, 0);
+		//context.drawImage(img, 0, 0);
 
 		gcode = slicer.getGcode(printer);
 	});

src/printer.js

@@ -9,9 +9,6 @@ D3D.Printer = function (printerSettings, userSettings) {
 	"use strict";
 
 	this.config = {};
-
-	this.updateConfig(printerSettings);	
-	this.updateConfig(userSettings);
 };
 D3D.Printer.prototype.updateConfig = function (config) {
 	"use strict";

src/slicer.js

@@ -15,11 +15,10 @@
 D3D.Slicer = function () {
 	"use strict";
 };
-D3D.Slicer.prototype.setMesh = function (mesh) {
+D3D.Slicer.prototype.setMesh = function (geometry, matrix) {
 	"use strict";
 
 	//convert buffergeometry to geometry;
-	var geometry = mesh.geometry.clone();
 	if (geometry instanceof THREE.BufferGeometry) {
 		geometry = new THREE.Geometry().fromBufferGeometry(geometry);
 	}
@@ -39,8 +38,7 @@ D3D.Slicer.prototype.setMesh = function (mesh) {
 	geometry.mergeVertices();
 
 	//apply mesh matrix on geometry;
-	mesh.updateMatrix();
+	geometry.applyMatrix(matrix);
-	geometry.applyMatrix(mesh.matrix);
 	geometry.computeFaceNormals();
 	geometry.computeBoundingBox();
 	

src/slicerworker.js

@@ -0,0 +1,50 @@
+D3D.SlicerWorker = function () {
+	"use strict";
+
+	this.worker = new Worker('webworker/worker.js');
+
+	this.worker.addEventListener('message', function (event) {
+		console.log(event);
+	}, false);
+}
+D3D.SlicerWorker.prototype.setSettings = function (USER_SETTINGS, PRINTER_SETTINGS) {
+	"use strict";
+
+	this.worker.postMessage({
+		"cmd": "SET_SETTINGS", 
+		"USER_SETTINGS": USER_SETTINGS, 
+		"PRINTER_SETTINGS": PRINTER_SETTINGS
+	});
+};
+D3D.SlicerWorker.prototype.setMesh = function (mesh) {
+	"use strict";
+
+	if (mesh.geometry instanceof THREE.Geometry) {
+		var geometry = new THREE.BufferGeometry().fromGeometry(mesh.geometry);
+	}
+	else {
+		var geometry = mesh.geometry;
+	}
+
+	mesh.updateMatrix();
+
+	this.worker.postMessage({
+		"cmd": "SET_MESH", 
+		"geometry": geometry.toJSON().data, 
+		"matrix": mesh.matrix.toArray()
+	});
+};
+D3D.SlicerWorker.prototype.slice = function () {
+	"use strict";
+
+	this.worker.postMessage({
+		"cmd": "SLICE"
+	});
+};
+D3D.SlicerWorker.prototype.close = function () {
+	"use strict";
+
+	this.worker.postMessage({
+		"cmd": "CLOSE"
+	});
+};

webworker/worker.js

@@ -0,0 +1,41 @@
+importScripts("../library/three.js");
+importScripts("../library/clipper.js");
+importScripts("../src/utils.js");
+importScripts("../src/printer.js");
+importScripts("../src/paths.js");
+importScripts("../src/slicer.js");
+
+var printer = new D3D.Printer();
+var slicer = new D3D.Slicer();
+
+self.addEventListener('message', function (event) {
+	"use strict";
+
+	switch (event.data["cmd"]) {
+		case "SET_MESH": 
+			var loader = new THREE.BufferGeometryLoader();
+			var geometry = loader.parse(event.data["geometry"]);
+			
+			var matrix = new THREE.Matrix4().fromArray(event.data["matrix"]);
+
+			slicer.setMesh(geometry, matrix);
+		break;
+
+		case "SET_SETTINGS":
+			printer.updateConfig(event.data["USER_SETTINGS"]);
+			printer.updateConfig(event.data["PRINTER_SETTINGS"]);
+
+			console.log(printer);
+		break;
+
+		case "SLICE":
+			var gcode = slicer.getGcode(printer);
+
+			self.postMessage('gcode generated');
+		break;
+
+		case "CLOSE": 
+			self.close();
+		break;
+	}
+});

webworker_test.html

@@ -0,0 +1,145 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+<script src="library/jquery.js"></script>
+<script src="library/three.js"></script>
+<script src="library/stl_loader.js"></script>
+
+<script src="src/utils.js"></script>
+<script src="src/box.js"></script>
+<script src="src/slicerworker.js"></script>
+
+<title>Doedel Drie Dee || Webworker Test</title>
+<style>
+canvas {border: 1px solid black;}
+</style>
+</head>
+<body>
+
+<canvas id="3d-preview" height="400" width="400"></canvas>
+<canvas id="canvas" width="400" height="400"></canvas>
+
+<script>
+
+var USER_SETTINGS, PRINTER_SETTINGS, doodleBox, gcode, slicerWorker;
+
+
+function init () {
+	"use strict";
+	var scene = createScene();
+
+	var localIp = location.hash.substring(1);
+	doodleBox = new D3D.Box(localIp);
+
+	var slicer = new D3D.SlicerWorker();
+
+	slicer.setSettings(USER_SETTINGS, PRINTER_SETTINGS["ultimaker"]);
+
+	var loader = new THREE.STLLoader();
+	loader.load("models/pokemon/pikachu.stl", function (geometry) {
+		var material = new THREE.MeshPhongMaterial({color: 0x00ff00, wireframe: false});
+		var mesh = new THREE.Mesh(geometry, material);
+		
+		mesh.rotation.x = -Math.PI/2;
+		mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
+		mesh.position.x = 100;
+		mesh.position.z = 100;
+
+		scene.add(mesh);
+
+		slicer.setMesh(mesh);
+		slicer.slice();
+	});
+}
+
+function createScene () {
+	var scene = new THREE.Scene();
+
+	var renderer = new THREE.WebGLRenderer({canvas: document.getElementById("3d-preview"), antialias: true});
+	renderer.setClearColor(0xffffff, 1);
+
+	var camera = new THREE.PerspectiveCamera(75, renderer.domElement.width/renderer.domElement.height, 1, 10000);
+	scene.add(camera);
+
+	var light = new THREE.AmbientLight(0x404040);
+	scene.add(light);
+
+	var directionalLight = new THREE.PointLight(0xffffff, 0.5);
+	camera.add(directionalLight);
+
+	applyMouseControls(renderer, camera, new THREE.Vector3(100, 0, 100), 1000);
+
+	function applyMouseControls (renderer, camera, center, maxDistance) {
+		var distance = 20;
+		var rotX = 0;
+		var rotY = 0;
+		var moveCamera = false;
+
+		function updateCamera () {
+			camera.position.set(
+				Math.cos(rotY)*Math.sin(rotX)*distance,
+				Math.sin(rotY)*distance,
+				Math.cos(rotY)*Math.cos(rotX)*distance
+			).add(center);
+			camera.lookAt(center);
+		}
+
+		$(renderer.domElement).on("mousedown", function (e) {
+			moveCamera = true;
+		}).on("wheel", function (e) {
+			var event = e.originalEvent;
+
+			event.preventDefault();
+			distance = THREE.Math.clamp(distance - event.wheelDelta, 1, maxDistance);
+
+			updateCamera();
+		});
+
+		$(window).on("mouseup", function (e) {
+			moveCamera = false;
+		}).on("mousemove", function (e) {
+			var event = e.originalEvent;
+
+			if (moveCamera === true) {
+				rotX = (rotX - event.webkitMovementX/100) % (2*Math.PI);
+				rotY = THREE.Math.clamp(rotY + event.webkitMovementY/100, -Math.PI/2, Math.PI/2);
+
+				updateCamera();
+			}
+		});
+		
+		updateCamera();
+	}
+
+	(function animate () {
+		requestAnimationFrame(animate);
+		renderer.render(scene, camera);
+	})();
+
+	return scene;
+}
+
+(function () {
+	"use strict";
+
+	var loadedItems = 0;
+	function loaded () {
+		loadedItems ++;
+		if (loadedItems === 2) {
+			init();
+		}
+	}
+
+	loadSettings("settings/user_settings.json", function (data) {
+		USER_SETTINGS = data;
+		loaded();
+	});
+	loadSettings("settings/printer_settings.json", function (data) {
+		PRINTER_SETTINGS = data;
+		loaded();
+	});
+})();
+</script>
+
+</body>
+</html>