tela.js 1.2.7 → 1.2.9

package/package.json

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

package/src/Camera/raster.js

@@ -234,11 +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] && c.alpha >= 1) {
-            zBuffer[zBufferIndex] = z;
-            return c;
+        if (z < zBuffer[zBufferIndex]) {
+            const color = Math.random() < c.alpha ? c : undefined;
+            if(color) zBuffer[zBufferIndex] = z; // if color is undefined, don't update zBuffer
+            return color;
         }
-        return Math.random() < c.alpha ? c : undefined;
     }
     canvas.drawTriangle(intPoints[0], intPoints[1], intPoints[2], shader);
 }

package/src/Camera2D/Camera2D.js

@@ -3,6 +3,8 @@ import Box from "../Geometry/Box.js";
 import Sphere from "../Geometry/Sphere.js";
 import Line from "../Geometry/Line.js";
 import Triangle from "../Geometry/Triangle.js";
+import Color from "../Color/Color.js";
+import { getTexColor } from "../Camera/common.js";
 
 export default class Camera2D {
   constructor(box = new Box(Vec2(), Vec2(1, 1))) {
@@ -101,14 +103,51 @@ function rasterLine(line, camera, canvas) {
 }
 
 function rasterTriangle(triangle, camera, canvas) {
-  const positionsInCanvas = triangle.positions.map(p => camera.toCanvasCoord(p, canvas).map(Math.floor));
-  return canvas.drawTriangle(
-    positionsInCanvas[0],
-    positionsInCanvas[1],
-    positionsInCanvas[2],
-    () => {
-      return triangle.colors[0];
+  const colors = triangle.colors;
+  const texCoords = triangle.texCoords;
+  const texture = triangle.texture;
+  const intPoints = triangle
+    .positions
+    .map(p => camera.toCanvasCoord(p, canvas).map(Math.floor));
+  const u = intPoints[1].sub(intPoints[0]);
+  const v = intPoints[2].sub(intPoints[0]);
+  const det = u.x * v.y - u.y * v.x; // wedge product
+  if (det === 0) return;
+  const invDet = 1 / det;
+  const c1 = colors[0].toArray();
+  const c2 = colors[1].toArray();
+  const c3 = colors[2].toArray();
+  const haveTextures = texCoords &&
+    texCoords.length > 0 &&
+    !texCoords.some(x => x === undefined);
+  const shader = (x, y) => {
+    const p = Vec2(x, y).sub(intPoints[0]);
+    const alpha = - (v.x * p.y - v.y * p.x) * invDet;
+    const beta = (u.x * p.y - u.y * p.x) * invDet;
+    const gamma = 1 - alpha - beta;
+  
+    // compute color
+    let c = Color.ofRGB(
+      c1[0] * gamma + c2[0] * alpha + c3[0] * beta,
+      c1[1] * gamma + c2[1] * alpha + c3[1] * beta,
+      c1[2] * gamma + c2[2] * alpha + c3[2] * beta,
+      c1[3] * gamma + c2[3] * alpha + c3[3] * beta,
+    );
+    if (haveTextures) {
+      const texUV = texCoords[0].scale(gamma)
+        .add(texCoords[1].scale(alpha))
+        .add(texCoords[2].scale(beta));
+      const texColor = texture ? getTexColor(texUV, texture) : c;
+      c = texColor;
     }
+    return Math.random() < c.alpha ? c : undefined;
+  }
+
+  return canvas.drawTriangle(
+    intPoints[0],
+    intPoints[1],
+    intPoints[2],
+    shader
   );
 
 }

package/src/Geometry/Line.js

@@ -5,6 +5,8 @@ import { clamp } from "../Utils/Math.js";
 import Vec, { Vec2, Vec3 } from "../Vector/Vector.js";
 import { generateUniqueID } from "../Utils/Utils.js";
 
+const clamp01 = clamp();
+
 export default class Line {
     constructor({ name, positions, colors, texCoords, normals, texture, radius, emissive, material }) {
         this.name = name;
@@ -32,7 +34,9 @@ export default class Line {
     distanceToPoint(p) {
         const l = this.edge;
         const v = p.sub(this.positions[0]);
-        const h = clamp()(l.dot(v) / l.dot(l))
+        const sqLength = l.dot(l);
+        if(sqLength < 1e-6) return Number.MAX_VALUE
+        const h = clamp01(l.dot(v) / sqLength);
         return p.sub(this.positions[0].add(l.scale(h))).length() - this.radius;
     }
 

package/src/Geometry/Triangle.js

@@ -38,28 +38,43 @@ export default class Triangle {
         this.invU2 = Vec2(-c, a).scale(detInv);
     }
 
+    getBarycentricCoords(p) {
+        const r = p.sub(this.positions[0]);
+        const x = Vec2(this.tangents[0].dot(r), this.tangents[1].dot(r));
+        let alpha = Vec2(this.invU1.dot(x), this.invU2.dot(x));
+        const sum = alpha.fold((e, x) => e + x, 0)
+        return Vec3(alpha.x, alpha.y, 1 - sum);
+    }
+
     getBoundingBox() {
+        const n = this.positions[0].dim;
         if (this.boundingBox) return this.boundingBox;
-        this.boundingBox = this.positions.reduce((box, x) => box.add(new Box(x, x)), Box.EMPTY);
+        const r = Vec.ONES(n).scale(this.radius)
+        this.boundingBox = this.positions.reduce((box, x) => box.add(new Box(x.sub(r), x.add(r))), Box.EMPTY);
         return this.boundingBox;
     }
 
     distanceToPoint(p) {
-        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);
-        }
+        let alpha = this.getBarycentricCoords(p).map(x => Math.max(0, x));
+        const sum = alpha.fold((e, x) => e + x, 0);
+        
+        // if (sum === 1) {
+        //     const r0 = p.sub(this.positions[0]);
+        //     const r1 = p.sub(this.positions[1]);
+        //     const r2 = p.sub(this.positions[2]);
+        //     return -Math.min(
+        //         r0.sub(this.edges[0].scale(this.edges[0].dot(r0) / this.edges[0].dot(this.edges[0]))).length(),
+        //         r1.sub(this.edges[1].scale(this.edges[1].dot(r1) / this.edges[1].dot(this.edges[1]))).length(),
+        //         r2.sub(this.edges[2].scale(this.edges[2].dot(r2) / this.edges[2].dot(this.edges[2]))).length()
+        //     )
+        // }
+
+        alpha = alpha.scale(1 / sum);
         const pointOnTriangle = this.positions[0]
             .add(
                 this.tangents[0].scale(alpha.x)
-                    .add(
-                        this.tangents[1].scale(alpha.y)
-                    )
-            )
+                    .add(this.tangents[1].scale(alpha.y))
+            );
         return p.sub(pointOnTriangle).length() - this.radius;
     }
 

package/src/Scene/KScene.js

@@ -139,7 +139,7 @@ export default class KScene extends NaiveScene {
         debugScene = debugScene || new NaiveScene();
         if (level === 0) {
             let maxLevels = Math.round(Math.log2(node.numberOfLeafs / this.k)) + 1;
-            maxLevels = maxLevels === 0 ? 1 : maxLevels;
+            maxLevels = maxLevels <= 0 ? 1 : maxLevels;
             for (let i = 0; i <= maxLevels; i++)
                 level2colors.push(
                     Color.RED.scale(1 - i / maxLevels).add(Color.BLUE.scale(i / maxLevels))
@@ -220,7 +220,7 @@ class Node {
     }
 
     distanceToPoint(p) {
-        if(!this.left && !this.right) return Number.MAX_VALUE;
+        if (!this.left && !this.right) return Number.MAX_VALUE;
         return this.getElementNear(p).distanceToPoint(p);
     }
 

package/src/Tela/telaWorker.js

@@ -1,5 +1,6 @@
 import { CHANNELS, IS_NODE } from "../Utils/Constants.js";
 import { memoize } from "../Utils/Utils.js";
+// necessary to load this even though is not used in the code, it might be used in the eval.
 import Color from "../Color/Color.js";
 import Box from "../Geometry/Box.js";
 import Vec, { Vec2, Vec3 } from "../Vector/Vector.js";