feat: electroshock demo

webgfx · Oct 30, 2019 · 79a3ef4 · 79a3ef4
1 parent 91d806c
commit 79a3ef4
Show file tree

Hide file tree

Showing 246 changed files with 45,025 additions and 30,159 deletions.
diff --git a/README.md b/README.md
@@ -169,8 +169,8 @@ By Greggman
 
 ----
 
-[Motion Blur](http://webglsamples.org/motionblur/application.html)
+[ROYGBIV Electroshock](http://webglsamples.org/electroShock/application.html)
 
-<a href="http://webglsamples.org/motionblur/application.html"><img src="http://webglsamples.org/motionblur/scene.png" /></a>
+<a href="http://webglsamples.org/electroShock/application.html"><img src="http://webglsamples.org/electroShock/scene.png" /></a>
 
 By Oguz Eroglu
diff --git a/motionblur/LICENSE → electroShock/LICENSE b/motionblur/LICENSE → electroShock/LICENSE
diff --git a/motionblur/README → electroShock/README b/motionblur/README → electroShock/README
diff --git a/motionblur/application.html → electroShock/application.html b/motionblur/application.html → electroShock/application.html
@@ -2,9 +2,8 @@
 <html>
   <head>
     <meta charset=utf-8>
-    <meta name='viewport' content='width=device-width'/>
-    <title>demo1</title>
-    <link rel="stylesheet" href="./css/jquery.terminal-1.11.3.min.css">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <title>electroShock</title>
     <script src="./js/roygbiv.js"></script>
     <style>
       body { margin: 0; position: fixed; display: flex;}
@@ -22,22 +21,23 @@
         user-select: none;
       }
       #cliDiv {
+          border: 0;
+          color: lime;
+          font-family: hack;
           background-color: #000000;
           opacity: 1;
           display: block;
           width: 100%;
-      }
-      .terminal, .cmd, .terminal, .cmd .prompt {
-        color: lime;
-        font-family: hack;
+          padding: 1%;
+          min-height: 100%;
+          min-width: 100%;
+          font-size: 1vmax;
       }
     </style>
   </head>
   <body style="background-color:black;">
     <!-- CLI -->
-   <div id="cliDiv">
-     <div id="terminalDiv" class="terminal noselect"></div>
-   </div>
+   <textarea id="cliDiv" class="noselect" readonly></textarea>
     <!-- 3D CONTENT -->
    <canvas id="rendererCanvas"></canvas>
   </body>

