Three.js - Optimizing and Handling Images - Best Practices

My current project has a unique concept:

https://i.sstatic.net/Jd3Ot.jpg

The main idea revolves around a virtual room that dynamically adjusts its height based on the number of images loaded by the user.

While it functions smoothly with fewer pictures, performance takes a hit when loading more than 100 images. This is my initial attempt at using Three.js, so I am still considered a novice in this area.

I have been exploring various optimization techniques and would greatly appreciate your insights.

To ensure the images maintain their proportions, I utilize Promise.all to fetch all images before initializing the world. The mesh is then constructed based on the width/height ratio of the image using PlaneBufferGeometry.

https://i.sstatic.net/JZBnJ.png

According to recommendations, it is ideal to load textures with power of two sizes. Should I resize all images to meet these criteria, even though they vary significantly in size?

EDIT: This is how the drawing object is created :

export class Drawing {
    constructor(texture) {        
        
        const imgW = Math.floor(texture.image.naturalWidth / 20);
        const imgH = Math.floor(texture.image.naturalHeight / 20);        
        const material = new MeshBasicMaterial({
            color: 0xffffff,
            map: texture
        });      
        material.color.convertSRGBToLinear();  
        this.mesh = new Mesh(new PlaneBufferGeometry(imgW, imgH), material);
    }

Finally, the mesh is added to the scene.

Answer №1

To enhance performance, consider implementing mipmaps to display varying quality images at different scales. However, efficient resource management is crucial for optimal performance. Instead of loading all images at once, adopt a feedback loop approach where new textures are loaded dynamically as the camera position changes. Focus on parsing metadata for multiple images and load relevant textures as needed, such as loading images 200-300 when the camera reaches y=100. Utilize grid masonry and fog effects to enhance the overall image viewing experience. Resize large images using canvas or similar tools to maintain reasonable dimensions. Prioritize features over quantity to avoid overwhelming users with excessive content.

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

Encountering an issue with eslint-loader in a new VueJS project: TypeError - eslint.CLIEngine is not recognized as

Embarking on a fresh VueJS venture with WebStorm. A brand new VueJS project has been established, NPM upgraded, Vuetify added, and upon server initiation, an error pops up: ERROR Failed to compile with 1 errors ...

Cutting Out Sections of a List

I'm currently working on an app that involves looking up and navigating to specific locations. I've encountered an issue with the coordinates in my code containing a ',0' at the end, which is not compatible with Google Maps. Manually re ...

How can I dynamically append content to the DOM when a user clicks?

On my form, I have an input field that allows users to click an add button and a new input field will appear below it, with the option to repeat this process indefinitely. However, I am facing an issue with adding an input field to the DOM upon a click eve ...

Attributes required are not functional on mobile devices

Good day! I have encountered an issue with the required attribute on a form on my website. It seems to be working perfectly on my browser, but not on mobile devices. Has anyone else experienced difficulties with jQuery, JavaScript, or Node packages? <f ...

The functionality of the AngularJS UI-Router seems to be impaired following the minification of

Hey there, I just developed an app with Angular and implemented ui-router for routing. To reduce the file size, I minified the entire Angular app using gulp-uglify. However, after minifying the app, the child route (nested route) of ui-router is no longer ...

Trouble with Chakra UI loading Images from local sources

I'm running into issues when trying to load local images using the Chakra UI library in combination with Next.js. <Image src="./homepage/footer/Black.svg" /> Here is the current folder structure: When checking my console, I see the f ...

AngularJS controller containing a nested app

Is there a way to implement this structure using AnglularJS? <body ng-app="mainBodyAppWrapper"> <div ng-controller = "mainBodyController"> <div ng-app="myApp"> <div ng-controller="controller3"> ...

Having trouble with NextJS when trying to add an item to an element and render it in a Tailwind select

Struggling with displaying dynamic values in a select box using NextJS After fetching data from an API endpoint, I aim to populate a select box. However, my goal is to prepend a new element to the 'teams' array and ensure it appears first upon p ...

Is it possible to manually input values when printing a PDF instead of pulling them from the main HTML?

I am facing a challenge in adding a "Print PDF" option to my website because it is built using Ext.js, and therefore the code is not in HTML. Despite searching for ways to print a PDF from the site, all solutions I found involve using HTML. Is there any li ...

What is the best way to display converted value in Angular 8?

In my current project, I am utilizing .NET Core 2.2 for the backend and Angular 8 for the frontend. The scenario involves having integer values on the backend within a specified range. For example: [Required] [Range(1073741824, 1099511627776)] // ...

Bringing in the node-spotify or spotify-web modules to the browser for seamless integration

Has anyone successfully used Spotify's Playlist API in a browser? It seems that the web API only covers metadata, and to access the full API I need to use libspotify. Do I need to set up a Spotify API server myself or use node libraries like node-spot ...

Guide on setting a value in $(document).ready using code behind

I am currently working on a .NET application with the use of Twitter Bootstrap. My main challenge right now is retrieving data from a .aspx.cs page to a .aspx page. Here's a look at my code: strObject.cs public class strObject { public string Nam ...

Live Edit API

Currently, I am developing an application that requires near real-time collaborative editing capabilities for documents, similar to the functionality found in Google Documents. Since I am a beginner in this area, I would greatly appreciate any information ...

Having trouble accessing an element after parsing JSON using jQuery, ending up with an "

Here is a snippet of code with a text and a button: <div id="divtest"> <h1> Bla </h1> </div> <button id="dugme1"> dugme </button> When the user clicks the button, the following script will be executed: $("#dugme1").cl ...

Ensure the validation of numerous input fields within a single form with the use of Vue 3 composition API

Within my application, I have implemented custom validation and validators to ensure the accuracy of various form fields. The submit button functionality is designed to remain disabled until all input fields are filled. The creation of validators involves ...

Utilize strings as object keys in JavaScript

Let's say I have the following variables: var myKey = "This_is_my_key" var myObj = {"This_is_my_key" : true} What is the proper way to access myObj using the key myKey? ...

What is the most effective method for identifying duplicate values in a multidimensional array using typescript or javascript?

I have a 2D array as shown below: array = [ [ 1, 1 ], [ 1, 2 ], [ 1, 1 ], [ 2, 3 ] ] I am looking to compare the values in the array indexes to check for duplicates. For example array[0] = [1,1]; array[1] = [1,2]; array[2] = [1,1]; We can see that ...

Generate a Monaco Editor within a Vue.js component

Currently, I am integrating Monaco Editor with Vue.js and facing some confusion regarding how Monaco is being instantiated within the Vue component: 1) In my data() method, I have defined an editorEx object to be used for this purpose, like so: data() { ...

The resizing issue of Textarea during transitions

Whenever I add the transition property to a textarea, it automatically affects the resizing function of the textarea. Is it possible to disable the transition only when resizing the textarea, but not for the textarea itself? <textarea name="" id="" cla ...

How would you utilize jQuery to access the "option" array of a select control with the attribute of multiple=true by utilizing the find() method?

When using jquery, I am attempting to access selected items from a select control that has multiple=true. My goal is to reference them by name criteria and then iterate through the list. Below is my current code snippet: var currentRow = $(this); // sele ...