Getting the most out of geometry vertices with Threejs: mastering partial transforms

In my current project, I am working with a mesh that consists of approximately 5k vertices. These vertices have been merged from multiple geometries into a flat array. Initially, I was able to modify individual vertices successfully by setting the flag `verticesNeedUpdate=true`, which reflected the changes on the mesh. However, now I need to apply translations and rotations to specific groups of vertices, and I am seeking a more efficient way to do this without having to loop through each vertex position.

One idea I considered was creating a new geometry and assigning a subset of vertices (by reference) to it in order to perform the necessary transformations. But upon further reflection, this approach seemed unconventional, prompting me to explore alternative solutions.

I came across an example at this link, but I remain unsure about how to effectively rotate/scale groups of vertices within the context of my project.

While I understand that consolidating vertices into a single set can reduce GPU calls by minimizing uploads, I am concerned about the impact of continuously modifying these geometry vertices on performance. Would frequent vertex updates on each frame negate the optimizations achieved through this restructuring?

Answer №1

It appears that the example creates multiple heart shapes in geometry and applies a transformation before merging the transformed vertices into one bufferGeometry. This means all the hearts are drawn together in a single call, but it also restricts individual manipulation of each heart.

The key here is performing transformations upfront and uploading the transformed coordinates to the gpu to avoid updating vertices by the cpu on every frame.

geometry.lookAt( vector );
geometry.translate( vector.x, vector.y, vector.z );

This code snippet is responsible for transforming the vertices before adding them to the bufferGeometry.


If you assign an 'index' to each vertex, you could utilize a UBO to store matrices and apply different transformations to vertices (in the vertex shader) within the same drawcall.

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

jquery blur function not triggering properly

I am not very familiar with jquery and javascript. Below is the code I have written for an input text field where I want to use blur function for validation: <div class="form-row form-input-name-row"> <label> <span>Full name& ...

Implementing a delay of X seconds after a click event in JQuery: A step-by-step guide

Is there a way to delay the triggering of a click event after one has been recently triggered? I am facing an issue on my website where users can click multiple times on the "dropdown icon" and cause it to toggle the slide effect multiple times. What I wan ...

Changing the string "2012-04-10T15:57:51.013" into a Date object using JavaScript

Is there a way to transform the format "2012-04-10T15:57:51.013" into a Date javascript object using either Jquery or plain Javascript? ...

Limiting a text based on spaces or at the completion of a word within a string or sentence

Currently, I am utilizing a LimitTo filter to generate excerpts of article descriptions for display on the homepage of a website as snippets in the feature section. The LimitTo filter is set at a maximum of "100 characters," but it sometimes cuts off word ...

The Drop Down Menu feature in Bootstrap is malfunctioning within the context of a NextJS project

I've built a NEXT.JS application using VS Code. The issue I'm facing is with the drop down menu in the navigation bar - it's not sliding down to display the menu when clicked. Here is the code I'm working with: const loggedRouter = () ...

What are the implications of storing data on the browser in the form of a JavaScript array?

Below is the code I have written: var back_arr = [], forward_arr = [], i = 1; $('button').on('click', function(){ var new_value = $('input').val(), old_value = $('.content').html(); i = i + 1; ...

Leverage closures within Underscore.js templates for enhanced functionality

Is there any benefit to utilizing a closure in an underscore template for purposes such as keeping track of counters? Here's a simple example: <% (function( models ){ var length = models.length-1, section = ""; _.each( models, functi ...

How can PHP effectively interpret JSON strings when sent to it?

When working with JavaScript, I am using JSON.stringify which generates the following string: {"grid":[{"section":[{"id":"wid-id-1-1"},{"id":"wid-id-1-4"}]},{"section":[{"id":"wid-id-1-5"}]},{"section":[{"id":"wid-id-1-2"},{"id":"wid-id-1-3"}]}]} I am ma ...

Which specific file name patterns does npm publish consistently exclude?

When using the npm publish command, the documentation mentions that certain files will not be included in the package unless explicitly added to the "files" list in package.json or un-ignored with a specific rule. What exactly are these "certain patterns"? ...

Listening for an event or using a CSS pseudo-class to detect when the scrollbar becomes

Are there any JavaScript event listeners or CSS pseudo classes that can detect when a scrollbar appears and disappears? For example, on Mac OS and Windows Internet Explorer 10 or newer, the scrollbars are hidden by default but appear when scrolling begins. ...

Find the total value of specific keys within nested objects

I possess a shopping cart object with various products: const shopCart = { "4509563079435": { name: "product 1", price: 29.99, quantity: 2, subtotal: 59.98, }, "5678327300382": { nam ...

No matter how hard I try, the async function within the React Component keeps returning 'Promise {<pending>}' consistently

Currently, I'm facing an issue where running an asynchronous function inside a functional component in React (NextJS) results in the function returning a pending promise: Promise {<pending>}. Oddly enough, fetching data from a dummy API works pe ...

Mouse click failing to trigger CSS property update

I am attempting to create an accordion feature. I want the accordion to expand when hovering over the "accordion head," and also show/hide the accordion body when clicking on the "accordion head." I have successfully implemented the show/hide functionalit ...

What are the methods to determine if vue-router is being utilized within the present Vue instance?

I am working on creating a library that includes a vue.js component with navigation elements. The goal is for this component to be flexible, able to function both with and without vue router. When used with the router, it will utilize <router-link> ...

The context of the Nuxt.js3 plugin loses its definition

Currently, I am working on a project that involves Nuxt.js3 and supabase integration. In my plugins/supabase.server.js file (I am still unsure whether using server or client is the best approach), I want to call "supabase = createClient(~~)" from index.vu ...

Using ng-style to apply a background image with a dynamic id

Hey there, I'm facing an issue here. The link provided below seems to not be working properly. Even though the id is set correctly within the scope, it seems like there might be a parsing error occurring. Any thoughts on what might be causing this pro ...

Show a success message, clear the post data, and redirect back to the current page

I have a single web page with a contact form. When the form is submitted, I want it to redirect to the same page and display a success message that fades out after a few seconds. Additionally, I want the post data of the form to be cleared. The form also i ...

Having trouble making "jQuery.inArray" function properly in my code

Recently, I made a small interaction where list items are displayed and rotated when clicked - check it out here: http://jsfiddle.net/S79qp/430/ Lately, due to compatibility issues with IE8, I had to switch from using .indexOf() to jQuery.inArray. However ...

How can you eliminate a specific element from an HTML document?

Utilizing localStorage can be tricky when it comes to keeping the JSON file hidden from being displayed on the HTML page. One approach I used involves sending the JSON file to the client once and then performing all logic using that file. To prevent the JS ...

Using the useNavigation Hooks in React Js, learn the process of sending JSON data efficiently

This is the custom Json file I developed for my application. export const Data = [ { id: 1, title: "Title 1", description: "Description 1 Data", }, { id: 2, title: "Title 2", ...