Extend website to support user-supplied .obj files

www/index.html

@@ -33,6 +33,10 @@
  </select>
  <span class="focus"></span>
  </div>
+ <label for="add-obj" id="add-obj-label">
+ Add Obj File<span class="plus-sign">+</span>
+ </label>
+ <input id="add-obj" type="file" accept=".obj" style="display: none"/>
  <button id="render" role="button">Render</button>
  </div>
  <div class="split">

www/index.js

@@ -3,6 +3,7 @@ import * as Comlink from "./comlink.mjs";
 const canvas = document.getElementById("image-canvas");
 const textarea = document.getElementById("scene-description");
 const render_button = document.getElementById("render");
+const add_obj_input = document.getElementById("add-obj");
 const editor = ace.edit("scene-description");
 const sceneChoices = document.getElementById("scene-choices");
 const split = document.querySelector(".split");
@@ -71,6 +72,13 @@ for (let i = 0; i < NUM_WORKERS; i++) {
 
 // =============================================================================
 // ============================== RENDER LOGIC =================================
+const user_added_objs = new Map();
+add_obj_input.addEventListener("change", async () => {
+ const [file] = add_obj_input.files;
+ user_added_objs.set(file.name, await file.text());
+ notyf.success(`Added ${file.name}`);
+});
+
 const drawCanvas = (y0, dy, pixels) => {
  const height = Math.min(dy, canvas.height - y0);
  const imageData = new ImageData(pixels, canvas.width, height);
@@ -94,7 +102,7 @@ const render = async () => {
  let width = undefined;
  let height = undefined;
  try {
- const dims = (await Promise.all(workers.map((obj, id) => obj.init(id, scene, dy))))[0];
+ const dims = (await Promise.all(workers.map((obj, id) => obj.init(id, scene, user_added_objs, dy))))[0];
  width = dims.width;
  height = dims.height;
  } catch (error) {

www/style.css

@@ -38,10 +38,21 @@ body {
  margin-right: 30px;
 }
 
+#add-obj-label {
+ max-height: 5vh;
+ margin-right: 30px;
+}
+
 #render {
  max-height: 5vh;
 }
 
+.plus-sign {
+ padding-left: 15px;
+ color: #777777;
+ font-size: 3vh;
+}
+
 .footer {
  display: flex;
  align-items: center;
@@ -252,3 +263,51 @@ select:focus + .focus {
  border: 2px solid var(--select-focus);
  border-radius: inherit;
 }
+
+#add-obj-label {
+ align-items: center;
+ appearance: none;
+ background-color: #fcfcfd;
+ border-radius: 4px;
+ border-width: 0;
+ box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,
+ rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #d6d6e7 0 -3px 0 inset;
+ box-sizing: border-box;
+ color: #070707;
+ cursor: pointer;
+ display: inline-flex;
+ font-family: "JetBrains Mono", monospace;
+ height: 48px;
+ justify-content: center;
+ line-height: 1;
+ list-style: none;
+ overflow: hidden;
+ padding-left: 16px;
+ padding-right: 16px;
+ position: relative;
+ text-align: left;
+ text-decoration: none;
+ transition: box-shadow 0.15s, transform 0.15s;
+ user-select: none;
+ -webkit-user-select: none;
+ touch-action: manipulation;
+ white-space: nowrap;
+ will-change: box-shadow, transform;
+ font-size: 2vh;
+}
+
+#add-obj-label:focus {
+ box-shadow: #d6d6e7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px,
+ rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #d6d6e7 0 -3px 0 inset;
+}
+
+#add-obj-label:hover {
+ box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px,
+ rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #d6d6e7 0 -3px 0 inset;
+ transform: translateY(-2px);
+}
+
+#add-obj-label:active {
+ box-shadow: #d6d6e7 0 3px 7px inset;
+ transform: translateY(2px);
+}

www/worker.js

@@ -3,17 +3,20 @@ importScripts("./comlink.js");
 const text_decoder = new TextDecoder();
 let console_log_buffer = "";
 let wasm = undefined;
+let user_added_objs = undefined;
 
 const obj = {
  id: undefined,
  dy: undefined,
  width: undefined,
  height: undefined,
  pixels: undefined,
+ user_added_objs: undefined,
 
- init: async function(id, scene, dy) {
+ init: async function(id, scene, objs, dy) {
  this.id = id;
  this.dy = dy;
+ user_added_objs = objs;
  if (typeof(wasm) == "undefined") {
  wasm = {
  instance: undefined,
@@ -57,6 +60,11 @@ const obj = {
  loadObjData: function (name_ptr, name_len) {
  name_ = wasm.getString(name_ptr, Number(name_len));
 
+ const data = user_added_objs.get(name_);
+ if (typeof(data) != "undefined") {
+ return wasm.encodeString(data);
+ }
+
  const request = new XMLHttpRequest();
  request.open("GET", `obj/${name_}`, false);
  request.send(null);