Displaying particles in system

I'm utilizing the Three.js ParticleSystem to showcase a large number of points, which greatly improves performance.

At certain zoom levels, the particles may appear very close together, leading to the appearance of strange De Moivre fringes when adjusting the camera position.

Here is the code snippet used for this:

var material = new THREE.ParticleSystemMaterial({
    size: 250,
    color: colors[i]
});
parentMesh.add(new THREE.ParticleSystem(geometries[i], material));

A total of 4 particle system objects are created, with one having a red material and the others having green, blue, and yellow materials.

Is there a way to prevent the occurrence of the De Moivre artifacts in this scenario?

javascriptthree.js

Answer №1

It is challenging to determine the cause of this effect without a screenshot or more code. The size of your material appears to be quite large, so my suggestion would be to reduce it. Additionally, consider disabling depthWrite for your material using the code snippet: 

colors: colors[i], depthWrite : false });

Another recommendation is to consolidate all your particles into one particle system. This can be achieved by inserting all vertices into a single geometry and assigning colors to each vertex by creating a colors array within the geometry. Then, in your material, set the colors to vertexColors. By doing this, you can utilize a single large buffer instead of four smaller ones.

var myColors = [new THREE.Color(0xff0000),new THREE.Color(0x00ff00),new THREE.Color(0x0000ff),new THREE.Color(0xffff00)], //your predefined colors
    geometryColors = [];

for( var i = 0,j = geometry.vertices.length; i < j; i++ ) {

  geometryColors[i] = myColors[(i%myColors.length)-1].clone(); //put the color into the geometryColors array (not sure if you really have to clone it)

}

geometry.colors = geometryColors;

var material = new THREE.ParticleSystemMaterial({
  depthWrite : false,
  size : 5,
  vertexColors : THREE.VertexColors
});

parentMesh.add(new THREE.ParticleSystem(geometry, material));

Answer №2

It seems like you may be experiencing a common issue known as Z-fighting, where overlapping geometry causes flickering. To prevent this, make sure there is sufficient separation between the planes of geometry along the depth axis.

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

What is the process of converting a value from an HTML form into a PHP variable?

I am looking to update the order preparation time. I have created an HTML form, but I am facing issues passing it into a PHP variable after this code block. I have tried using Cookies and POST method, but neither has helped me so far. <form> ...

javascriptphpcookies

How can I incorporate multiple graphs into my AmCharts display?

