How can we implement programming logic for a Threejs Particle System that includes connecting lines between particles

Question

How can we implement programming logic for a Threejs Particle System that includes connecting lines between particles

I recently inquired about connecting nearby particles in ThreeJS and managed to create lines between them. However, due to the logic of the particle system, the lines are drawn twice. This behavior is similar to how the original 2D particle system functions: Link

This redundancy occurs because a line is drawn for each pair of particles connected. This could impact performance negatively. How can I ensure that each line is drawn only once for every pair of connecting points?

For reference, here is the desired effect I aim to achieve but struggle with the underlying code logic: Link

I have shared my progress via this jsfiddle.


// JavaScript code present
// Omitted for brevity

Although I am close to achieving the desired result, I'm concerned about optimization issues. There seems to be flickering lines and instances where a line remains stationary. My current approach involves updating line geometry vertices to match relevant particle points.

Regarding line management, I assign a unique ID by using the indexes of the two points, such as '8-2' for instance.

javascript three.js particle-system

Answer 1

Answer №1

The challenge you're facing is that as you loop through your list of points, you are encountering duplicate matches.

For instance:

Imagine a set of points: [X, Y, Z]. Each point is tested against all others for proximity. Let's say that only points X and Z meet the criteria of being nearby.

When comparing each point, if X to Z warrants a line on the first pass, but then when evaluating Z, you also discover that X qualifies, resulting in an unnecessary duplicate line.

Solving the issue:

The fix is straightforward: Do not revisit nodes that have already been assessed. This is because the distance between X and Z is identical to Z and X.

To address this, adjust the indexing method within your checking loop:

// (Please note: This is illustrative code and may require modification.)
for(var check = 0, checkLength = nodes.length; check < checkLength; ++check){
    for(var against = check + 1, against < checkLength; ++against){
        if(nodes[check].distanceTo(nodes[against]) < delta){
            buildThatLine(nodes[check], nodes[against]);
        }
    }
}

In the nested loop, the indexing strategy ensures:

Omitting the current node
Skipping nodes preceding the current one

This is achieved by setting the inner index to the outer index + 1.

Note:

This approach assumes that lines are removed entirely in each frame. While effective, it might not be the most efficient method. Enhancing efficiency is a task you can explore further.

Answer 2

The challenge you're facing is that as you loop through your list of points, you are encountering duplicate matches.

For instance:

Imagine a set of points: [X, Y, Z]. Each point is tested against all others for proximity. Let's say that only points X and Z meet the criteria of being nearby.

When comparing each point, if X to Z warrants a line on the first pass, but then when evaluating Z, you also discover that X qualifies, resulting in an unnecessary duplicate line.

Solving the issue:

The fix is straightforward: Do not revisit nodes that have already been assessed. This is because the distance between X and Z is identical to Z and X.

To address this, adjust the indexing method within your checking loop:

// (Please note: This is illustrative code and may require modification.)
for(var check = 0, checkLength = nodes.length; check < checkLength; ++check){
    for(var against = check + 1, against < checkLength; ++against){
        if(nodes[check].distanceTo(nodes[against]) < delta){
            buildThatLine(nodes[check], nodes[against]);
        }
    }
}

In the nested loop, the indexing strategy ensures:

Omitting the current node
Skipping nodes preceding the current one

This is achieved by setting the inner index to the outer index + 1.

Note:

This approach assumes that lines are removed entirely in each frame. While effective, it might not be the most efficient method. Enhancing efficiency is a task you can explore further.

How can we implement programming logic for a Threejs Particle System that includes connecting lines between particles

Answer №1

Similar questions

obtain hyperlinks on a website

``There seems to be an issue with JQuery.Ajax not properly displaying on Samsung Smart

Having trouble getting jQuery scrollTop to function with an "else if" statement?

Retrieve data from HTML Form arrays using JavaScript

The error message "Property navigate is undefined" appears when trying to open a full-screen modal in React Native navigation

Performing an Ajax MySQL query utilizing the text from a link as a reference, across a page

Executing PHP script within a Node.js socket server program

jQuery floating sidebar that dynamically adjusts position based on content overflow

Is it possible to execute a function within an HTML page simply by clicking on it?

Tips for deactivating dates in the jquery datepicker that correspond to entries in a MySQL database

Unresolved promise rejection on Repl.it

Implementing CSS counter-increment with jQuery

Converting a PHP object array to a JavaScript associative array

Utilizing memcache in conjunction with PHP and Node.js

What is the best way to transfer data from an AJAX GET request to a Node.js GET route?

Is there a specific event in Angular.js that triggers when the $scope digest cycle is completed or when the view is refreshed?

The browser's back-forward buttons are acting strangely and not functioning as expected. Could it be due to

Ace Code Editor: Turn off highlighted line beneath cursor

Tips on creating a horizontal scrolling effect using the mouse

animation glitches in safari and chrome when using jquery