diff --git a/src/components/tools/drawing-manager.js b/src/components/tools/drawing-manager.js
index 31f7c490e5fd232c94d283b2fc9b4308ede9ca01..e6354623f341fb12d32290bd75826cb8d2aed0e9 100644
--- a/src/components/tools/drawing-manager.js
+++ b/src/components/tools/drawing-manager.js
@@ -1,5 +1,7 @@
/**
* Drawing Manager
+ * Manages what networked-drawings are available to pen components
+ * @namespace drawing
* @component drawing-manager
*/
AFRAME.registerComponent("drawing-manager", {
diff --git a/src/components/tools/networked-drawing.js b/src/components/tools/networked-drawing.js
index 3283154281bfae73bebb79a543e7f0967decaa95..92fa70345064951547ad1beb45c8113c912994d0 100644
--- a/src/components/tools/networked-drawing.js
+++ b/src/components/tools/networked-drawing.js
@@ -1,5 +1,6 @@
/* global THREE */
/**
+ * Networked Drawing
* Creates procedurally generated 'lines' (or tubes) that are networked.
* @namespace drawing
* @component networked-drawing
@@ -30,12 +31,19 @@ AFRAME.registerComponent("networked-drawing", {
},
init() {
+ this.receiveData = this.receiveData.bind(this);
+
this.drawBuffer = [];
- this.tempDrawBuffer = [];
+
+ this.drawStarted = false;
+ this.lineStarted = false;
+ this.remoteLineStarted = false;
+
+ this.tempDrawBuffer = []; //used for temporary storage of new line data when drawing is still being initialized.
this.receivedBufferParts = 0;
- this.drawBufferInitialized = false;
this.bufferIndex = 0;
- this.drawBufferHistory = [];
+ this.connectedToOwner = false;
+ this.drawBufferInitialized = false;
const options = {
vertexColors: THREE.VertexColors
@@ -49,6 +57,8 @@ AFRAME.registerComponent("networked-drawing", {
this.sharedBufferGeometryManager = new SharedBufferGeometryManager();
this.sharedBufferGeometryManager.addSharedBuffer(0, material, THREE.TriangleStripDrawMode);
+ this.lastPoint = new THREE.Vector3();
+
this.lastSegments = [];
this.currentSegments = [];
for (let x = 0; x < this.segments; x++) {
@@ -68,22 +78,12 @@ AFRAME.registerComponent("networked-drawing", {
this.scene = sceneEl.object3D;
this.scene.add(this.drawing);
- this.drawStarted = false;
- this.lineStarted = false;
- this.remoteLineStarted = false;
-
- this.lastPoint = new THREE.Vector3();
- this.lastDrawTime = -1;
-
- this.connectedToOwner = false;
-
this.prevIdx = Object.assign({}, this.sharedBuffer.idx);
this.idx = Object.assign({}, this.sharedBuffer.idx);
- this.vertexCount = 0;
- this.drawBufferCount = 0;
- this.currentPointCount = 0;
-
- this.receiveData = this.receiveData.bind(this);
+ this.vertexCount = 0; //number of vertices added for current line (used for line deletion).
+ this.drawBufferCount = 0; //number of items added to drawBuffer for current line (used for line deletion).
+ this.currentPointCount = 0; //number of points added for current line (used for maxPointsPerLine).
+ this.drawBufferHistory = []; //tracks vertexCount and drawBufferCount so that lines can be deleted.
NAF.connection.onConnect(() => {
NAF.utils.getNetworkedEntity(this.el).then(networkedEl => {
@@ -105,57 +105,66 @@ AFRAME.registerComponent("networked-drawing", {
this.scene.remove(this.drawing);
},
- tick: (() => {
+ tick() {
+ if (!this.connectedToOwner && NAF.connection.isConnected() && this.networkedEl) {
+ const owner = NAF.utils.getNetworkOwner(this.networkedEl);
+ if (!NAF.utils.isMine(this.networkedEl) && NAF.connection.hasActiveDataChannel(owner)) {
+ NAF.connection.sendDataGuaranteed(owner, this.drawingId, {
+ type: MSG_CONFIRM_CONNECT,
+ clientId: NAF.clientId
+ });
+ this.connectedToOwner = true;
+ }
+ }
+
+ if (this.drawBuffer.length > 0 && NAF.connection.isConnected() && this.networkedEl) {
+ if (!NAF.utils.isMine(this.networkedEl)) {
+ this.drawFromNetwork();
+ } else if (this.bufferIndex < this.drawBuffer.length) {
+ this.broadcastDrawing();
+ }
+ }
+
+ this.deleteLines();
+ },
+
+ broadcastDrawing: (() => {
+ const copyArray = [];
+ return function() {
+ copyArray.length = 0;
+ copyData(this.drawBuffer, copyArray, this.bufferIndex, this.drawBuffer.length - 1);
+ this.bufferIndex = this.drawBuffer.length;
+ NAF.connection.broadcastDataGuaranteed(this.drawingId, { type: MSG_BUFFER_DATA, buffer: copyArray });
+ };
+ })(),
+
+ drawFromNetwork: (() => {
const position = new THREE.Vector3();
const direction = new THREE.Vector3();
const normal = new THREE.Vector3();
- const copyArray = [];
return function() {
- if (!this.connectedToOwner && NAF.connection.isConnected() && this.networkedEl) {
- const owner = NAF.utils.getNetworkOwner(this.networkedEl);
- if (!NAF.utils.isMine(this.networkedEl) && NAF.connection.hasActiveDataChannel(owner)) {
- NAF.connection.sendDataGuaranteed(owner, this.drawingId, {
- type: MSG_CONFIRM_CONNECT,
- clientId: NAF.clientId
- });
- this.connectedToOwner = true;
- }
- }
-
- if (this.drawBuffer.length > 0 && NAF.connection.isConnected() && this.networkedEl) {
- if (!NAF.utils.isMine(this.networkedEl)) {
- const head = this.drawBuffer[0];
- if (head != null && this.drawBuffer.length >= 9) {
- position.set(this.drawBuffer[0], this.drawBuffer[1], this.drawBuffer[2]);
- direction.set(this.drawBuffer[3], this.drawBuffer[4], this.drawBuffer[5]);
- this.radius = direction.length(); //radius is encoded as length of direction vector
- direction.normalize();
- normal.set(this.drawBuffer[6], this.drawBuffer[7], this.drawBuffer[8]);
- this.color.setHex(Math.round(normal.length()) - 1); //color is encoded as length of normal vector
- normal.normalize();
-
- if (!this.remoteLineStarted) {
- this.startDraw(position, direction, normal);
- this.remoteLineStarted = true;
- } else {
- this.doDraw(position, direction, normal);
- }
- this.drawBuffer.splice(0, 9);
- } else if (head === null && this.remoteLineStarted) {
- this.endDraw(position, direction, normal);
- this.remoteLineStarted = false;
- this.drawBuffer.shift();
- }
- } else if (this.bufferIndex < this.drawBuffer.length) {
- //TODO: don't do this on every tick?
- copyArray.length = 0;
- copyData(this.drawBuffer, copyArray, this.bufferIndex, this.drawBuffer.length - 1);
- this.bufferIndex = this.drawBuffer.length;
- NAF.connection.broadcastDataGuaranteed(this.drawingId, { type: MSG_BUFFER_DATA, buffer: copyArray });
+ const head = this.drawBuffer[0];
+ if (head != null && this.drawBuffer.length >= 9) {
+ position.set(this.drawBuffer[0], this.drawBuffer[1], this.drawBuffer[2]);
+ direction.set(this.drawBuffer[3], this.drawBuffer[4], this.drawBuffer[5]);
+ this.radius = Math.round(direction.length() * 1000) / 1000; //radius is encoded as length of direction vector
+ direction.normalize();
+ normal.set(this.drawBuffer[6], this.drawBuffer[7], this.drawBuffer[8]);
+ this.color.setHex(Math.round(normal.length()) - 1); //color is encoded as length of normal vector
+ normal.normalize();
+
+ if (!this.remoteLineStarted) {
+ this.startDraw(position, direction, normal);
+ this.remoteLineStarted = true;
+ } else {
+ this.doDraw(position, direction, normal);
}
+ this.drawBuffer.splice(0, 9);
+ } else if (head === null && this.remoteLineStarted) {
+ this.endDraw(position, direction, normal);
+ this.remoteLineStarted = false;
+ this.drawBuffer.shift();
}
-
- this.deleteLines();
};
})(),
@@ -201,12 +210,13 @@ AFRAME.registerComponent("networked-drawing", {
buffer: this.drawBuffer
});
} else {
- //TODO: do this in tick?
- let x = 0;
- while (x < this.drawBuffer.length) {
- x = Math.min(x + chunkAmount, this.drawBuffer.length);
+ let start = 0;
+ let end = 0;
+ while (end < this.drawBuffer.length) {
+ end = Math.min(end + chunkAmount, this.drawBuffer.length);
copyArray.length = 0;
- copyData(this.drawBuffer, copyArray, x - chunkAmount, x - 1);
+ copyData(this.drawBuffer, copyArray, start, end - 1);
+ start = end;
NAF.connection.sendDataGuaranteed(clientId, this.drawingId, {
type: MSG_BUFFER_DATA_FULL,
parts: Math.ceil(this.drawBuffer.length / chunkAmount),
@@ -261,7 +271,6 @@ AFRAME.registerComponent("networked-drawing", {
this.lastPoint.copy(position);
this.addToDrawBuffer(position, direction, normal);
- this.lastDrawTime = Date.now();
},
draw(position, direction, normal, color, radius) {
@@ -274,9 +283,8 @@ AFRAME.registerComponent("networked-drawing", {
}
if (radius) this.radius = radius;
- this.doDraw(position, direction, normal);
-
this.addToDrawBuffer(position, direction, normal);
+ this.doDraw(position, direction, normal);
},
doDraw: (() => {
@@ -328,7 +336,7 @@ AFRAME.registerComponent("networked-drawing", {
endDraw(position, direction, normal) {
if (!this.lineStarted && this.drawStarted) {
this.drawPoint(position);
- } else {
+ } else if (this.lineStarted && this.drawStarted) {
this.draw(position, direction, normal);
this.doEndDraw(position, direction);
}
@@ -350,12 +358,16 @@ AFRAME.registerComponent("networked-drawing", {
})(),
endLine() {
+ if (!this.drawStarted) return;
+
if (this.networkedEl && NAF.utils.isMine(this.networkedEl)) this.pushToDrawBuffer(null);
- this.drawBufferHistory.push({
+
+ const datum = {
drawBufferCount: this.drawBufferCount,
idxLength: this.vertexCount - 1,
time: Date.now()
- });
+ };
+ this.drawBufferHistory.push(datum);
this.vertexCount = 0;
this.drawBufferCount = 0;
this.currentPointCount = 0;
diff --git a/src/components/tools/pen.js b/src/components/tools/pen.js
index f1e67e58c79772cd36fe01ff157ed5029c7867cb..84f0e40a599895245b76cf2df9b96358dcd4a68c 100644
--- a/src/components/tools/pen.js
+++ b/src/components/tools/pen.js
@@ -1,5 +1,7 @@
/**
* Pen tool
+ * A tool that allows drawing on networked-drawing components.
+ * @namespace drawing
* @component pen
*/
@@ -9,17 +11,15 @@ function almostEquals(epsilon, u, v) {
AFRAME.registerComponent("pen", {
schema: {
- drawFrequency: { default: 20 },
- minDistanceBetweenPoints: { default: 0.01 },
- defaultDirection: { default: { x: 1, y: 0, z: 0 } },
+ drawFrequency: { default: 20 }, //frequency of polling for drawing points
+ minDistanceBetweenPoints: { default: 0.01 }, //minimum distance to register new drawing point
camera: { type: "selector" },
- drawing: { type: "string" },
drawingManager: { type: "string" },
color: { type: "color", default: "#FF0033" },
availableColors: {
default: ["#FF0033", "#FFFF00", "#00FF33", "#0099FF", "#9900FF", "#FFFFFF", "#000000"]
},
- radius: { default: 0.01 },
+ radius: { default: 0.01 }, //drawing geometry radius
minRadius: { default: 0.005 },
maxRadius: { default: 0.05 }
},
@@ -33,8 +33,7 @@ AFRAME.registerComponent("pen", {
this.lastPosition = new THREE.Vector3();
this.lastPosition.copy(this.el.object3D.position);
- this.direction = new THREE.Vector3();
- this.direction.copy(this.data.defaultDirection);
+ this.direction = new THREE.Vector3(1, 0, 0);
this.currentDrawing = null;
diff --git a/src/hub.html b/src/hub.html
index 65787209d3986576fdf3a27edea77951fe30d4b3..c49dbb5f8043f4c2a444fe35b91086190abd1360 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -167,10 +167,10 @@
<template id="pen-interactable">
<a-entity
class="interactable toggle"
- super-networked-interactable="counter: #pen-counter; mass: 1;"
+ super-networked-interactable="counter: #pen-counter;"
body="type: dynamic; shape: none; mass: 1;"
- sticky-object="autoLockOnRelease: true; autoLockOnLoad: true;"
grabbable-toggle="maxGrabbers: 1;"
+ sticky-object="autoLockOnRelease: true;"
hoverable
activatable__draw-hand="buttonStartEvents: secondary_hand_grab; buttonEndEvents: secondary_hand_release;"
activatable__draw-cursor="buttonStartEvents: secondary-cursor-grab; buttonEndEvents: secondary-cursor-release;"