Poor performance of ParticleSystems in Three.js on weaker graphics cards

Currently, I am experimenting with particle systems to enhance the rendering speed of a star system, but I have encountered an issue with poor display quality on graphics cards with low capabilities, such as Intel HD which is quite common. The particles that are supposed to have a specific texture end up being replaced by unsightly squares with strange colors and transparency. For example, in this particle system the rendering looks like:

https://i.sstatic.net/u5k6S.png

This problem seems to occur with any instance of THREE.ParticleSystem or THREE.Points (the newer version). Interestingly, all other THREE objects like Spheres, Cubes, and Planes render properly on my GPU, only particles seem to have this issue.

Is there any way to mitigate this problem? If not, are there alternative methods besides particle systems to efficiently display a large number of objects without causing a slowdown?

javascript3dthree.jswebglparticle-system

Answer №1

In my experience, drawing 'Point' primitives can sometimes cause issues with certain GPUs, drivers, and/or API versions. While they are technically a primitive type, they may not work as expected on some lower-end GPUs. This could be due to a lack of support for point sizes, texturing, or other features.

If you encounter problems with drawing Points, you may want to consider using a regular textured quad instead. This should resolve any issues, although it may have a slight impact on performance. To account for this, you could keep both approaches and choose one based on the specific GPU being used.

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

Retrieving precise information from a Json file with PHP

Hey there, I have a JSON file and I'm looking to extract certain data from it. Here's how the file appears: { "took" : 1, "timed_out" : false, "_shards" : { "total" : 1, "successful" : 1, "skipped" : 0, "failed" : 0 }, ...

javascriptphpjqueryjsonelasticsearch

Creating a unique chrome extension that swaps out HTML and JavaScript components

Is there a possibility to create a Chrome extension that eliminates the JavaScript and CSS from a website while it loads, replacing them with new scripts from a separate source? For example, changing 'Old script' to 'new script', or &a ...

javascriptcssgoogle-chrome-extension

What methods can be used to monitor changes made to thumbnails on the YouTube platform?

I have embarked on a project to create a Chrome extension that alters the information displayed on the thumbnails of YouTube's recommended videos. In this case, I am looking to replace the video length with the name of the channel. Imagine you are on ...

javascripttypescriptgoogle-chromegoogle-chrome-extensionyoutube

What is the process for importing Buffer into a Quasar app that is using Vite as the build tool

I'm having issues with integrating the eth-crypto module into my Quasar app that utilizes Vite. The errors I'm encountering are related to the absence of the Buffer object, which is expected since it's typically found in the front end. Is ...

javascriptvue.jsvuejs3vitequasar

Setting the second tab as the primary active tab

I am currently working on a script that is well-known, and everything is functioning perfectly. However, I want to change it so that when the page is first opened, it displays the second tab instead of the first one (the first tab being a mail compose tab ...

javascriptjqueryhtmlcss

Excessive messages are being sent to the child process from the nodejs/electron stream

When trying to send messages from an Electron frontend to a C++ child process via stdin upon button press, I encountered an issue where multiple identical sends were triggered with each click. What is the recommended approach to prevent redundant messages ...

javascriptnode.jselectron

In JavaScript, where are the values saved?

Can you clarify how JavaScript handles storage for primitive types and objects? Are primitive types always stored on the stack and objects on the heap, even within the scope of a function's execution? Also, are globally scoped variables and functions ...

javascriptstackheap-memory

Incrementing the index in Javascript when an event occurs

I am currently working on a project that involves incrementing an index of an array based on certain events, such as a left mouse click over a designated area. The code snippet provided below initializes all values to zero and briefly changes the relevan ...

javascriptarraysindexingincrementquartz-composer

Developing a user authentication system with TowerJS

As a front-end designer/developer with limited MVC experience, I am looking to create a login form using TowerJS. Following the documentation, my app includes a model named "User": class App.User extends Tower.Model @field "email", type: "String" @fie ...

javascriptnode.jsjavascript-frameworktowerjs

Is it possible to incorporate custom scripts into the <head> section of the index.html file in Docusaurus?

I decided to organize my code by creating a scripts folder within the static directory. Inside this folder, I added a custom JavaScript file named "GetLocation.js". The path to this file is project/website/static/scripts/GetLocation.js Upon looking into s ...

javascriptreactjsdocusaurus

Having trouble running tests on the Express.js server

I'm struggling to run basic tests on my expressjs server and close it immediately. I have exported the server as a promise, but can't seem to figure out how to achieve this. Below is the code for my server file : index.js const config = require( ...

javascriptnode.jsexpressmocha.js

Extract token from the URL and then use Axios in Vue.js to send it to the POST API

Hey there, I'm in need of extracting a token from the URL http://192.168.178.25:8080/register?token=eyJhbGciOiJIUzI... and then making a POST request to the API to confirm the account. I've attempted this but encountered a SyntaxError on the ...

javascriptvue.jsaxios

Implementing AngularJS directives with jQuery

Utilizing Jquery Selectric to enhance the select box in my AngularJS app led me to create a directive for rendering the element. Below you'll find the directive code along with how it's implemented. The Directive: angular.module('shoeReva ...

javascriptjqueryangularjsjquery-selectric

Is there a way to bypass the final function call when using Express Middleware?

In my Node.js project using express, I have a function inside a get route... The function currently includes a simple caching functionality that I coded myself. It queries data from an MSSQL Database and returns it using res.json(data). However, I want to ...

javascriptnode.jsexpressasynchronousmiddleware

Issue with datepicker initialization causing format not to work in Bootstrap

I am currently incorporating the angular-bootstrap datepicker module into my app and have run into a minor issue. I am using an input text field and a button to display the date in the following manner: <div class="row" id="datePicker"> <p cl ...

javascriptangularjsdatepickerangular-uiangular-ui-bootstrap

The Oracle Database listener is unaware of the service specified in the connect descriptor for node-oracledb

Having recently transitioned from on-premise databases using Oracle 11g to the Cloud where I needed to connect to Oracle 12c, I encountered an issue with my nodejs application. While it worked fine on-premises, in the cloud it threw the following error: e ...

javascriptnode.jsoraclenode-oracledb

JkMegaMenu drop-down menus in Chrome are shifting to the left when the window is resized

Currently, I am utilizing the JKmegamenu plugin to incorporate a megamenu into a website that is currently under development. The megamenu functions properly and has an attractive appearance. However, there seems to be an issue where the drop-down divs shi ...

javascriptjquerymenudrop-down-menu

Having trouble with the JsonLoader copied from Threejs.org?

I've been trying to make use of a JSONLoader from threejs.org, but I'm facing some issues. Three.js seems to be functioning properly because I can easily create a cube. However, when I attempt to load a js file through the JSONLoader, nothing hap ...

javascriptjsonthree.jsloader3dsmax

insert the "tr" element directly following the button

I am looking for a way to allow the user to add another input file right next to the button, so they can select and send multiple files at once. https://i.sstatic.net/TI4eJ.png I have tried using various solutions I found during my search but none of the ...

javascriptphpjquery

Google Maps API is successfully loading from an HTML file, however, it is not functioning properly when accessed

I am facing an issue while trying to connect to the Google Maps API through an AngularJS application on my localhost. Despite finding the javascript file in the HTML and displaying 'test1' in the console, the `initMap` function is not being calle ...

javascriptangularjsgoogle-maps-api-3localhost