The performance of three.js PointsMaterial is sluggish when utilizing large sprites or shapes, causing a decrease in overall

Currently, I am handling a point cloud with approximately 60,000 vertices.

Interestingly, when I view the cloud at a smaller scale, performance remains acceptable. However, as soon as I zoom in and larger sprites/plans/points become visible on the screen, performance takes a hit.

This issue arises whether I use a PointsMaterial or a RawShaderMaterial, a Points object, or an instancedBufferGeometry mesh.

It appears that performance deteriorates significantly when rendering a single large shape that occupies most of the canvas area.

The decrease in performance is even more pronounced if the points have a transparent texture applied to them.

In fact, this situation reminds me of encountering a similar problem when rendering sizeable overlapping transparent images in Processing.

javascriptperformancethree.jswebgl

Answer №1

It appears that you are experiencing a fill rate bottleneck, as Sedenion mentioned. This occurs when you try to draw an excessive amount of pixels.

A GPU has limitations on how fast it can render graphics. For instance, a typical non-gaming GPU can handle drawing 6-10 screens full of pixels at 60 frames per second. If you exceed this pixel count, the performance will decrease even for simple pixels (regardless of shader complexity). In a standard 3D scene setup, depth testing is usually enabled. By drawing objects closest to the camera first, the depth buffer prevents rendering objects located behind others, thus optimizing performance. However, for sprites, depth testing is often not utilized, resulting in every pixel from each sprite being rendered, even if they overlap. When summing up the total number of pixels being drawn, it becomes evident that there are too many pixels being processed.

Consider the following example, which involves rendering a 2048x2048 solid color POINT without textures using a basic shader. Adjusting the slider to increase the number of points reveals that my 2014 Macbook Pro can only manage around 12 points of that size before dropping below 60fps. Different GPUs may have varying capacities.

Handling this issue is challenging and requires finding methods to reduce the number of pixels being drawn. Enabling depth testing and disabling blending may be one solution. Additionally, sorting points from front to back after enabling depth testing could also improve performance.

Answer №2

This topic isn't specifically tied to Three.js, but rather to WebGL and the GPU in general. Similar issues can also be observed with OpenGL or DirectX. In simple terms, your GPU needs time to compute and render certain elements.

Let's delve into some specifics now. While I can't guarantee that your performance slowdown is directly caused by the factors I'm about to explain, here are some potential clues:

  1. The more pixels the GPU has to render, the longer it will take. For example, a point-sprite covering the entire canvas area will take longer to render compared to one that is only 3 or 4 pixels wide.

  2. If you're trying to render "clouds", it's possible that you've disabled depth testing to allow sprites to overlap transparently. This means the GPU has to redraw the same pixels multiple times on the canvas for each overlapping sprite.

  3. If each sprite has a texture, factors like texture processing, filtering, mipmapping, etc. add an additional layer of complexity to the rendering process.

You'll need to conduct tests to identify where the main bottleneck lies. In some cases, there may be limitations imposed by the hardware, requiring you to optimize by reducing sprite count or making other adjustments.

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 could be causing my JSON product list to not load properly?

My list is not loading and I can't figure out why. I've included my json, jquery, and HTML below. The console isn't showing any errors, but the list is still blank. Any help would be greatly appreciated as I am new to working with json. Than ...

javascriptjqueryhtmljson

Loading external libraries in Angular2: A step-by-step guide

I'm currently working on incorporating a Datepicker in Angular 2, but I'm facing an issue where the library is not loading. This is causing a template parsing error stating 'material-datepicker' is not a recognized element: My System.c ...

javascriptangularjsnode.jsangular

What is the best way to incorporate a countdown timer on an ASP.NET webpage?

Looking to display a countdown timer in the top right corner of my ASP page that starts from 00:00:30 and counts down to 00:00:00 before resetting back to 00:00:30. Does anyone have any suggestions on how to achieve this? ...

javascriptasp.net

Is there a way to have dynamic content from angularJS show up in an iframe?

When working with tabular content generated using ng-repeat in AngularJS, it is important to find a way to display this content within an iframe. The goal is to allow users to drag and resize the content as needed. However, using the iframe src attribute ...

javascriptangularjsiframe

The Page is Not Able to Scroll

Occasionally, my app stops allowing scrolling of the entire page length. Everything will be working fine for a while, but then out of nowhere, the page suddenly becomes un-scrollable and you can only interact with the section currently visible on the scree ...

