Steps for initializing textures in THREE.JS before use

Question

Steps for initializing textures in THREE.JS before use

Before beginning the rendering and animation of objects, I preload and create material textures. However, THREE JS only uploads textures to the GPU when the object is visible in the camera. This causes jerky animation when a new object appears on screen because the texture is sent to the GPU at that moment. Is there a way to send textures to the GPU during the texture creation process to avoid delays during runtime? https://i.sstatic.net/vVijM.png The process of loading images to the GPU can be time-consuming.

javascript performance three.js textures

Answer 1

Answer №1

One method I suggest is to traverse through your object hierarchy, changing each object's frustumCulled property to false. After calling renderer.render(scene, ...) once, you can then reset the flags to true (or to their original values).

function setAllCulled(obj, culled) {
  obj.frustumCulled = culled;
  obj.children.forEach(child => setAllCulled(child, culled));
}

setAllCulled(scene, false);
renderer.render(scene, camera);
setAllCulled(scene, true);

Additionally, you may use

renderer.setTexture2D(texture, 0)

to ensure a texture is properly initialized.

Answer 2

One method I suggest is to traverse through your object hierarchy, changing each object's frustumCulled property to false. After calling renderer.render(scene, ...) once, you can then reset the flags to true (or to their original values).

function setAllCulled(obj, culled) {
  obj.frustumCulled = culled;
  obj.children.forEach(child => setAllCulled(child, culled));
}

setAllCulled(scene, false);
renderer.render(scene, camera);
setAllCulled(scene, true);

Additionally, you may use

renderer.setTexture2D(texture, 0)

to ensure a texture is properly initialized.

Answer 3

Answer №2

Attempt using

renderer.initializeTexture(texture: THREE:Texture)

for version r0.149.0

Answer 4

Attempt using

renderer.initializeTexture(texture: THREE:Texture)

for version r0.149.0

Steps for initializing textures in THREE.JS before use

Answer №1

Answer №2

Similar questions

Local email.js functionality successful, but fails upon deployment alongside React

Having trouble retrieving data from mailosaur using protractor, even though it works fine with node.js

The Optimal Approach for Importing Libraries across Multiple Files

Having trouble loading select fields using AJAX within Wordpress? Update and find a solution!

Unable to properly delete data in Express/Postgres

php send back a JSON containing an error message using AngularJS

Consolidation of files for Client-Code-Generation with Swagger-Codegen: What is the best way to merge all files into

Using JavaScript to launch a new window for a specific folder

Establishing the null values for input parameters

Minimize unnecessary rendering in React when toggling between tabs

Tips on preventing the opening of a new browser tab by using Ctrl + click

What could be causing this issue where the call to my controller is not functioning properly?

Is e.preventDefault() failing to work in Next.js?

I am attempting to monitor the addliquidity event on Uniswap's router02

What is the best way to eliminate FXAA from the outline example in threejs?

The RefreshIndicator from Material-UI fails to display during the first page load

Bug in canvas rendering for Chrome versions 94 and 95

Guide to integrating a static page with personalized CSS and JavaScript resources within a Rails project

Tired of the premium content on Medium.com. How can I conceal premium posts that are aimed at a specific class within a parent element?

Error encountered in Angular after consolidating JavaScript files into a single file: [$injector:modulerr]