Optimizing Three JS computeVertexNormals() for Improved Performance

I have a massive buffer geometry consisting of approximately 4 million vertices that requires a small area of shading to be updated. Currently, I randomly update the vertex normals causing lag. I attempted using updateRange.offset on the geometry but it seems this does not affect the vertexNormals() function (How to quickly update a large BufferGeometry?).

Here is my loop 1,000 times:

GRID.geometry.attributes.position.array[ (array_position + 2) ] = _position[2] - WEBGLzTranslate; 
GRID.geometry.attributes.color.array[ (array_position) + 0 ] = color.r;
GRID.geometry.attributes.color.array[ (array_position) + 1 ] = color.g;
GRID.geometry.attributes.color.array[ (array_position) + 2 ] = color.b;

Then set update:

if(minArrayPosition < Infinity){
    GRID.geometry.attributes.position.updateRange = {};
    GRID.geometry.attributes.position.offset = minArrayPosition;
    GRID.geometry.attributes.position.count = maxArrayPosition - minArrayPosition;
    GRID.geometry.attributes.position.needsUpdate = true;
    GRID.geometry.verticesNeedUpdate = true;
}

GRID.geometry.attributes.color.needsUpdate = true;
GRID.material.needsUpdate = true;
if(Math.random() > .99)
{
    GRID.geometry.computeFaceNormals(); 
    GRID.geometry.computeVertexNormals();
    console.log('Updating Shading');
}

My preference would be for the range to work with the vertexNormals, potentially somewhere in the code snippet below (BufferGeometry.js:657):

Implementation details...

Should I consider exploring morphing materials as an alternative solution? Thank you.

Answer №1

BufferGeometry has the capability to update a specific range of an attribute, which includes the normal as well.

The method BufferGeometry.computeVertexNormals() is designed to work with both indexed and non-indexed geometries. When dealing with indexed geometries, shared vertices are supported, meaning there might be faces beyond your index range that need to be factored into the calculation for accurate results.

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

A Sinon spy allows for the use of two distinct callback signatures

const sinon = require('sinon') function testCallbacks (useFunction) { useFunction(function (req, res) { return true }) useFunction(function (err, req, res, next) { return false }) } testCallbacks() I am looking for a method ...

Redux actions do not cooperate with functions, preferring to be implemented inline instead

I am a beginner in Redux and JavaScript and just came across this issue, When I use the line dispatch({type: 'REQUEST_START'}); it works fine, but when I write it like this: dispatch(requestStart); No actions are being fired! Any suggestions ...

Enlarge the DIV element along with its contents when those contents have absolute positioning

When attempting to overlay two divs like layers of content, I encountered a challenge. Because the size of the content is unknown, I used POSITION:ABSOLUTE for both divs to position them at the top left of their container. The issue: The container does no ...

Steps to define a JavaScript mixin in VueJS

Currently, I am working on a Vue project with TypeScript and in need of using a mixin from a third-party library written in JavaScript. How can I create a .d.ts file to help TypeScript recognize the functions defined in the mixin? I have attempted the fol ...

Encountering permission issues while attempting to add `@nuxtjs/sentry` in a Docker container running Node 16.14. Installation

While attempting to add @nuxtjs/sentry to my project by running npm install @nuxtjs/sentry, I encountered some issues. Here is the error message I received: npm ERR! code 1 npm ERR! path /app/node_modules/@sentry/cli npm ERR! command failed npm ERR! comm ...

Reboot the node.js server

As I delve into learning node.js, I decided to start with a basic example in a file named server.js: var http = require("http"); function onRequest(request, response) { response.writeHead(200, {"Content-Type": "text/plain"}); response.write("it&a ...

Currently, I am working on a project and encountering an issue with html2canvas

const handleDownloadImage = async () => { try { const canvas = await html2canvas(cardRef.current); console.log(cardRef.current); const imageData = canvas.toDataURL("image/png"); setImageUrl(imageData); } catch ( ...

The attribute 'selectionStart' is not a valid property for the type 'EventTarget'

I'm currently utilizing the selectionStart and selectionEnd properties to determine the beginning and ending points of a text selection. Check out the code here: https://codesandbox.io/s/busy-gareth-mr04o Nevertheless, I am facing difficulties in id ...

How to display text on a new line using HTML and CSS?

How can I properly display formatted text in HTML with a text string from my database? The text should be contained within a <div class="col-xs-12"> and nested inside the div, there should be a <pre> tag. When the text size exceeds the width o ...

Changing the contents of a global array in JavaScript

$(document).ready(function(){ var currArray=null; var group=null; var admin=null; var equipment=null; var student=null; console.log("after get array info"); for(var i=0; i<equipment.length; i++) { console.log("equipment at index after get array info ...

Add a click event listener to the body element using a button click, without causing it to trigger

What is the current situation: A button is clicked by the user The menu opens (list items display = block) The function to close the menu is connected to the <body> The function to close the menu is immediately triggered, causing the menu to close ...

jQuery interprets every PHP response as having a status of 0

I've been working on a way for javascript to verify the existence of a user in a MySQL database. My method involves using jQuery to send the user details to a PHP script that will then check the database. The data is successfully sent to the PHP scr ...

Utilize the Vue-Chartjs plugin registration for a specific chart component only

I am currently working with a chart component in Vue 3 using the composition API. My goal is to incorporate the datalabels plugin into this specific chart only. Upon attempting to register the plugin outside of the chart's data or options, I noticed ...

Running `npm install npm` results in encountering gyp ERR and npm ERR

Why am I encountering this peculiar error message when executing sudo npm install npm? This issue seems to crop up occasionally with other modules as well! Error: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4a7b7a6ad ...

Adjust jqGrid dimensions automatically as browser window is resized?

Does anyone know of a method to adjust the size of a jqGrid when the browser window is resized? I attempted the approach mentioned here, but unfortunately, it does not function correctly in IE7. ...

What are some tips for incorporating vue.js into a basic web application?

I've been trying to incorporate vue.js into my web application, but for some reason, it's not loading and the HTML is not firing in the browser. Please take a look at the code snippet below: <!DOCTYPE html> <html> < ...

Transferring information between functions

I am trying to retrieve the value of my drop-down within the getData function. Although the data displays correctly in the run function, I am unsure of how to pass that data down to the getData() function. <select class="form-co ...

Tips for avoiding Google Tag Manager from interfering with document.write() function

We have integrated Angular into our website, however, not all pages have been migrated to Angular yet. To handle this situation, we have implemented a hybrid approach: Each request is initially directed to Angular. Once the page is loaded, it checks if th ...

Utilizing Pagination in Elasticsearch with MongoDB and ExpressJS

Despite my efforts to find a solution online, I have not yet come across anything that helps me achieve what I need. This is my first time working with ElasticSearch, and I am relatively new to Node.js and MongoDB as well. Following a tutorial, I impleme ...

Reactjs Promise left hanging in limbo

How can I resolve the pending status of my promise? I have a modal with a form submit in it, where I am trying to retrieve the base64 string of a CSV file. While my code seems to be returning the desired result, it remains stuck in a pending state. c ...