tela.js 1.1.8 → 1.1.10

package/README.md

@@ -16,6 +16,8 @@ Playground usage:
 
 - [Quick start](#quick-start)
 - [Dependencies](#dependencies)
+- [Acknowledgements](#acknowledgements)
+- [TODOs](#todos)
 
 # Quick start
 
@@ -36,7 +38,7 @@ Playground usage:
 
     const width = 640;
     const height = 480;
-    const canvas = Canvas.ofSize(640, 480);
+    const canvas = Canvas.ofSize(width, height);
     loop(({ time, dt }) => {
         document.title = `FPS: ${(Math.floor(1 / dt))}`;
         canvas.map((x, y) => {
@@ -60,7 +62,7 @@ import { loop, Color, Window } from "tela.js/src/index.node.js";
 
 const width = 640;
 const height = 480;
-const window = Window.ofSize(640, 480);
+const window = Window.ofSize(width, height);
 loop(({ time, dt }) => {
     window.setTitle(`FPS: ${Math.floor(1 / dt)}`);
     window.map((x, y) => {
@@ -111,9 +113,6 @@ video(
 
 And run it: `node index.mjs` / `bun index.js`
 
-### Bun install issue
-
-Bun install is currently not working properly on these project. Although you can run examples with bun.
 
 ### Note on generating videos
 
@@ -139,8 +138,14 @@ You can find more examples of usage in:
 - [`ffmpeg`][ffmpeg]
 - [`node-sdl`][sdl]
 
-[Node][node] is preferred when running the demos (it is faster, [opened a bug in bun](https://github.com/oven-sh/bun/issues/9218)), [bun][bun] is needed to build the library.
+[Node][node] is preferred when running the demos (it is faster, [opened a bug in bun](https://github.com/oven-sh/bun/issues/9218)).
+
+
+# Acknowledgements
 
+- [Keenan's 3D Model Repository](https://www.cs.cmu.edu/~kmcrane/Projects/ModelRepository/)
+- [The models resource](https://www.models-resource.com/)
+- [otaviogood fonts](https://github.com/otaviogood/shader_fontgen)
 
 # TODOs
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tela.js",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "author": "Pedroth",
   "repository": {
     "type": "git",

package/src/Camera/Camera.js

@@ -4,7 +4,7 @@ import { getRayTracer } from "./rayTrace.js";
 import { rasterGraphics } from "./raster.js";
 import { sdfTrace } from "./sdf.js";
 import { normalTrace } from "./normal.js";
-import { parallelWorkers } from "./parallel.js";
+import { rayMapWorkers, rayTraceWorkers } from "./parallel.js";
 
 export default class Camera {
   constructor(props = {}) {
@@ -107,6 +107,18 @@ export default class Camera {
     }
   }
 
+  rayMapParallel(lambdaWithRays, dependencies) {
+    return {
+      to: (canvas, { scene, ...vars }) => {
+        return Promise
+          .allSettled(rayMapWorkers(this, scene, canvas, lambdaWithRays, vars, dependencies))
+          .then(() => {
+            return canvas.paint();
+          })
+      }
+    }
+  }
+
   sceneShot(scene, params) {
     return this.rayMap(getRayTracer(scene, params));
   }
@@ -129,7 +141,7 @@ export default class Camera {
     return {
       to: canvas => {
         return Promise
-          .all(parallelWorkers(this, scene, canvas, params))
+          .allSettled(rayTraceWorkers(this, scene, canvas, params))
           .then(() => {
             return canvas.paint();
           })

package/src/Camera/parallel.js

@@ -1,6 +1,5 @@
-import { IS_NODE, NUMBER_OF_CORES } from "../Utils/Constants.js";
+import { CHANNELS, IS_NODE, NUMBER_OF_CORES } from "../Utils/Constants.js";
 import Color from "../Color/Color.js";
-import { CHANNELS } from "../Tela/Tela.js";
 
 //========================================================================================
 /*                                                                                      *
@@ -23,8 +22,14 @@ class MyWorker {
         if (IS_NODE) {
             this.worker.removeAllListeners('message');
             this.worker.on("message", lambda);
+            this.worker.on("error", e => console.log("Caught error on worker", e))
         } else {
-            this.worker.onmessage = message => lambda(message.data);
+            if (this.__lambda) {
+                this.worker.removeEventListener('message', this.__lambda);
+            }
+            this.__lambda = message => lambda(message.data);
+            this.worker.addEventListener("message", this.__lambda);
+            this.worker.addEventListener("error", e => console.log("Caught error on worker", e));
         }
     }
 
@@ -33,29 +38,39 @@ class MyWorker {
     }
 }
 
-let WORKERS = [];
+let RAY_TRACE_WORKERS = [];
+let RAY_MAP_WORKERS = [];
 let prevSceneHash = undefined;
+let isFirstTimeCounter = NUMBER_OF_CORES;
+let serializedScene = undefined;
 
+const MAGIC_SETUP_TIME = 800;
 //========================================================================================
 /*                                                                                      *
  *                                         MAIN                                         *
  *                                                                                      */
 //========================================================================================
 
-export function parallelWorkers(camera, scene, canvas, params = {}) {
+export function rayTraceWorkers(camera, scene, canvas, params = {}) {
     // lazy loading workers
-    if (WORKERS.length === 0) {
+    if (RAY_TRACE_WORKERS.length === 0) {
         // needs to be here...
         const isGithub = typeof window !== "undefined" && (window.location.host || window.LOCATION_HOST) === "pedroth.github.io";
         const SOURCE = isGithub ? "/tela.js" : ""
-        WORKERS = [...Array(NUMBER_OF_CORES)]
+        RAY_TRACE_WORKERS = [...Array(NUMBER_OF_CORES)]
             .map(() => new MyWorker(`${IS_NODE ? "." : SOURCE}/src/Camera/rayTraceWorker.js`));
     }
     const w = canvas.width;
     const h = canvas.height;
-    const isNewScene = prevSceneHash !== scene.hash;
-    if (isNewScene) prevSceneHash = scene.hash;
-    return WORKERS.map((worker, k) => {
+    const newHash = scene?.getHash();
+    const isNewScene = prevSceneHash !== newHash;
+    if (isNewScene) {
+        prevSceneHash = newHash;
+        serializedScene = scene.serialize()
+    } else {
+        serializedScene = undefined;
+    }
+    return RAY_TRACE_WORKERS.map((worker, k) => {
         return new Promise((resolve) => {
             worker.onMessage(message => {
                 const { image, startRow, endRow, } = message;
@@ -67,18 +82,80 @@ export function parallelWorkers(camera, scene, canvas, params = {}) {
                 }
                 resolve();
             })
-            const ratio = Math.floor(h / WORKERS.length);
+            const ratio = Math.floor(h / RAY_TRACE_WORKERS.length);
+
+            const message = {
+                width: w,
+                height: h,
+                vars: params,
+                startRow: k * ratio,
+                endRow: Math.min(h, (k + 1) * ratio),
+                camera: camera.serialize(),
+                scene: serializedScene
+            };
+            if (isFirstTimeCounter > 0 && !IS_NODE) {
+                // hack to work in the browser, don't know why it works
+                isFirstTimeCounter--;
+                setTimeout(() => worker.postMessage(message), MAGIC_SETUP_TIME);
+            } else {
+                worker.postMessage(message)
+            }
+        });
+    })
+}
 
+export function rayMapWorkers(camera, scene, canvas, lambda, vars = [], dependencies = []) {
+    // lazy loading workers
+    if (RAY_MAP_WORKERS.length === 0) {
+        // needs to be here...
+        const isGithub = typeof window !== "undefined" && (window.location.host || window.LOCATION_HOST) === "pedroth.github.io";
+        const SOURCE = isGithub ? "/tela.js" : ""
+        RAY_MAP_WORKERS = [...Array(NUMBER_OF_CORES)]
+            .map(() => new MyWorker(`${IS_NODE ? "." : SOURCE}/src/Camera/rayMapWorker.js`));
+    }
+    const w = canvas.width;
+    const h = canvas.height;
+    const newHash = scene?.getHash();
+    const isNewScene = prevSceneHash !== newHash;
+    if (isNewScene) {
+        prevSceneHash = newHash;
+        serializedScene = scene.serialize()
+    } else {
+        serializedScene = undefined;
+    }
+    return RAY_MAP_WORKERS.map((worker, k) => {
+        return new Promise((resolve) => {
+            worker.onMessage(message => {
+                const { image, startRow, endRow, } = message;
+                let index = 0;
+                const startIndex = CHANNELS * w * startRow;
+                const endIndex = CHANNELS * w * endRow;
+                for (let i = startIndex; i < endIndex; i += CHANNELS) {
+                    canvas.setPxlData(i, Color.ofRGB(image[index++], image[index++], image[index++], image[index++]));
+                }
+                resolve();
+            })
+            const ratio = Math.floor(h / RAY_MAP_WORKERS.length);
+            
             const message = {
                 width: w,
                 height: h,
-                params: params,
+                vars: vars,
+                lambda: lambda.toString(),
                 startRow: k * ratio,
                 endRow: Math.min(h, (k + 1) * ratio),
                 camera: camera.serialize(),
-                scene: isNewScene ? scene.serialize() : undefined
+                dependencies: dependencies.map(d => d.toString()),
+                scene: serializedScene
             };
-            worker.postMessage(message);
+            if (isFirstTimeCounter > 0 && !IS_NODE) {
+                // hack to work in the browser, don't know why it works
+                isFirstTimeCounter--;
+                setTimeout(() => worker.postMessage(message), MAGIC_SETUP_TIME);
+            } else {
+                worker.postMessage(message)
+            }
+            
         });
     })
-}
+}

package/src/Camera/rayMapWorker.js

@@ -0,0 +1,81 @@
+import Camera from "./Camera.js";
+import { memoize } from "../Utils/Utils.js";
+import { CHANNELS, IS_NODE } from "../Utils/Constants.js";
+import { deserializeScene } from "../Scene/utils.js";
+import Color from "../Color/Color.js";
+import Box from "../Geometry/Box.js";
+import Vec, { Vec2, Vec3 } from "../Vector/Vector.js";
+import Ray from "../Ray/Ray.js";
+
+const parentPort = IS_NODE ? (await import("node:worker_threads")).parentPort : undefined;
+
+let scene = undefined;
+
+function getScene(serializedScene) {
+    return deserializeScene(serializedScene).then(s => s.rebuild());
+}
+
+async function main(inputs) {
+    const {
+        startRow,
+        endRow,
+        width,
+        height,
+        vars,
+        dependencies,
+        lambda,
+        scene: serializedScene,
+        camera: serializedCamera,
+    } = inputs;
+
+    scene = serializedScene ? (await getScene(serializedScene)).rebuild() : scene;
+    const camera = Camera.deserialize(serializedCamera);
+    const rayGen = camera.rayFromImage(width, height);
+    const __lambda = getLambda(lambda, dependencies);
+    const bufferSize = width * (endRow - startRow + 1) * CHANNELS;
+    const image = new Float32Array(bufferSize);
+    let index = 0;
+    // the order does matter
+    for (let y = startRow; y < endRow; y++) {
+        for (let x = 0; x < width; x++) {
+            const ray = rayGen(x, height - 1 - y);
+            const color = __lambda(ray, { ...vars, scene });
+            if(!color) continue;
+            image[index++] = color.red;
+            image[index++] = color.green;
+            image[index++] = color.blue;
+            image[index++] = color.alpha;
+        }
+    }
+    return { image, startRow, endRow };
+}
+
+const getLambda = memoize((lambda, dependencies) => {
+    const __lambda = eval(`
+        ${dependencies.map(d => d.toString()).join("\n")}
+        const __lambda = ${lambda};
+        __lambda;
+        `)
+    return __lambda;
+});
+
+
+if (IS_NODE) {
+    parentPort.on("message", async message => {
+        const input = message;
+        const output = await main(input);
+        parentPort.postMessage(output);
+    });
+} else {
+    self.onmessage = async message => {
+        const input = message.data;
+        const output = await main(input);
+        postMessage(output);
+    };
+
+    self.onerror = e => {
+        console.log(`Caught error inside ray map worker ${e}`)
+    };
+
+
+}

package/src/Camera/rayTrace.js

@@ -4,7 +4,7 @@ import Ray from "../Ray/Ray.js";
 import Vec from "../Vector/Vector.js";
 import { getBiLinearTexColor, getDefaultTexColor, getTexColor } from "./common.js";
 
-export function rayTrace(ray, scene, params) {
+export function rayTrace(ray, scene, params = {}) {
     let { samplesPerPxl, bounces, variance, gamma, bilinearTexture } = params;
     bounces = bounces ?? 10;
     variance = variance ?? 0.001;

package/src/Camera/rayTraceWorker.js

@@ -1,7 +1,6 @@
 import Camera from "./Camera.js";
 import { rayTrace } from "./rayTrace.js";
-import { CHANNELS } from "../Tela/Tela.js";
-import { IS_NODE } from "../Utils/Constants.js";
+import { CHANNELS, IS_NODE } from "../Utils/Constants.js";
 import { deserializeScene } from "../Scene/utils.js";
 import Color from "../Color/Color.js";
 
@@ -56,4 +55,6 @@ if (IS_NODE) {
         const output = await main(input);
         postMessage(output);
     };
+
+    onerror = e => console.log("Caught error on rayTrace worker", e);
 }

package/src/Geometry/Box.js

@@ -142,11 +142,15 @@ export default class Box {
     }
 
     serialize() {
-        // TODO
+        return {
+            type: Box.name,
+            min: this.min.toArray(),
+            max: this.max.toArray()
+        }
     }
 
-    deserialize() {
-        // TODO
+    static async deserialize(json) {
+        return new Box(Vec.fromArray(json.min), Vec.fromArray(json.max));
     }
 
     static EMPTY = new Box();

package/src/Geometry/Line.js

@@ -77,7 +77,17 @@ export default class Line {
     }
 
     serialize() {
-        //TODO's
+        return {
+            type: Line.name,
+            name: this.name,
+            radius: this.radius,
+            emissive: this.emissive,
+            colors: this.colors.map(x => x.toArray()),
+            texCoords: this.texCoords.map(x => x.toArray()),
+            positions: this.positions.map(x => x.toArray()),
+            texture: this.texture ? this.texture.serialize() : undefined,
+            material: { type: this.material.type, args: this.material.args }
+        }
     }
 
     static deserialize(json) {

package/src/IO/IO.js

@@ -7,7 +7,7 @@ export function saveImageToFile(fileAddress, image) {
     const ppmName = `${fileName}.ppm`;
     writeFileSync(ppmName, createPPMFromImage(image));
     if (extension !== "ppm") {
-        execSync(`ffmpeg -i ${ppmName} ${fileName}.${extension}`);
+        execSync(`ffmpeg -i ${ppmName} -y ${fileName}.${extension}`);
         unlinkSync(ppmName)
     }
 }
@@ -89,7 +89,7 @@ export function saveImageStreamToVideo(fileAddress, streamWithImages, { imageGet
                 s = await s.tail;
             }
             if (!fps) fps = ite / time;
-            execSync(`ffmpeg -framerate ${fps} -i ${fileName}_%d.ppm ${fileName}.${extension}`);
+            execSync(`ffmpeg -framerate ${fps} -i ${fileName}_%d.ppm -y ${fileName}.${extension}`);
             for (let i = 0; i < ite; i++) {
                 unlinkSync(`${fileName}_${i}.ppm`);
             }
@@ -106,8 +106,8 @@ export function saveParallelImageStreamToVideo(fileAddress, parallelStreamOfImag
     const promises = inputParamsPartitions.map((inputParams, i) => {
         const spawnFile = "IO_parallel" + i + ".js";
         writeFileSync(spawnFile, `
-            import * as _module from "./src/index.node.js"
             import fs from "node:fs";
+            import * as _module from "./src/index.node.js"
             const {
                 Box,
                 Vec,

package/src/Scene/BScene.js

@@ -105,7 +105,7 @@ export default class BScene extends NaiveScene {
   }
 
   serialize() {
-    const json = this.super.serialize();
+    const json = super.serialize();
     json.type = BScene.name;
     return json;
   }

package/src/Scene/NaiveScene.js

@@ -9,8 +9,15 @@ export default class NaiveScene {
     this.sceneElements = [];
   }
 
-  get hash() {
-    return this.getElements().reduce((e, x) => e ^ hashStr(x.name), 0);
+  getHash() {
+    const elements = this.getElements();
+    let combinedHash = 0;
+    const prime = 31;  // A prime number, typically used in hash functions
+    for (let i = 0; i < elements.length; i++) {
+      const hash = hashStr(elements[i].name);
+      combinedHash = (combinedHash * prime) ^ hash;
+    }
+    return combinedHash >>> 0; // unsigned shift operator, converts combinedHash to unsigned number
   }
 
   add(...elements) {

package/src/Scene/utils.js

@@ -1,3 +1,4 @@
+import Line from "../Geometry/Line.js";
 import Sphere from "../Geometry/Sphere.js";
 import Triangle from "../Geometry/Triangle.js";
 import BScene from "./BScene.js";
@@ -21,6 +22,7 @@ export async function deserializeScene(sceneJson) {
         const serializedElement = sceneData[i];
         if (serializedElement.type === Triangle.name) sceneElements.push(await Triangle.deserialize(serializedElement, artifacts));
         if (serializedElement.type === Sphere.name) sceneElements.push(await Sphere.deserialize(serializedElement, artifacts));
+        if (serializedElement.type === Line.name) sceneElements.push(await Line.deserialize(serializedElement, artifacts));
     }
     return new SceneClass(...params)
         .addList(sceneElements);

package/src/Tela/Canvas.js

@@ -1,7 +1,6 @@
 import Color from "../Color/Color.js";
-import { MAX_8BIT } from "../Utils/Constants.js";
-import { memoize } from "../Utils/Utils.js";
-import Tela, { CHANNELS } from "./Tela.js";
+import { CHANNELS, MAX_8BIT } from "../Utils/Constants.js";
+import Tela from "./Tela.js";
 
 export default class Canvas extends Tela {
 
@@ -26,66 +25,6 @@ export default class Canvas extends Tela {
     return this;
   }
 
-  mapParallel = memoize((lambda, dependencies = []) => {
-    const N = navigator.hardwareConcurrency;
-    const w = this.width;
-    const h = this.height;
-    const fun = ({ _start_row, _end_row, _width_, _height_, _worker_id_, _vars_ }) => {
-      const image = new Float32Array(CHANNELS * _width_ * (_end_row - _start_row));
-      const startIndex = CHANNELS * _width_ * _start_row;
-      const endIndex = CHANNELS * _width_ * _end_row;
-      let index = 0;
-      for (let k = startIndex; k < endIndex; k += CHANNELS) {
-        const i = Math.floor(k / (CHANNELS * _width_));
-        const j = Math.floor((k / CHANNELS) % _width_);
-        const x = j;
-        const y = _height_ - 1 - i;
-        const color = lambda(x, y, { ..._vars_ });
-        if (!color) return;
-        image[index] = color.red;
-        image[index + 1] = color.green;
-        image[index + 2] = color.blue;
-        image[index + 3] = color.alpha;
-        index += CHANNELS;
-      }
-      return { image, _start_row, _end_row, _worker_id_ };
-    }
-    const workers = [...Array(N)].map(() => createWorker(fun, lambda, dependencies));
-    return {
-      run: (vars = {}) => {
-        // works better than Promise.all solution
-        return new Promise((resolve) => {
-          const allWorkersDone = [...Array(N)].fill(false);
-          workers.forEach((worker, k) => {
-            worker.onmessage = (event) => {
-              const { image, _start_row, _end_row, _worker_id_ } = event.data;
-              let index = 0;
-              const startIndex = CHANNELS * w * _start_row;
-              const endIndex = CHANNELS * w * _end_row;
-              for (let i = startIndex; i < endIndex; i++) {
-                this.image[i] = image[index];
-                index++;
-              }
-              allWorkersDone[_worker_id_] = true;
-              if (allWorkersDone.every(x => x)) {
-                return resolve(this.paint());
-              }
-            };
-            const ratio = Math.floor(h / N);
-            worker.postMessage({
-              _start_row: k * ratio,
-              _end_row: Math.min(h - 1, (k + 1) * ratio),
-              _width_: w,
-              _height_: h,
-              _worker_id_: k,
-              _vars_: vars
-            });
-          })
-        })
-      }
-    }
-  });
-
   onMouseDown(lambda) {
     this.canvas.addEventListener("mousedown", handleMouse(this, lambda), false);
     this.canvas.addEventListener("touchstart", handleMouse(this, lambda), false);
@@ -218,20 +157,4 @@ function handleMouse(canvas, lambda) {
     const y = Math.floor(h - 1 - my * h);
     return lambda(x, y, event);
   }
-}
-
-const createWorker = (main, lambda, dependencies) => {
-  const workerFile = `
-  const CHANNELS = ${CHANNELS};
-  ${Color.toString()}
-  ${dependencies.map(d => d.toString()).join("\n")}
-  const lambda = ${lambda.toString()};
-  const __main__ = ${main.toString()};
-  onmessage = e => {
-      const input = e.data
-      const output = __main__(input);
-      self.postMessage(output);
-  };
-  `;
-  return new Worker(URL.createObjectURL(new Blob([workerFile])));
-};
+}

package/src/Tela/Image.js

@@ -1,71 +1,9 @@
+import Tela from "./Tela.js";
 import Color from "../Color/Color.js";
 import { readImageFrom } from "../IO/IO.js";
-import { memoize } from "../Utils/Utils.js";
-import Tela, { CHANNELS } from "./Tela.js";
-import { Worker } from "node:worker_threads";
-import os from "node:os";
 
 export default class Image extends Tela {
 
-    mapParallel = memoize((lambda, dependencies = []) => {
-        const N = os.cpus().length;
-        const w = this.width;
-        const h = this.height;
-        const fun = ({ _start_row, _end_row, _width_, _height_, _worker_id_, _vars_ }) => {
-            const image = new Float32Array(CHANNELS * _width_ * (_end_row - _start_row));
-            const startIndex = CHANNELS * _width_ * _start_row;
-            const endIndex = CHANNELS * _width_ * _end_row;
-            let index = 0;
-            for (let k = startIndex; k < endIndex; k += CHANNELS) {
-                const i = Math.floor(k / (CHANNELS * _width_));
-                const j = Math.floor((k / CHANNELS) % _width_);
-                const x = j;
-                const y = _height_ - 1 - i;
-                const color = lambda(x, y, { ..._vars_ });
-                if (!color) continue;
-                image[index] = color.red;
-                image[index + 1] = color.green;
-                image[index + 2] = color.blue;
-                image[index + 3] = 1;
-                index += CHANNELS;
-            }
-            return { image, _start_row, _end_row, _worker_id_ };
-        }
-        const workers = [...Array(N)].map(() => createWorker(fun, lambda, dependencies));
-        return {
-            run: (vars = {}) => {
-                // in node promise.all is faster than the canvas method
-                return Promise
-                    .all(workers.map((worker, k) => {
-                        return new Promise((resolve) => {
-                            worker.removeAllListeners('message');
-                            worker.on("message", (message) => {
-                                const { image, _start_row, _end_row } = message;
-                                let index = 0;
-                                const startIndex = CHANNELS * w * _start_row;
-                                const endIndex = CHANNELS * w * _end_row;
-                                for (let i = startIndex; i < endIndex; i++) {
-                                    this.image[i] = image[index];
-                                    index++;
-                                }
-                                return resolve();
-                            });
-                            const ratio = Math.floor(h / N);
-                            worker.postMessage({
-                                _start_row: k * ratio,
-                                _end_row: Math.min(h - 1, (k + 1) * ratio),
-                                _width_: w,
-                                _height_: h,
-                                _worker_id_: k,
-                                _vars_: vars
-                            });
-                        })
-                    }))
-                    .then(() => this.paint());
-            }
-        }
-    });
-
     serialize() {
         return { type: Image.name, url: this.url };
     }
@@ -104,27 +42,4 @@ export default class Image extends Tela {
                 return image.getPxl(x, y);
             })
     }
-}
-
-//========================================================================================
-/*                                                                                      *
- *                                        Private                                       *
- *                                                                                      */
-//========================================================================================
-
-
-const createWorker = (main, lambda, dependencies) => {
-    const workerFile = `
-    const { parentPort } = require("node:worker_threads");
-    const CHANNELS = ${CHANNELS};
-    ${dependencies.concat([Color]).map(d => d.toString()).join("\n")}
-    const lambda = ${lambda.toString()};
-    const __main__ = ${main.toString()};
-    parentPort.on("message", message => {
-        const output = __main__(message);
-        parentPort.postMessage(output);
-    });
-    `;
-    const worker = new Worker(workerFile, { eval: true });
-    return worker;
-};
+}