Tips for optimizing the rendering of a mesh multiple times in three.js

Currently, I am in the process of developing a cube world game. This involves working with a 3D array of blocks, where each block is represented by an array of mesh (although at this stage, the mesh array simply consists of a single mesh resembling a cube). While the functionality works as intended, I have noticed a significant drop in frames per second when using a large number of blocks (such as a grid of size 50x1x50, resulting in a drastic decrease to around 3fps).

To optimize performance, I have utilized the clone() function for instances where a block is repeated, but it has not provided the desired improvement. The geometry of the meshes is set to BoxBufferGeometry. Additionally, I have experimented with sharing the same geometry and texture instead of relying on cloning, yet the issue persists.

Given these challenges, I am seeking advice on how to enhance the fps output. What techniques do similar games employ to maintain smooth gameplay performance?

Answer №1

If you are looking to optimize your code, consider using instancing as a technique: https://codepen.io/ykob/pen/xqvXex

Another option is to utilize the .merge method on your geometries to combine them into a single geometry and then display one mesh for each region.

someSampleCodeForDemoPurposes();

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

Interactive sidebar component with navigation and animated section markers

For weeks, I've been attempting to create a navigation sidebar similar to the ones shown in these images: Even though getbootstrap.com/components offers appealing navigation sidebars, I have not found a built-in component in their library. This has m ...

Is there a way to modify the list-style-image while using slideToggle?

Html <ul class="main"> <li class="item_no">Item 1 <ul class="sub_items"> <li>Item 1.1</li> <li>Item 1.2</li> <li>Item 1.3</li> </ul> &l ...

Creating a stylish button using a combination of CSS and Javascript classes within a webpage layout

Is it feasible to include a button in the layout that has HTML, CSS styles, and JavaScript functionality? For instance: This button is designed with both CSS styling and JavaScript classes. How can one incorporate CSS and JavaScript along with HTML conte ...

Extracting a specific range of values from a JSON object

Can anyone help me with filtering a range of values from a json object? Here is the range data I am working with: const contractAmountRange = [ { id: '1', min: 0, max: 100000, description: 'Less than $100,000' }, { id: ...

Limiting jQuery datepicker to only show the selected date and disabling all others

I have two datepickers named startdate and enddate. My goal is to restrict all other dates in the enddate datepicker except the selected date from the startdate datepicker. For instance, if I choose 15/12/2016 from the startdate datepicker, I only want the ...

My website doesn't seem to support Javascript, although it works perfectly on jsfiddle

I was tinkering around on jsfiddle and managed to get my code working flawlessly. However, when I tried to copy and paste it elsewhere, the functionality broke down. It seems that for some inexplicable reason, the code doesn't seem to pass through the ...

Organizing the View and Controller logic within Javascript objects

Looking to streamline the separation of DOM manipulation and interaction (jQuery), referred to as VIEW, from my client-side application logic (socket.io), also known as the controller. The communication must be bi-directional: VIEW to CONTROLLER when a u ...

The system seems to be having trouble locating the password property, as it is returning a value of

I'm currently working on a database project using MongoDB and Node.js. I'm trying to update a specific field, but unfortunately I keep getting an error. The model I am working with is called "ListaSalas": router.post('/updatesala', fun ...

Imitate adjustment of orientation without the need to resize the browser window

Is there a way to simulate page portrait orientation on a PC browser without resizing the window? In my HTML code, I have a <div> element that displays content dynamically based on screen orientation. Is it possible to use JavaScript to trick this & ...

"An issue with the external jQuery file loop causes it to skip either the first or

I have a webpage where I am dynamically loading content from an external JavaScript file. This file identifies div elements with a specific class name and then fills the content of those divs based on a custom attribute, which contains a link to an API. Th ...

Click on the form to initiate when the action is set to "javascript:void(0)"

I am working on an HTML step form that needs to be submitted after passing validation and ensuring all fields are filled. The form currently has an action controller called register.php, but also includes action="javascript:void(0);" in the HTML form. What ...

Add a JSON file containing an image path as a value into a CSS background property

I currently have a MongoDB database containing documents with 'img' values structured as follows: "img": "../folder/img.jpg" Would it be feasible to utilize this string in my CSS for modifying the background image? This is essential because I n ...

What is the best way to group an array based on a dynamic key?

My goal is to group values in an array by a given ID. I've attempted a method for this, but it's not working for dynamic keys. Here is the current array: let employees = [{"employeeDetail": [{"empID": "XXYYZZ11"," ...

Dividing CSV Data into Two File Outputs

I've got a CSV file that's structured like this: Docushare Host locale, created_at, version en,Wed Feb 21 17:25:36 UTC 2018,07.00.00.C1.609 User handle, client_data, docCountQuota User-12,,-2 Document handle,client_data,cfSpecialWords Document ...

Issue with Electron | JavaScript Runtime

Attempting to utilize WebTorrent with Electron and Node.js for torrent downloading. Here is the code snippet in main.js: const electron = require('electron') const { app, BrowserWindow } = electron const path = require('path') const u ...

What could be causing my function to execute thrice?

I cannot seem to figure out why my tag cloud is causing the required function to run multiple times instead of just once when I click on a tag. This issue persists whether using jQuery or plain JavaScript. What am I missing? The code I have is very simple, ...

Should we integrate a MongoDB database calculation app with a POST Controller in sails.js?

The primary function of the application interface is to provide variables that have been initially posted by the client, as well as any subsequent database calculations carried out in real time by a specialized engine. Is it possible to integrate this eng ...

Guide to automatically updating a chart after each for loop iteration in Chart.js

Currently, I am utilizing Chart.js for visualizing some data and I require the chart to be updated after each iteration of a for loop. Unfortunately, the chart only updates at the conclusion of the for loop. Despite my attempts with setInterval and setTim ...

Press a single button to toggle between displaying and hiding the table

$(document).ready(function() { $("#t1").hide(); // hide table by default $('#sp1').on('click', function() { $("#t1").show(); }); $('#close').on('click', function() { $("#t1").hide(); }); }); <li ...

What is the best way to set up localStorage with a multi-dimensional array

I am struggling with modifying my local storage and it's taking up a lot of my time. Initially, I set it up like this: localStorage.setItem('example','{"data": []}'); It was working fine, but now I need to structure it like the ...