javascriptandroidiphonemobilecordova

Printing the result of an SQL query in Node.js without using braces

As a beginner in node.js with only a basic understanding of javascript, I apologize if I make any mistakes. I attempted to display the results retrieved by an SQL query in node.js using: <p>Users are " + util.inspect(results) + ".</p>" an ...

javascriptnode.jsnpm

Ways to retrieve the React Router match object in mapStateToProps

Is there a way to access the react-router match object for its params from mapStateToProps or any other selector? I'd like to use these params to generate a value that will be passed down as props to a presentational component within the selector. The ...

javascriptreactjsreduxreact-reduxreact-router

Injecting an attribute with the forbidden character "@" into the Document Object Model (DOM

Scenario I find myself needing to update some existing HTML using JavaScript, but I'm limited in that the server side is out of my control. This means that any changes must be made client-side only without altering the original HTML document. To acc ...

javascriptvue.jsdom

Empty POST request detected in select2 form submission

Looking for some assistance to help steer me in the right direction. My professor is unable to provide guidance. I'm currently struggling with handling POST requests in my form for select2 multiple fields. The issue arises from a Yes/No flag that dete ...

javascriptdjangojquery-select2

A guide on converting array values to objects in AngularJS HTML

Here is my collection of objects: MyCart = { cartID: "cart101", listProducts : [ {pid:101, pname:"apple", price: 200, qty:3}, {pid:102, pname:"banana", price: 100, qty:12} ] } I have incorporated a form in ...

javascripthtmlangulartypescript

When using Angular2, I have found that I am unable to extract the body data from JSONP responses. However, I have discovered that this issue

Initially, I developed the SERVER using spring-boot framework. The code for this looks like: public class App { @RequestMapping("/") @ResponseBody String home(HttpServletRequest request) { String aa=request.getParameter("callback"); System.out.pri ...

javascriptjqueryajaxangularjsonp

Mocha test failing to trigger function execution

I've been developing an Express.js application that includes a feature for creating appointments with a post request. This feature involves retrieving and saving data from a third-party API, followed by sending updated API data in the subsequent reque ...

javascriptexpressmocha.js

Go to the identical page with a message embedded in it

Creating a login page using JSP involves an index.jsp file which contains the form and javascript scriplets. The connectivity to an Oracle database and validation of username and password are handled in check1.jsp. The problem arises after entering the us ...

htmljavascriptajaxjsp

Tips for recognizing hyperlinks within a block of text and converting them to clickable links in Angular 2

My task is to create clickable links within a paragraph of strings. I tried using a custom pipe, but seem to be missing something essential. Here's my attempt: import { Pipe, PipeTransform } from '@angular/core'; import { DecimalPipe ...

javascriptangular

altering the color of various spans consecutively

I am looking to create a text effect where each alphabet changes color in a wave-like pattern, starting from the left. I have assigned each alphabet a span with classes like span0, span1, and so on. To change the color, I used the following code: for (var ...

javascriptjqueryfor-loopsettimeout

What is the reason for being unable to submit the value of an input that is disabled?

When I try to save the value of an input field that is disabled and has the required attribute, I receive an error message stating that "field_name is required". Why am I unable to insert a value when the input field is disabled? <input disabled type=&q ...

javascriptphphtmljquery

working with JSON array information

I have a JSON array retrieved from a database that I need to manipulate. Currently, it consists of 8 separate elements and I would like to condense it down to just 2 elements while nesting the rest. The current structure of my JSON looks like this: { "i ...

javascriptarraysjson

Ways to retrieve parameters in getStaticPaths function?

I'm currently working on a Next.js app with Contentful as the CMS. The file structure relevant to my question is: pages -[category] -[slug].js My goal is to access the category value when a user visits category/slug. Currently, I have the category ...

javascriptnext.js

Is my approach to CSV parsing correct if I am receiving the error "Unable to assign property 'processing' to undefined"?

In our database, we store words along with their categories. I have a new requirement to enable the word administrator to upload multiple words at once using a CSV file. Currently, our system only allows for single-word additions at a time. My solution was ...

javascriptangularcsvtypescriptcallback

grid causing images to display incorrectly in incorrect positions

My project consists of 3 component files and a CSS file, but I am facing an issue where the Tiles are slightly off in their positioning towards the top left corner. Although no errors are being thrown, upon using the view grid feature in Firefox, it is ev ...

javascriptcssreactjscreate-react-app