Added an experimental .obj to HTML converter

victorporof · Aug 7, 2012 · 8231826 · 8231826
1 parent a28a843
commit 8231826
Show file tree

Hide file tree

Showing 8 changed files with 342,471 additions and 0 deletions.
diff --git a/src/utils/Blimp/blimp.css b/src/utils/Blimp/blimp.css
@@ -0,0 +1,65 @@
+body {
+  background: #000 url("img/noise.png");
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  font-family: monospace;
+  text-shadow: 0 4px 24px #0f0, 0 3px 2px #000, 0 1px #000;
+  color: #0f6;
+}
+
+* ::-moz-selection {
+  background: #040;
+}
+
+a {
+  background: #020;
+  color: #afc;
+  outline: none;
+}
+
+mark {
+  background: #030;
+  color: inherit;
+}
+
+#hello {
+  margin-top: 130px;
+  text-align: center;
+  font-size: 16px;
+}
+
+#sadpanda {
+  font-size: 20px;
+  color: #fff;
+}
+
+#progress {
+  font-weight: 600;
+  font-size: 16px;
+  text-shadow: 0 0 6px #afa;
+  color: #0fa;
+}
+
+#importing {
+  visibility: hidden;
+  font-size: 12px;
+  color: #040;
+}
+
+#bottom {
+  position: absolute;
+  bottom: 30px;
+  left: 30px;
+  font-size: 12px;
+}
+
+#bound {
+  background: transparent;
+  width: 40px;
+  border: 1px solid #040;
+  text-align: center;
+  font: inherit;
+  color: #fff;
+}
diff --git a/src/utils/Blimp/blimp.html b/src/utils/Blimp/blimp.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <meta charset="UTF-8"/>
+    <title>Blimp!</title>
+    <link href="blimp.css" rel="stylesheet" type="text/css" />
+  </head>
+
+  <body>
+    <div id="hello">
+      <p id="sadpanda">
+        Whoa there! This is bleeding edge stuff, you'll need
+        <a href='http://nightly.mozilla.org/'>Firefox Nightly</a>
+        to play with this.
+      </p>
+      <p>
+        "Blimp!" is a nifty tool which turns a 3D model into basic HTML voxels.<br>
+        <mark>Drag and drop</mark> an .obj file, wait a bit, then start Tilt.
+      </p>
+      <div id="progress"></div>
+      <div id="importing">hardcore importing, stand by...</div>
+    </div>
+    <div id="bottom">
+      <div>
+        You can even play with this magic number!
+      </div>
+      <input id="bound" type="number" value="350">
+      &lt;~ generated mesh dimensions (try not to enter a very large value;
+      <a href="http://twitter.com/victorporof">#kthxbye</a>)
+    </div>
+    <a href="http://github.com/victorporof"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/bec6c51521dcc8148146135149fe06a9cc737577/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>
+
+    <script type="text/javascript;version=1.8" src="blimp.js"></script>
+    <script type="text/javascript;version=1.8" src="dropbox.js"></script>
+  </body>
+
+</html>
diff --git a/src/utils/Blimp/blimp.js b/src/utils/Blimp/blimp.js
@@ -0,0 +1,112 @@
+"use strict";
+
+(function() {
+  let $sadpanda = document.getElementById("sadpanda");
+  let $progress = document.getElementById("progress");
+  let $importing = document.getElementById("importing");
+  let $bound = document.getElementById("bound");
+
+  // we'll need some features that started being availalbe only in Nightlies
+  // (currently Firefox 13+), mostly related to bug 726634
+  if (parseInt(navigator.userAgent.replace(/.*Firefox\//, "")
+                                  .replace(/[^0-9.]+\d+$/, "")) < 14) {
+    return; // :(
+  } else {
+    $sadpanda.style.display = "none"; // :)
+  }
+
+  /**
+   * Mesh constructor, containing the model strings. Currently, only 'obj' is
+   * used, but we may tackle with the 'mtl' at some point.
+   *
+   * @param String obj
+   *        The model obj file contents (vertices, faces etc.)
+   * @param String mtl
+   *        Optional, the material file contents. Unused.
+   */
+  function Mesh(obj, mtl) {
+    this.obj = obj || "";
+    this.mtl = mtl || "";
+    this.importer = new ImporterWorker(this);
+  }
+
+  Mesh.prototype = {
+
+    /**
+     * Talks to a worker responsible with creating the html representing a
+     * voxelized version of the mesh.
+     */
+    export: function()
+    {
+      let bound = parseInt($bound.value);
+      let size = 15; // magic constant, the thickness of a stack node in Tilt
+
+      this.importer.request("export", { bound: bound, size: size }, function(data) {
+        document.head.innerHTML = data.css;
+        document.body.innerHTML = data.html;
+      });
+    }
+  };
+
+  /**
+   * A wrapper around the importer.js worker.
+   *
+   * @param Mesh mesh
+   *        The mesh containing the model 'obj' and 'mtl' strings.
+   */
+  function ImporterWorker(mesh) {
+    this.mesh = mesh;
+  }
+
+  ImporterWorker.prototype = {
+
+    /**
+     * Sends a generic request message to the worker and issues a callback when
+     * ready. See importer.js for more goodies. Possible requests could be:
+     *
+     * @param String method
+     *        The method name in the importer. Either "vertices",
+     *                                                "triangles",
+     *                                                "bounds",
+     *                                                "intersections",
+     *                                                "xyzscan",
+     *                                                "voxels" or
+     *                                                "export".
+     * @param Object params
+     *        An object containing stuff to be sent as params for the method.
+     * @param Function callback
+     *        To be called when worker finished working.
+     */
+    request: function(method, params, callback)
+    {
+      let worker = new Worker("importer.js");
+
+      // cool animation bro'
+      let spinner = ["|", "/", "–", "\\", "|", "/", "–", "\\"];
+      let count = 0;
+
+      worker.addEventListener("message", function(event) {
+        let data = event.data;
+
+        if (data.signature === method) {
+          // the response is exactly what we wanted, callback!
+          callback(event.data.response);
+        } else {
+          // sometimes bad stuff may happen in the importer worker, or maybe
+          // simple status report messages can be sent; deal with this here
+          console.log(JSON.stringify(data));
+          $progress.textContent = spinner[(count++) % spinner.length];
+          $importing.style.visibility = "visible";
+        }
+      });
+
+      worker.postMessage({
+        mesh: this.mesh,
+        method: method,
+        params: params
+      });
+    }
+  };
+
+  window.Mesh = Mesh;
+})();
diff --git a/src/utils/Blimp/dropbox.js b/src/utils/Blimp/dropbox.js
@@ -0,0 +1,37 @@
+"use strict";
+
+(function() {
+
+  function dragenter(e) {
+    e.stopPropagation();
+    e.preventDefault();
+  }
+
+  function dragover(e) {
+    e.stopPropagation();
+    e.preventDefault();
+  }
+
+  function drop(e) {
+    e.stopPropagation();
+    e.preventDefault();
+
+    let file = e.dataTransfer.files[0];
+    if (!file.name.match(/\.obj$/)) {
+      return;
+    }
+
+    let reader = new FileReader();
+    reader.onload = function(e) {
+      let text = e.target.result;
+      let mesh = new Mesh(text).export();
+    };
+
+    reader.readAsText(file);
+  }
+
+  let dropbox = document.body;
+  dropbox.addEventListener("dragenter", dragenter, false);
+  dropbox.addEventListener("dragover", dragover, false);
+  dropbox.addEventListener("drop", drop, false);
+})();
diff --git a/src/utils/Blimp/img/noise.png b/src/utils/Blimp/img/noise.png