I am new to using amcharts and have successfully implemented a code snippet to generate two graphs in a chart. The charts are loaded from an external data source specified in the code. var chart = AmCharts.makeChart("chartdiv", { "type": "serial", "d ...

javascriptamcharts

Is there a specific plugin that enables dynamic calculations within a django formset?

Looking for a solution: Is there a jQuery plugin available that can perform calculations for a Django formset? The form is dynamic, changing the ID of each field per row whenever the add button is clicked. ...

javascriptjquerydjango

Angular component.html does not compile due to a check that includes inline array creation

There is an enum called Status: export enum Status { SOME_VAL = "SOME_VAL", SOME_VAL_2 = "SOME_VAL_2", SOME_VAL_3 = "SOME_VAL_3"; } Also, I have an interface named SomeInterface: export SomeInterface { status? ...

javascriptangulartypescript

Is Next.js Dynamic Routing Failing You?

Recently, I attempted to implement Dynamic routing for a recipe app but encountered an issue where the page was not found. This problem has left me puzzled as I am fairly inexperienced with TypeScript, although not with React. // pages/recipes/[recipeId].t ...

javascriptreactjsnext.js

Unable to apply programatically loaded attributes to the rangeslider.js plugin

I'm having trouble with my graph editor that uses the rangeslider.js plugin. The bars are not updating properly most of the time, and sometimes they don't work at all. I have a demo available here and a simplified version on Fiddle. Strangely, so ...

javascriptjqueryrangeslider

The front-end is responsible for removing the last item from an array

Having an issue with my React code. Here is my parent component: class RoomPrice extends React.Component { constructor(props){ super(props) this.state = { room: this.props.room, prices: [] }; this.handleDeletePrice = this.h ...

javascriptreactjs

What is the best way to retrieve a string from a URL?

Is there a way to extract only a specific string from a URL provided by an API? For instance: I'm interested in extracting only: photo_xxx-xxx-xxx.png Any suggestions on how to split the URL starting at photo and ending at png? ...

javascriptnode.jsregextypescriptparsing

Can TypeScript modules be designed to function in this way?

Seeking to create a versatile function / module / class that can be called in various ways: const myvar = MyModule('a parameter').methodA().methodB().methodC(); //and also this option should work const myvar = MyModule('a parameter') ...

javascriptnode.jstypescriptcallback

How to categorize an array of objects based on a specific property while preserving the original object attributes

I have an array of objects with a specific property that I want to group by. My objective is to create a new array where all the objects have the same properties, but with an additional property that combines all the "value" properties into an array. Here ...

javascriptarraysjsonobject

Unable to assign the value 'hello' to an undefined property in TypeScript

I'm attempting to define a class in TypeScript, but I keep encountering the error shown below. Here is the execution log where the error occurs: [LOG]: "adding" [LOG]: undefined [ERR]: Cannot set property 'hello' of undefined class Cust ...

javascripttypescript

Automate the process of adding or removing a class created by material ui through programming

Is there a way to dynamically manage the material-UI classes I declared in makeStyles()? Below is the code snippet: import React from 'react'; import { DropboxIcon, GoogleDriveIcon, BoxIcon } from '../components/icons'; import { makeSt ...

javascriptreactjsmaterial-ui

The dropdown feature in the bootstrap4 navbar causes the navigation items to shift and adjust their

I am currently working on a navigation bar using Bootstrap4 and I've added a nav-item button to dropdown a menu. However, the issue I'm facing is that when the menu drops down, it pushes other nav-items around, causing them to change position. Th ...

javascriptbootstrap-4navbardropdown

Node.js server experiencing delays due to V8 processing constraints

REVISED I am currently running a nodeJS http server designed to handle uploads from multiple clients and process them separately. However, I have encountered an issue where the first request seems to block any subsequent requests until the first one is co ...

javascriptnode.jshttpasynchronousv8

Ways to resolve a 500 internal error

I have created an online test system for students, but I am facing an issue with passing answers in JSON format. Whenever I attempt to do so, I encounter a 500 internal error and I am unable to identify the root cause. Even after removing lengthy JSON dat ...

javascriptjqueryajax.net-core

Issues arise in Angular 4 when the "Subscribe" function is repeatedly invoked within a for/switch loop

My array of strings always changes, for example: ["consumables", "spells", "spells", "consumables", "spells", "consumables", "spells", "characters", "characters", "consumables"] I iterate through this array and based on the index, I execute different .su ...

javascriptarraysangulartypescriptgoogle-cloud-firestore

Is there a way to trigger a custom event from a Web Component and then intercept it within a React Functional Component for further processing?

I'm facing an issue with dispatching a custom event called "select-date" from a custom web component date picker to a React functional component. Despite testing, the event doesn't seem to be reaching the intended component as expected. Below is ...

javascriptreactjstypescriptreact-hooksreact-functional-component

Is there a way to streamline this query code that seems overly complex?

Could someone please assist me in simplifying this code? I am trying to shorten or simplify the query code by using a stored procedure, but I still need to include the details inside the "()" parentheses. I am new to Node.js and would appreciate any help. ...

javascriptmysqlnode.jsexpress

Why do variables maintain the same value across modules when using the require function in Node.js?

We have a scenario where we have multiple files in the same directory: data.js var anArray = [1,2]; module.exports = anArray; mod1.js var data = require('./data'); module.exports = data; mod2.js var data = require('./data'); modul ...

javascriptnode.jswebmodule

Tips for Using AJAX and JavaScript to Save an XML File

My current task involves attempting to insert an element into an XML file. Upon inspecting the program with a debugger, I noticed that the element is successfully added to the XML file. However, when I stop the program from running, the changes are not sav ...

javascriptajaxxml