diff --git a/motionblur/css/Hack-Bold.ttf → electroShock/css/Hack-Bold.ttf b/motionblur/css/Hack-Bold.ttf → electroShock/css/Hack-Bold.ttf
diff --git a/motionblur/fonts/bitmap.ttf → electroShock/fonts/bitmap.TTF b/motionblur/fonts/bitmap.ttf → electroShock/fonts/bitmap.TTF
diff --git a/electroShock/js/application.json b/electroShock/js/application.json
diff --git a/electroShock/js/roygbiv.js b/electroShock/js/roygbiv.js
diff --git a/electroShock/js/worker/LightningWorker.js b/electroShock/js/worker/LightningWorker.js
@@ -0,0 +1,159 @@
+importScripts("./WorkerImport.js");
+var IS_WORKER_CONTEXT = true;
+var isMobile = false;
+
+var camera = {
+  position: {
+    x: 0, y: 0, z: 0
+  }
+};
+var REUSABLE_VECTOR = new THREE.Vector3();
+var COS30DEG = Math.cos(30 * Math.PI / 180);
+var SIN30DEG = Math.sin(30 * Math.PI / 180);
+
+var LightningWorker = function(){
+  this.reset();
+}
+
+LightningWorker.prototype.startRecording = function(){
+  this.isRecording = true;
+}
+
+LightningWorker.prototype.dumpPerformance = function(){
+  postMessage({performance: this.performance});
+}
+
+LightningWorker.prototype.invalidateTransferableBody = function(){
+  if (this.transferableMessageBody){
+    delete this.transferableMessageBody;
+    delete this.transferableList;
+  }
+}
+
+LightningWorker.prototype.reset = function(){
+  this.isRecording = false;
+  this.lightnings = new Object();
+  this.lightningIDsByLightningName = new Object();
+  this.idCtr = 0;
+  this.startEndPointBufferIndicesByLightningName = new Object();
+}
+
+LightningWorker.prototype.onLightningCreation = function(lightningDescription, isEditorLightning){
+  var lightning = new Lightning(lightningDescription.name, lightningDescription.detailThreshold, 0, lightningDescription.maxDisplacement, lightningDescription.count, lightningDescription.colorName, lightningDescription.radius, lightningDescription.roughness);
+  lightning.init(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 100, 0));
+  if (!isEditorLightning){
+    this.lightnings[this.idCtr ++] = lightning;
+    this.lightningIDsByLightningName[lightning.name] = this.idCtr - 1;
+    postMessage({idResponse: true, lightningName: lightning.name, id: this.idCtr - 1});
+  }else{
+    this.editorLightning = lightning;
+  }
+}
+
+LightningWorker.prototype.onLightningDeletion = function(lightningName){
+  var id = this.lightningIDsByLightningName[lightningName];
+  delete this.lightnings[id];
+  delete this.lightningIDsByLightningName[lightningName];
+  delete this.startEndPointBufferIndicesByLightningName[lightningName];
+}
+
+LightningWorker.prototype.onSetCorrectionProperties = function(lightningName, correctionRefDistance, correctionRefLength){
+  var lightningID = this.lightningIDsByLightningName[lightningName];
+  var lightning = this.lightnings[lightningID];
+  lightning.setCorrectionProperties(correctionRefDistance, correctionRefLength);
+}
+
+LightningWorker.prototype.onDisableCorrection = function(lightningName){
+  var lightningID = this.lightningIDsByLightningName[lightningName];
+  var lightning = this.lightnings[lightningID];
+  lightning.disableCorrection();
+}
+
+LightningWorker.prototype.saveStartEndPointBufferIndices = function(payload){
+  for (var lightningName in payload){
+    this.startEndPointBufferIndicesByLightningName[lightningName] = payload[lightningName];
+  }
+}
+
+LightningWorker.prototype.onEditorClose = function(){
+  delete this.editorLightning;
+}
+
+LightningWorker.prototype.update = function(transferableMessageBody){
+  var startTime
+  if (this.isRecording){
+    startTime = performance.now();
+  }
+  camera.position.x = transferableMessageBody.cameraPosition[0];
+  camera.position.y = transferableMessageBody.cameraPosition[1];
+  camera.position.z = transferableMessageBody.cameraPosition[2];
+  for (var i = 0; i<transferableMessageBody.updateBuffer.length; i++){
+    var id = transferableMessageBody.updateBuffer[i];
+    if (id == -1){
+      break;
+    }else{
+      var lightning = this.editorLightning? this.editorLightning: this.lightnings[id];
+      var curStartEndPointBufferIndex = this.editorLightning? 0: this.startEndPointBufferIndicesByLightningName[lightning.name];
+      lightning.startPoint.set(transferableMessageBody.startEndPoints[curStartEndPointBufferIndex], transferableMessageBody.startEndPoints[curStartEndPointBufferIndex + 1], transferableMessageBody.startEndPoints[curStartEndPointBufferIndex + 2]);
+      lightning.endPoint.set(transferableMessageBody.startEndPoints[curStartEndPointBufferIndex + 3], transferableMessageBody.startEndPoints[curStartEndPointBufferIndex + 4], transferableMessageBody.startEndPoints[curStartEndPointBufferIndex + 5]);
+      curStartEndPointBufferIndex += 6;
+      lightning.update();
+      lightning.positionsTypedAray = transferableMessageBody.buffer[lightning.name];
+      for (var nodeID in lightning.renderMap){
+        lightning.updateNodePositionInShader(lightning.renderMap[nodeID], true);
+        lightning.updateNodePositionInShader(lightning.renderMap[nodeID], false);
+      }
+    }
+  }
+  if (this.isRecording){
+    this.performance = performance.now() - startTime;
+  }
+}
+
+var worker = new LightningWorker();
+
+self.onmessage = function(msg){
+  var data = msg.data;
+  if (data.onLightningCreation){
+    worker.onLightningCreation(data.lightning, data.isEditorLightning);
+  }else if (data.onLightningDeletion){
+    worker.onLightningDeletion(data.lightningName);
+  }else if (data.reset){
+    worker.reset();
+  }else if (data.onSetCorrectionProperties){
+    worker.onSetCorrectionProperties(data.lightningName, data.correctionRefDistance, data.correctionRefLength);
+  }else if (data.onDisableCorrection){
+    worker.onDisableCorrection(data.lightningName);
+  }else if (data.isStartEndPointBufferIndices){
+    worker.saveStartEndPointBufferIndices(data.payload);
+  }else if (data.invalidateTransferableBody){
+    worker.invalidateTransferableBody();
+  }else if (data.onEditorClose){
+    worker.onEditorClose();
+  }else if (data.startRecording){
+    worker.startRecording();
+  }else if (data.dumpPerformance){
+    worker.dumpPerformance();
+  }else{
+    worker.update(data);
+    if (!worker.transferableMessageBody){
+      worker.transferableMessageBody = data;
+      worker.transferableList = [data.cameraPosition.buffer];
+      for (var key in data.buffer){
+        worker.transferableList.push(data.buffer[key].buffer);
+      }
+      worker.transferableList.push(data.startEndPoints.buffer);
+      worker.transferableList.push(data.updateBuffer.buffer);
+    }else{
+      worker.transferableMessageBody = data;
+      worker.transferableList[0] = data.cameraPosition.buffer;
+      var i = 1;
+      for (var key in data.buffer){
+        worker.transferableList[i++] = data.buffer[key].buffer;
+      }
+      worker.transferableList[i] = data.startEndPoints.buffer;
+      worker.transferableList[i+1] = data.updateBuffer.buffer;
+    }
+    postMessage(worker.transferableMessageBody, worker.transferableList);
+  }
+}