Is it possible that the triangulation library functions on Firefox, but encounters compatibility issues on Chrome?

Currently, I am implementing triangulation using the Poly2Tri library.

This is my code:

var swctx = new poly2tri.SweepContext(contour);
swctx.triangulate();

var triangles = swctx.getTriangles(); 
for (var w = 0; w < triangles.length; w++) {
    pts_tri = triangles[w].points_;
    index1 = pts2.findIndex(x => x[0] == pts_tri[0].x && x[1] == pts_tri[0].y)
} 

for (var k = 0; k < result.length; k++) { 
    geometry.faces.push(
        new THREE.Face3(result[k][0].id, result[k][1].id, result[k][2].id)
    );
}

No errors are encountered when loading the libraries!

Outcome:

1.) Mozilla Firefox: successfully operational without any error!

2.) Google Chrome: encountering issues with collinear points leading to failure.

I am wondering:

1.) Why does the same code and library work seamlessly on Firefox but faces difficulties on Chrome? Could it be due to the different JavaScript engines used by each browser?

Although Chrome utilizes the V8 engine and Firefox relies on Rhino/SpiderMonkey, doesn't this issue solely depend on the library for triangulation?

2.) Is there a way to make the code functional in Chrome while still utilizing the same library? How can this error be prevented?

3.) Does the library have built-in support for handling collinear points, considering that it functions flawlessly on Firefox?

Answer №1

It is important to avoid having collinear and duplicate points in the geometry definition when creating triangular shapes. It is recommended to clean up the data before triangulation to eliminate such points.

Many libraries used for tessellation or triangulation may struggle with handling collinear points.

If all points are collinear, meaning they lie on a straight line, it is not possible to triangulate them as a line cannot be divided into triangles.

To identify collinear points, you can use the determinant where the value would be zero (d = 0). However, there exist more efficient algorithms for this purpose. For further information, refer to this Stackoverflow question.


Calculating the determinant

In three.js, you can easily calculate the determinant of three points using the .determinant() method of the THREE.Matrix3 class:

var v1 = ...
var v2 = ...
var v3 = ...

var matrix = new THREE.Matrix3();

matrix.set(
    v1.x, v1.y, 1, 
    v2.x, v2.y, 1,
    v3.x, v3.y, 1
);

var d = matrix.determinant();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Efficiently removing a duplicated component in Vue: A step-by-step guide

I am trying to find a way to target and remove a component that I duplicated using the v-for directive in my multiple stopwatch application. Currently, I can only delete the last duplicated component, but I want the ability to remove any targeted component ...

Sorting through items based on several URL parameters

In an effort to be concise yet clear, I am working on an ecommerce website using Next.js and Shopify. This site features products that need to be filterable based on certain attributes. I retrieve products from the Shopify API, each with its own Product Ty ...

What could be causing my ASP.Net MVC script bundles to load on every page view?

I'm a bit puzzled. The _layout.cshtml page I have below contains several bundles of .css and .js files. Upon the initial site load, each file in the bundles is processed, which makes sense. However, every time a new view is loaded, each line of code f ...

Navigating HTML with Node.js and Express.js

I have been working on routing multiple HTML pages in my project. The index.html file loads without any issues, but when I try to load raw.html, an error message pops up: Error: Failed to lookup view "error" in views directory Below is part of my app.j ...

Tips for using the .innerHTML method to reference multiple indexes

How can I set the .innerHTML for multiple indexes of an array? I currently have an array let poles = Array.prototype.slice.call(document.querySelectorAll(".pole")); This array contains 9 empty divs, such as : <div class="pole" id="1"></div> ...

What steps can I take to stop the textfield from automatically changing the ID "myid" to "myid-tokenfield" when using Tokenfield for Bootstrap?

While utilizing Tokenfield for Bootstrap, I have encountered an issue where the id of my textfield gets modified from myid to myid-tokenfield. In order to properly interact with the search engine I am using, this textfield must maintain a specific id. The ...

AngularJS Toggle Directive tutorial: Building a toggle directive in Angular

I'm attempting to achieve a similar effect as demonstrated in this Stack Overflow post, but within the context of AngularJS. The goal is to trigger a 180-degree rotation animation on a button when it's clicked – counterclockwise if active and c ...

Transform an array into an object utilizing only underscore

I'm currently learning about underscore and came across a task that I could use some assistance with. I have an array containing objects like the following: [ // ... { "type": "presence", "params": { "i ...

Troubleshooting a Laravel 5.2 modal popup issue for password recovery, experiencing a 500 internal server error with the Ajax function execution

Is there a way to check if an email exists in order to send a reset password link using an AJAX function? I keep encountering a 500 internal server error before the AJAX runs. I understand that a 500 error is usually due to a token mismatch, but do I actua ...

behavior of the back button within an AngularJS program

Currently facing an issue with a single-page application built using AngularJS. The app is composed of three main views - the login view, main view, and logout view. myapp/#/login myapp/#/main myapp/#/logout This is my route provider setup: function Ro ...

Using Ajax script to transfer user information to a php file in order to refresh the modified row in a table

Recently, I created a table in PHP to display certain data. Here's how it looks: <?php echo '<table id="tableteste" class="table table-striped" width="100%">'; echo '<thead><tr>'; echo &apos ...

Leveraging the power of three.js in combination with Blender to incorporate .json files

After installing the three.js exporter, I encountered an issue where exporting a blender model resulted in a model.json file. Attempting to replace the model in this example/tutorial with my own model proved unsuccessful as it was not being displayed. C ...

What could possibly prevent Jasmine Spyon from being named?

I am currently facing an issue with a failing test even though I have included the necessary calls. One specific area where I am encountering this problem is with the PrimeNG Message Service that I am spying on. Below, you can find the code snippet that I ...

Order a portion of a JSON array according to another part of the same array

Having a json array that needs sorting in JavaScript. The EventName field should match the respective Age fields like 01-10 Days and 10-20 Days. [ {Age: "01-10 Days", EventName: "Invoice AP Review", Value: 1, ActiveInvoices: []} ,{Age: "01-10 Days", Even ...

presentation banner that doesn't rely on flash technology

Looking to create a dynamic slideshow banner for my website inspired by the design on play.com. This banner will feature 5 different slides that transition automatically after a set time, while also allowing users to manually navigate using numbered button ...

Tips for locating a file using javascript

My application scans a folder and displays all folders and HTML files inside it in a dropdown menu. It also shows any HTML files inside an iframe. There is one file named "highlighted.html" that should not appear in the dropdown menu, but if it exists in t ...

Accessing feedback from Reddit's API

After writing some code to search Reddit's API with a specific query, I now want it to display comments as well. Inside my $.getJSON statement that retrieves each title/post based on the search query, I have the following nested code block. The goal i ...

Error: Scheme is not a valid function call

Currently, I am attempting to implement user registration functionality in a Node.js application using MongoDB. However, I encountered this error: var UtenteSchema = Scheme({ TypeError: Scheme is not a function Below is my model utente.js: cons ...

Encountering a problem where updating the selected option in a dropdown does not properly refresh the HTML

I am currently working with a dropdown menu containing countries. Initially, the selected item is set to Ukraine. <select id="country" name="country"> <option value="US">USA</option> <option value="UG">Uganda</option> ...

What is the method for viewing the content within div tags on an apex page?

Locationbox is a system outside of Salesforce, similar to Google Maps. An example can be viewed here; I am aiming to integrate it into the Salesforce platform. The first script tag fetches JavaScript code from the Locationbox service. Once the startup() f ...