Understanding the performance of video in threejs when using getImageData

Edit;

Check out the working codepen (you'll need to provide a video file to avoid cross-origin policy)

https://codepen.io/bw1984/pen/pezOXm

I'm currently trying to adapt the amazing rutt etra example from to utilize video (using threejs), but I'm running into performance issues.

While my code seems to work smoothly on Chrome in my MacBook Pro, there's a noticeable slow memory leak, possibly due to the heavy processing required by getImageData. The issue becomes more prominent when I try to refresh the tab, indicating a possible relationship with Chrome's garbage collection. Is there a way to offload this heavy processing to the GPU instead of burdening the CPU?

I'm wondering if there are any obvious optimizations I might be missing in my code, or if the performance challenges I'm encountering are expected given the nature of my project.

I'm solely interested in WebGL/Chrome functionality, so I don't need to worry about browser compatibility issues.

<script>
// JavaScript code here
</script>

Any assistance or guidance would be greatly appreciated, as I'm still exploring this technology and have been struggling to grasp it fully.

javascriptperformancethree.jshtml5-videogetimagedata

Answer №1

One possible reason for the persistent memory leak could be attributed to the following:

        // insert a single line
        var _singleLine = new THREE.Line(_geometry, _material);

        //log(line);

        _lineGroup.add(_singleLine);

The object THREE.Line is a complex structure, consisting of various nested objects and extensive data. Each instantiation of it results in the creation of .matrix, .matrixWorld, .modelViewMatrix, .normalMatrix, all of which are arrays containing numerous values. Additionally, properties like .position, .quaternion, .scale, .rotation, and possibly .up are vectors, quaternions, etc., represented as slightly smaller arrays with specific constructors.

Repeatedly allocating all these resources every 16 milliseconds only to release them in the next frame likely contributes to the memory "leak".

To address this issue, it is recommended to establish a pool of THREE.Line objects and update their display every frame. The number of visible objects can be managed using the .visible property while modifying their transformation properties as needed.

Answer №2

After taking @pailhead's advice to pre-render the lines and lineGroup in advance and updating the vertices on each animation frame, the performance of the code has improved significantly, now running smoothly like a content kitten. I also had to add the following line to ensure that the updated coordinates are properly utilized:

e.geometry.verticesNeedUpdate = true;

Trying to incorporate a hosted video on CodePen has been challenging due to cross-origin policy violation issues, but I managed to provide a version showcasing the functional code.

https://codepen.io/bw1984/pen/pezOXm

I aim to share a self-hosted version as soon as possible, ensuring its functionality.

Despite my efforts, I have yet to succeed in implementing color functionality, leaving that task for a future endeavor.

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

Node JS encountered an unhandled promise rejection warning, while React received a preflight response

Working with React JS: Take a look at the code snippet below: ....some code...... verifyTokenResults = await axios.post('http://localhost:5000/otp/token/verify', {accessToken: authToken}) Here, I am sending a token from a React component to a ...

javascriptnode.jsreactjsexpress

Having trouble displaying the Chrome context menu for a specific Chrome extension

I've read through several posts on this topic, but I'm still struggling to identify the issue with my implementation of the Chrome contextMenu API. I simply copied the code from a tutorial on Chrome APIs, and though there are no errors, the menu ...

javascriptjquerygoogle-chromegoogle-chrome-extensioncontextmenu

Is there a way to achieve the same task with Ajax?

Hey there, I am new to the world of JavaScript and AJAX. I have been reading about how to convert a client-side JavaScript variable into a server-side PHP variable by using AJAX. Can someone please provide me with a code snippet using AJAX for this purpose ...

javascriptphpjqueryajax

Converting JavaScript QML objects to C++ QT components

I have a QML JavaScript function that generates and returns a component called Item: function createComponent() { var component = Qt.createComponent('MyComponent.qml'); var obj = component.createObject(container, {'x': 0, &apos ...

javascriptc++qt

What causes the significant decrease in speed for std::equal compared to a custom loop when comparing two small std::arrays?

While analyzing a small portion of code within a larger simulation, I was surprised to discover that the STL function equal (std::equal) was significantly slower than a simple for-loop when comparing two arrays element by element. Conducting a fair compari ...

c++performancestlc++14gcc6

What is the process of converting a byte array into a blob using JavaScript specifically for Angular?

When I receive an excel file from the backend as a byte array, my goal is to convert it into a blob and then save it as a file. Below is the code snippet that demonstrates how I achieve this: this.getFile().subscribe((response) => { const byteArra ...

javascriptangulartypescriptentity-framework

Use Meteor to retrieve the value from the initial collection in order to locate the value in the second collection

Currently, I have two sets of data: Users, containing userId, firstname, and surname. Answers, containing answerId, questionId, and user. In the 'Answers' collection, the 'user' field corresponds to the userId of the user who provide ...

javascriptmongodbmeteor

Tips for transferring an element from different components to a designated component in React.js

In my project, I have a <Header> component and another component called <AboutMe>. My goal is to select an element by its ID from the <AboutMe> component and attach an event listener for onClick. However, whenever I attempt to use getEl ...

javascripthtmlreactjs

The FormattedNumber feature in react-intl is not functioning correctly

I am currently attempting to utilize the FormattedNumber component within the react-intl library, but I am encountering difficulties in getting it to function correctly. <IntlProvider locale="en-US" messages={locales['en-US']} > ...

javascriptreactjsreact-intl

Utilizing TypeScript Variables within a Jquery Each Iteration

I have a variable named tableIndexNumber that I need to use in different methods. When trying to access this variable, I use "this.tableIndexNumber" and it works fine. However, I face an issue when using it inside a jQuery each loop because the HTML elemen ...

javascriptjquerytypescript

Leverage selenium to enter data for numerous elements by utilizing xpath

I am new to using Selenium and I am exploring ways to locate a series of input elements using xpath or css. My goal is to iterate over each element and input text into them. For example: <form> value1 <input type="text" placeholder="value1"> ...

javascriptnode.jsseleniumxpathselenium-webdriver

Looking to Move the Image Up?

I've been experimenting with creating a grid layout where the bottom image will move up until it is 10px away from the image directly above it. However, no matter what I attempt, the spacing seems to be based on the tallest image rather than the one a ...

javascripthtmlcsswebstorm

Ways to update or incorporate new data within JavaScript

I'm currently experimenting with ways to incorporate additional text or even AdSense into what I believe is a .js file. There's an operational lightbox feature with a descriptive caption at the bottom, and that caption is what I want to modify. ...

javascriptjqueryhtmltextads

How can I automatically check all checkboxes in a row when a material table is loaded and uncheck them when clicked?

I have been working on a project using React Material Table and I am trying to figure out how to make the "select all" checkbox default checked when the page is loaded. Additionally, I want the ability to deselect any checkbox if needed. I attempted to use ...

javascriptreactjsmaterial-uimaterial-table

Why does the Next.js GET index request keep fetching multiple times instead of just once?

Currently, I am encountering an issue while working on a tutorial app with Next.js. One of my components is not rendering due to what seems like multiple executions of a simple GET request for an index page. The problem perplexes me, and I need some assist ...

javascriptreactjsmongodbnext.js

MongoDB not being updated

Currently, I am a student delving into the world of full-stack JavaScript development. One resource that I have found particularly helpful is a LinkedIn course where the project involves creating a blog with an "upvoting" feature. However, I have encounter ...

javascriptnode.jsmongodbexpress

How can we ensure that React state remains unaltered when modifying an array set to state?

Hope you're having a wonderful day! I'm encountering a significant problem with React. I have a state that contains an array. Within a function, I create a copy of the state in a new variable. However, any modifications made to this new variable ...

javascriptreactjsarraysreact-hooks

Is there a way to retrieve all active HTTP connections on my Express.js server?

In my express server app, I am implementing SSE (server send events) to inform clients about certain events. Below is the code snippet from my server: sseRouter.get("/stream", (req, res) => { sse.init(req, res); }); let streamCount = 0; class SS ...

javascriptnode.jsexpresshttpserver-sent-events

Filtering with checkboxes (looking for help with logic functionality)

Yesterday, I sought assistance with a similar question and was able to make progress based on the response provided. However, I have encountered another issue that has left me stuck. Current behavior: Clicking on a checkbox changes the background color of ...

javascripthtml

Stream JSON data to a file with Node.js streams

After reading this article, I decided to utilize the fs.createWriteStream method in my script to write JSON data to a file. My approach involves processing the data in chunks of around 50 items. To achieve this, I start by initializing the stream at the be ...

javascriptnode.jsjsonstreamnode-streams