What causes the excessive memory usage of (JS)Strings when loading complex .obj files in AFrame and Three.js?

Our webscene is quite complex, with dynamically loaded .obj and .mtl files. When comparing the scene without any objects to one with multiple objects, we noticed a strange issue:

In Firefox's memory heap, most of the memory (>100MB for 5 objects) is being used for JSStrings. The remaining memory is taken up by Objects, which makes sense when dealing with complex object files.
But why are there so many Strings taking up high amounts of memory, and can we reduce this? Is AFrame converting the content of .obj files into strings?

We have considered minimizing the .obj files themselves and reducing vertices. If anyone has experienced similar issues or has suggestions on how to solve this problem, we would greatly appreciate it.

Thank you in advance :-)

Answer №1

When it comes to transferring 3D data, OBJ files are known for being text-based but not very efficient. This means that A-Frame needs to sift through the text in order to upload your data to the GPU.

To avoid this issue, consider converting your OBJ files to a binary format like glTF (.glb). This can be done using tools such as obj2gltf (CLI) or (web). By doing so, you'll notice faster loading times with a glTF file.

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

Text located in the bottom right corner of the window with the use of JavaScript

Is there a way to replace text at the bottom right of the window, as opposed to the page, so that it remains fixed in the corner of the window? I'm looking to create a "share" link that is always visible. ...

Error encountered in Typescript when attempting to invoke axios - the call lacks a suitable overload

When I make a call to axios, I include a config object like this: const req = { method, url, timeout: 300000, headers: { 'Content-Type': 'application/json' } } axios(req) An error in TypeScript is thrown stating that "No overload matc ...

Alter the default time zone in JavaScript

PHP features a function known as date_default_timezone_set which impacts the GMT time that is used by the Date() command. Is there a way for this function to also impact JavaScript? Here is a custom function I have: function calcTime(offset) { d = n ...

Unable to display service cost after passing ID through Ajax request for cost retrieval. The ID is successfully being passed, but the cost remains elusive

I've encountered an issue while trying to execute a seemingly simple ajax request. The goal is to send an "id" through ajax to fetch the service cost of an item with that specific "id". Although the ajax successfully sends the id to my "getcost.php" ...

Redirecting with response headers in Next.js

Objective: The Goal: Clicking a button on a page should send a request to the controller. The controller will then set a cookie, and upon receiving the response, redirect the page to another page, such as the about page. Directly Calling API route from th ...

Breaking down object properties to 'this' using destructuring in javascript

I would like to set the pagination result from response.data to Vue data. The standard approach would be: this.resultData = response.data.results this.totalResults = response.data.total this.perPageResults = response.data.per_page However, ...

Customizable external URLs in HTML files depending on the environment

Here are the SharePoint URLs for my production, QA, and development environments: Production: QA: Development: I need to adjust relative reference URLs in JS & CSS files (/sites/dev/) for each environment. Is there a way to make this configuration dyna ...

Implementing a smooth camera movement in Three.js using the mousewheel

Is there anyone who can assist me with achieving smooth camera movement (forward/backward) using the mouse wheel? The current code I have is not providing the desired smoothness. document.addEventListener( 'mousewheel', onDocumentMouseWheel, fal ...

Learn how to mock asynchronous calls in JavaScript unit testing using Jest

I recently transitioned from Java to TypeScript and am trying to find the equivalent of java junit(Mockito) in TypeScript. In junit, we can define the behavior of dependencies and return responses based on test case demands. Is there a similar way to do t ...

Error: Unable to extract tags from the JSON data as it may be null and cannot be mapped

Within my database, I have a collection of records where not all of them are tagged, some may be empty, and they are stored in CosmosDb and retrieved as a Json array. For displaying the data, I am utilizing antd table and tags: https://ant.design/componen ...

What is the best way to conceal two Bootstrap divs that should not both be visible at the same time?

I am working with two different types of charts: an Emotion chart and a Polarity chart. To control the visibility of these charts, I have implemented two buttons, one for each chart. The functionality is such that when the first button is clicked, only the ...

Using axios to modify and enhance the HTML content of a webpage

Utilizing axios and an API, I am able to retrieve a page's HTML, make edits to it, and then send it back via a POST request to the API. While successful in retrieving and editing the HTML content, I'm encountering difficulty in updating or changi ...

Arranging Objects and Arrays by Two Criteria

Extracting data from an API that provides information in the format below: [ { "id": 173, "date": "2020-12-10T16:05:30", "date_gmt": "2020-12-10T16:05:30", "guid": {}, "modified&qu ...

How can you exclude selected values in React-select?

Here is how I have defined my select component: this.state.list = [{label: "test1", value:1}, {label:"test2", value:2}, {label:"test3", value:3}] this.state.selected = [{label:"test2", value:2}] let listMap = this.state.list let list = this.state.list { ...

Creating a dropdown button in HTML table cells with JavaScript: A comprehensive guide

I'm attempting to create a drop-down button for two specific columns in my HTML table, but all the rows are being converted into drop-down buttons. I only want the "categorycode" and "categoryname" columns to be drop-down. $(document).ready(functio ...

Can you provide an update on the progress of Multiple Materials?

My search for documentation on how multiple materials work in three.js has been unsuccessful. I know that MultiMaterial has been deprecated, but what is the current method for implementing multiple materials? Can anyone explain how faceVertexUvs map to mu ...

Tips for preserving selection state in a multi-page results display?

In the process of developing a web application, I am working on implementing a way to save selection states. Specifically, I am building a query interface that interacts with a MongoDB backend. The search results are displayed in a grid format with check ...

What is the best way to conceal a conditional panel in a Shiny app using JavaScript when any action or button is clicked that is not one of the designated inputs

I am looking for a way to hide the conditional panel shown below whenever there is any user input that is not related to clicking the "Delete" button or selecting an option from the selectInput() function in the conditional panel, as demonstrated in the im ...

Spring's $.getJSON failing to trigger callback functions

After conducting extensive research, I have come across many similar issues but nothing that has provided a solution to my problem. I am facing an issue where my getJSON call is successfully calling my Spring controller and receiving JSON data in response ...

Utilize Google Tag Manager to Safely Gather Specific Data

My current project involves capturing values from a <select> element, sending them to the Data Layer, and then forwarding them to an Analytics account via Google Tag Manager. The source code I'm trying to extract values from includes a dynamic s ...