tela.js 1.2.6 → 1.2.7

package/README.md

@@ -78,7 +78,7 @@ loop(({ time, dt }) => {
 And run it: `node index.mjs` / `bun index.js`
 
 > Note: [Attention to running node with ES6 imports module](https://nodejs.org/api/esm.html#modules-ecmascript-modules)
-
+> Note: If you're using `bun` and the `Window`, which uses `@kmamal/sdl` as dependency, make sure to run `bun pm trust @kmamal/sdl`.
 
 ## Generate images and videos
 

package/package.json

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

package/src/Camera/raster.js

@@ -234,10 +234,11 @@ function rasterTriangle({ canvas, camera, elem, w, h, zBuffer, params }) {
         }
         const [i, j] = canvas.canvas2grid(x, y);
         const zBufferIndex = Math.floor(w * i + j);
-        if (z < zBuffer[zBufferIndex]) {
+        if (z < zBuffer[zBufferIndex] && c.alpha >= 1) {
             zBuffer[zBufferIndex] = z;
-            return Math.random() < c.alpha ? c : undefined;
+            return c;
         }
+        return Math.random() < c.alpha ? c : undefined;
     }
     canvas.drawTriangle(intPoints[0], intPoints[1], intPoints[2], shader);
 }

package/src/Color/Color.js

@@ -7,7 +7,7 @@ import { MAX_8BIT, RAD2DEG } from "../Utils/Constants.js";
  */
 export default class Color {
   constructor(rgb, alpha = 1.0) {
-    this.rgb = rgb;
+    this.rgb = rgb.map(x => Number.isNaN(x) ? 0 : x);
     this.alpha = alpha;
   }
 
@@ -112,4 +112,5 @@ export default class Color {
   static WHITE = Color.ofRGB(1, 1, 1);
   static GRAY = Color.ofRGB(0.5, 0.5, 0.5);
   static GREY = Color.ofRGB(0.5, 0.5, 0.5);
+  static BROWN = Color.ofRGB(0.345,0.2235,0.1529);
 }

package/src/Geometry/Box.js

@@ -26,10 +26,11 @@ export default class Box {
     normalToPoint(pointVec) {
         const epsilon = 1e-3;
         const n = pointVec.dim;
+        const En = Vec.e(n);
         const grad = [];
         const d = this.distanceToPoint(pointVec);
         for (let i = 0; i < n; i++) {
-            grad.push(this.distanceToPoint(pointVec.add(Vec.e(n)(i).scale(epsilon))) - d)
+            grad.push(this.distanceToPoint(pointVec.add(En(i).scale(epsilon))) - d)
         }
         let sign = Math.sign(d);
         sign = sign === 0 ? 1 : sign;

package/src/Geometry/Triangle.js

@@ -6,7 +6,7 @@ import { deserialize as deserializeImage } from "../Tela/utils.js";
 import { generateUniqueID } from "../Utils/Utils.js";
 
 export default class Triangle {
-    constructor({ name, positions, colors, texCoords, normals, texture, emissive, material }) {
+    constructor({ name, positions, colors, texCoords, normals, texture, emissive, material, radius }) {
         this.name = name;
         this.colors = colors;
         this.normals = normals;
@@ -15,6 +15,7 @@ export default class Triangle {
         this.texCoords = texCoords;
         this.emissive = emissive;
         this.material = material;
+        this.radius = radius;
         this.edges = [];
         const n = this.positions.length;
         for (let i = 0; i < n; i++) {
@@ -25,6 +26,16 @@ export default class Triangle {
         const v = this.tangents[1];
         const cross = u.cross(v);
         this.faceNormal = Number.isFinite(cross) ? Vec3(0, 0, cross) : cross?.normalize();
+
+        // precompute inverse of matrix [u, v]^T [u, v]
+        const a = u.dot(u);
+        const b = u.dot(v);
+        const c = b;
+        const d = v.dot(v);
+        const detInv = 1 / (a * d - b * c);
+        this.isDegenerate = !Number.isFinite(detInv) || Number.isNaN(detInv)
+        this.invU1 = Vec2(d, -b).scale(detInv)
+        this.invU2 = Vec2(-c, a).scale(detInv);
     }
 
     getBoundingBox() {
@@ -34,11 +45,26 @@ export default class Triangle {
     }
 
     distanceToPoint(p) {
-        // TODO
-        return Number.MAX_VALUE;
+        const r = p.sub(this.positions[0]);
+        if (this.isDegenerate) return r.length() - this.radius;
+        const x = Vec2(this.tangents[0].dot(r), this.tangents[1].dot(r));
+        let alpha = Vec2(this.invU1.dot(x), this.invU2.dot(x)).map(x => x < 0 ? 0 : x);
+        const sum = alpha.fold((e, x) => e + x, 0)
+        if (sum > 1) {
+            alpha = alpha.scale(1 / sum);
+        }
+        const pointOnTriangle = this.positions[0]
+            .add(
+                this.tangents[0].scale(alpha.x)
+                    .add(
+                        this.tangents[1].scale(alpha.y)
+                    )
+            )
+        return p.sub(pointOnTriangle).length() - this.radius;
     }
 
     normalToPoint(p) {
+        // fixes problem in ray tracing
         const r = p.sub(this.positions[0]);
         const dot = this.faceNormal.dot(r);
         return dot < 1e-3 ? this.faceNormal : this.faceNormal.scale(-1);
@@ -112,6 +138,7 @@ class TriangleBuilder {
         this._colors = indx.map(() => Color.BLACK);
         this._positions = indx.map(() => Vec3());
         this._texCoords = [Vec2(), Vec2(1, 0), Vec2(0, 1)];
+        this._radius = 1;
         this._emissive = false;
         this._material = Diffuse();
     }
@@ -121,6 +148,11 @@ class TriangleBuilder {
         return this;
     }
 
+    radius(radius) {
+        this._radius = radius;
+        return this;
+    }
+
     positions(v1, v2, v3) {
         if ([v1, v2, v3].some(x => !x)) return this;
         this._positions = [v1, v2, v3];
@@ -163,6 +195,7 @@ class TriangleBuilder {
     build() {
         const attrs = {
             name: this._name,
+            radius: this._radius,
             colors: this._colors,
             normals: this._normals,
             positions: this._positions,