Which option offers better performance in Three.js: utilizing a sprite or a BufferedGeometry?

I am currently in the process of revamping an outdated visualization created a few years back using an earlier version of Three.js. The visualization consists of approximately 20,000 2D circles (nodes from a graph) displayed on a screen with predetermined positions and colors.

There is no animation involved except when there is user interaction (such as zooming or clicking). The previous developer utilized sprites to represent different states of the circles (e.g. glowing effect for selected nodes, transparency for hidden nodes).

I have managed to replicate much of the visualization by utilizing CircleBufferGeometry instead of sprites.

While I understand that this question may be too specific to my project, I am curious to know if rendering ~20,000 sprites or ~20,000 instances of CircleBufferGeometry is more efficient in terms of performance with Three.js / webgl.

Appreciate any insights you may have!

javascript3dthree.js

Answer №1

The CircleBufferGeometry will contain a greater number of vertices for each entity compared to a sprite because sprites are typically rendered using gl.POINTS (where one point equals one vertex). Therefore, the vertex shader would handle more vertices when dealing with a circle than it would with a sprite.

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

Encountered a React error stating: `TypeError: this.state.projects.map is not a

export default class Timeline extends Component{ state = { projects : [], }; async componentDidMount(){ const response = await api.get("/projects"); this.setState({projects: response.data}); } render(){ return ( <div className ...

javascriptreactjs

Is it possible to make changes to a nested field in Mongoose based on the value of another nested field?

I'm struggling to access a specific field on my Mongoose schema in order to update it when creating an endpoint. The schema I'm dealing with follows the structure outlined below: { "pollId":15, "userId":13, "n ...

javascriptnode.jsexpressmongoosebody-parser

Utilizing JavaScript to dynamically alter an image based on selected dropdown option

I am currently facing an issue with my code where the selected image is not changing when I choose an option from the dropdown list. There are a total of 5 images, but for some reason, they are not displaying correctly. Here is the snippet of my code; < ...

javascripthtml

Updating elements across multiple arrays within a single document in MongoDB efficiently

I've encountered an issue while trying to update elements of multiple arrays using $push with comma separated values. When I attempt to include both arrays in the update like this, it results in an error. How can I achieve this? var conditions = { so ...

javascriptarraysnode.jsmongodbmongoose

Guide on sending a JavaScript variable to PHP using AJAX

I am currently utilizing the following JavaScript code to obtain data from a td element when a button is clicked within an onclick event. function rfk(element) { var element = element.parentElement.parentElement; var id = parseInt(element.childre ...

javascriptphpajax

What is the specific jQuery event triggered when utilizing the append function on a textarea element?

I am currently setting up a system to detect any modifications in a textarea: <textarea id="log-box__data"></textarea> Modifications are made to the textarea exclusively using jQuery's append method: $(document).on('click', &a ...

javascriptjqueryeventsappendtextarea

Sometimes jQuery may require multiple executions with just one click

Content of index.php <script type="text/javascript" src="//<?php echo $_SERVER["SERVER_NAME"];?>/javascript/jquery-1.10.2.min.js" ></script> <script type="text/javascript"> $(document).ready(function() { $( document ).on( 'c ...

javascriptjquery

The local time displayed by Moment JS is not accurate and matches the time stored in the database

Is there a solution to displaying the createdAt field date based on the local timezone? I've attempted to implement it, but it only seems to work for localhost. When I upload it to the server, it displays the createdAt field data in UTC format. Below ...

javascriptnode.jsdatabasedatetimemomentjs

Strategies for integrating a username-only login using Firebase without requiring a password or email address

For my class assignment, I'm developing a webapp and want to implement a login system with only a username. However, when I try sending just the username to the database, it gets stored as a child under the connection ID in Firebase. Below is the Java ...

javascriptjqueryfirebasefirebase-realtime-database

Is there a way to turn off the highlights feature on MapHilight?

I am currently facing a challenge that has me stumped, and I am hoping you can provide some guidance. I'm working on a page located at: Here's the issue: I am focusing solely on the states of Washington and Idaho at the moment, and I want users ...

javascriptjquery

Add a jQuery script to the admin panel of a custom WordPress plugin for sending emails through ajax

I've been working on integrating a form into an admin page on WordPress. The goal is to allow users to input their email address and trigger an email to be sent to that address. To achieve this, I'm utilizing a jQuery Ajax function to transmit th ...

javascriptphpjqueryajaxwordpress

Using AngularJS to dynamically assign classes with values derived from an ng-repeat loop

I'm attempting to assign a class to a table row using ng-class based on the value of ng-repeat. I have searched online and found examples that involve calling a function. Is it possible to simply set ng-class with a value instead of using a function? ...

javascriptangularjs

Is it feasible to utilize math.max with an array of objects?

When it comes to finding the largest number in an array, solutions like this are commonly used: var arr = [1, 2, 3]; var max = Math.max(...arr); But how can we achieve a similar result for an array of objects, each containing a 'number' field? ...

javascriptnode.jstypescript

Is your toggle() function failing to work on dynamically loaded ajax content?

$('.slideArrow').toggle(function (event) { //some code }, function (event) { //some code }); This code functions correctly for content loaded during the page load process. However, it fails to work for content loaded via ajax requests. The ...

javascriptjqueryajaxtoggle

Can Typescript Be Integrated into an AngularJS Application?

I have been thinking about the optimal timing and scenario to implement Typescript in an AngularJS project. While I have come across examples of TS being used in a Node, Express, Mongo backend, I am particularly intrigued by how well TS integrates with A ...

javascriptangularjstypescript

Transforming a JavaScript array into a JSON format

Is there a way to convert a JavaScript array into JSON format? [{ "userName": "Rodrigo", "date": "April 25, 2017", "score": 5 }] [{ "userName": "Jon", "date": "April 24, 2016", "score": 4 }] Error: There is a parser error on line ...

javascriptjson

Gulp does not generate any files

Hey there, I'm brand new to using node.js and coding in general. I recently attempted to convert SCSS to CSS using gulp. My gulpfile.js seems to be correct, but when I try running "gulp styles" in the node.js command prompt, I receive the following ou ...

javascriptcssnode.jssassgulp

Passing parameters to Next.js pages

Here is my function: export async function getServerSideProps({ req }: any) { const user = ( await axios.get("http://localhost:4000/api/auth/status", { withCredentials: true, headers: { Cookie: `connect.sid=${req.cookies["c ...

javascriptnode.jsnext.js

Struggling to dynamically generate class names with clsx in combination with TailwindCss

Greetings! I am a JavaScript developer who is not very skilled yet, working with React and Next. Specifically, I am using this template When it comes to declaring component class names, I have been using a utility function that combines tailwind-merge and ...

javascriptreactjsnext.jstailwind-cssclsx

Encountering an Enumeration Exception when trying to delete an element from a collection list using a foreach loop

I encountered an issue when attempting to remove an element from a list collection using foreach. I have searched online but have not found a clear explanation for the problem. If anyone has knowledge about this, please share the information. ...

javascriptjavac#selenium-webdriver