Improving Three.js performance for a single, substantial model

I am currently developing a hybrid file browser and 3D model viewer. My goal is to seamlessly load models of various formats, specifically .OBJ files, into the scene while maintaining a smooth framerate with the help of orbitControls.js.

Most of the optimization strategies I have come across mainly focus on handling multiple meshes rather than one large mesh. My ultimate objective is to successfully load massive files containing hundreds of thousands or even millions of vertices without causing the system to crash. I understand that this may seem overly ambitious, but I am unsure where to begin in terms of optimizing for this issue in order to enhance my framerate even slightly. So far, my searches on Google have not provided me with any helpful solutions.

Answer №1

One key feature lacking in OBJLoader is indexing, which could significantly enhance performance by reducing the number of vertices needed. For example, exporting a cube from Blender resulted in 36 indices (6 vertices per cube face, 6 faces = 36 vertices), whereas with indexing, the same cube would only require 24 vertices.

While indexing does increase the size of the object due to the additional indices, the savings can be substantial for complex meshes where many faces share the same vertices. Expanding on the intricacies of indexing is beyond the scope of this response, but here's a simple example using a plane:

var planeGeo = new THREE.BufferGeometry();
planeGeo.addAttribute("position", new THREE.BufferAttribute(new Float32Array([
    -10, 10, 0,
    -10, -10, 0,
    10, -10, 0,
    10, 10, 0
]), 3));
planeGeo.addAttribute("normal", new THREE.BufferAttribute(new Float32Array([
    0, 0, 1,
    0, 0, 1,
    0, 0, 1,
    0, 0, 1
]), 3));
planeGeo.setIndex(new THREE.BufferAttribute(new Float32Array([
    // triangle 1
    0, 1, 2,
    // triangle 2
    3, 2, 1
]), 1));

By reusing vertex indices, we can minimize duplication in the position buffer.

It's important to note that indices should correspond to vertex/normal pairs. If a vertex has multiple normals, you'll still need separate vertex values in the position buffer.

To leverage this optimization, consider modifying OBJLoader to generate indexed BufferGeometry objects or develop a new parsing function altogether. The latter approach may offer greater flexibility, especially when incorporating support for additional file formats.

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

The JSP AJAX response comes back empty

I am encountering an issue where I am using JQuery Ajax to call a REST API in JSP, but it keeps returning null no matter how I try. Strangely enough, the same code works when used in HTML. I have been searching online for a solution but haven't found ...

Reset the form value in React using Material UI components

Currently, I am working with React Material and hooks, attempting to reset a material form. However, despite my efforts to adjust the state, I am not seeing any changes reflected. <form className="create-account-form" autoComplete="off" onSubmit={onSub ...

Unpredictable algorithm for selecting the champion

I manage a website that features promotions and users. Users have the ability to register for these promotions, with one random user selected as the winner. Initially, the formula for selecting the winner was quite simple: $total_users = 100; //total use ...

Modifying the calendar from a 7-day week to a 5-day week

I am currently in the process of developing a 7-day calendar (Sunday to Saturday) which is functioning well. However, I am interested in adding an option to switch it to a 5-day calendar (Monday to Friday). I was wondering if there is a way to modify the e ...

My Angular7 app.component.html file is not displaying the routing. What could be the issue?

After implementing the code in app.component.html in Angular 7 like this: <div id="wrapper"> <header id="header-container" class="fullwidth"> <div id="header"> <div class="container"> <div class="left- ...

Inserting an HTML element into Handlebars.js during a specific iteration of an each loop

I have a channel.json file containing 7 objects of data which are iterated in hb. I am looking for a way to insert a date between these iterations without modifying the .json file. How can I add an html tag to display after the 3rd iteration within the loo ...

An issue has occurred: TransformError SyntaxError: Unexpected keyword 'const' was encountered

While practicing programming with React-Native, I encountered a problem that I couldn't figure out how to solve. I attempted to use solutions from various forums, but none of them worked. import { StyleSheet, Text, View, Image } from 'react-nativ ...

Merge arrays with identical names within the same object into one cohesive object containing all elements

I just started using Vue and I'm not entirely sure if it's possible to achieve what I have in mind. Here is the structure I have: { "items":[ { "total":1287, "currency":"USD", "name":"string", "itemID":"", "pro ...

Building on the functionality of AngularJS, a directive scope can be established to access and modify

Can a directive accept and utilize a parameter as its scope value? For instance: angular .module('app', []) .controller('CTRL', function($scope) { $scope.some_value = { instance1: { key1: 'value11', ...

What steps do I need to take to generate a terrain similar to this using Three.js?

Trying to construct a terrain based on a heightmap with an enclosed bottom layer. Refer to this example for clarification: The current function for generating the terrain is as follows: var img = document.getElementById("landscape-image"); var numSegment ...

Having trouble accessing data beyond the login page using Node/Express

Currently in an unusual situation. I am developing a backend and frontend that connects to a third-party RESTFUL API managing some hardware. The third-party API is hosted on your local system as a webserver, meaning HTTP requests are directed to "localhost ...

Unable to access the POST value in the current context

I am having trouble retrieving the values from a simple form that consists of two files: APP.js and FORM.ejs. I am attempting to get the values submitted through the form. APP.js: const http = require('http'); const express = require("express"); ...

The height of the browser action will not return to its original state

I'm currently working on an extension that provides responses based on user text input. However, I'm running into an issue where the height of the browser action won't reset properly. I've tried various methods to fix this problem, in ...

Dealing with Large JSON Strings in ASP.NET MVC Views

Large JSON Objects (approximately 1.5 MB) are received in Controller C1. They are then converted to strings and stored in a hidden label in View V1. The JSON data in V1 is utilized by parsing it in JavaScript J1. An occurrence of Out of Memory Excepti ...

Styling material-ui textfield: Tips and tricks

I've been grappling with figuring out how to customize a material-ui TextField component. <TextField id="email" label="Email" className={classes.textField} value={this.state.form_email} onChange={this.handle_change('form_e ...

Organizing information in local storage using an array and converting it to a string

After storing user inputs (Worker's name, Car Vin, Start time and End time) in the local storage, you want to sort the employees' names in alphabetical order. The question is where should the code be placed and how should it be written? // Car C ...

Stop the interval when the variable equals "x"

I've created a function that controls a specific row in my database using AJAX. The function is triggered by a click event and placed within a setInterval function to check ten times per second. Initially, it will return 0, but eventually (usually wi ...

Ways to enable automatic scrolling of a page as the content expands (Utilizing collapsible elements)

For a recent project I've been working on, I decided to include 4 collapsible text boxes. However, I encountered an issue where opening content1 would expand and push down content2-4, requiring the user to manually scroll to view the remaining collaps ...

Place a Three.js scene within a jQuery modal dialogue box

I am attempting to integrate a Three.js scene into a jQuery modal window. The objective is to utilize the Three.js scene in a larger window size. This scene should be displayed after clicking on an image that represents the scene in a smaller dimension. Y ...

Maintaining the $index value across all pagination pages in AngularJS while matching it with the items in the data list

Is there a way to maintain the original $index numbers in my list data after pagination? For example, if data.length is 50 and they start from index 0, the first page contains 10 items ending at index 9. The next item on the second page should start at in ...