What is the best way to set multiple textures to multiple planes meshes and ANIMATE them

Questions
,
1

Hi folks,
My main question is in general: What is the best way to set multiple textures to multiple planes meshes and ANIMATE them, because setting multiple textures works good in several ways, like creating a loop and cloning the material, and set a texture to each cloned material for each plane mesh, but when animating and moving the planes, the animation is laggy and janky.

So with this problem of janky animation when setting textures in JavaScript, I tried to set a texture to each plane in the fragment shader using this code
Capture1

The animation is smooth and works perfect, but I got this warning that I couldn’t get rid of

Capture2
Capture21366×81 2.86 KB

So I want to know what’s wrong here, and I’m messing with something that is expensive without knowing?

Thank you in advance

2

Can you please show how you create/load your textures?

3

yeah sure, sorry
Capture1
I load 3 textures and send them to the fragment shader, then according to “uCurrentItem” uniform value (which has 3 possible values), I set each texture to each plane.

Here’s how I create my planes
Capture2

4

You can solve your issue by loading all texture first and then setup your materials. If you don’t wait until textures are fully loaded, you perform the material.clone() operation too early. Cloning shader materials also clones their texture uniforms and you end up with cloned texture marked for upload without fully loaded data.

5

Any suggestion on how to do that…
I tried this code

if (isLoaded) {
  // Create Plane Code
}

and set isLoaded variable to true in the

  • loadingMnager callback
  • textureLoader callback
    in both cases nothing displayed
6

@mooh You seem to be using loading manager meaning you can call a function after loading through the manager eg

`loadingManager.onLoad = function ( ) {

	afterLoadingFunction() 
};

See here

7

okay, I did that already but nothing displayed, i’ll see if maybe I’m missing something.

In general, I want to know if you want to create a slider of images or display several images and put them as textures to plane meshes, is this technique of fragment shader good and efficient, or it is better to be done with JavaScript, if so, how would you do it? note that displaying textures in planes meshes is not the problem, the problem is when animating and moving them they are not smooth, especially the first 2/3 transitions.

THANKS