We have a use case here, where we want to show images of high resolution (4000*3000) in a maximum Framerate, but something like 10 would be nice. Right now, we can get something around 2-3 FPS with bitmap images. We are not bound to bitmaps and could also use jpeg for instance, but I don’t think this will increase performance due to amount of pixels, right?
is it quicker to create new Material, new Shader and new Texture for each image or should we keep them and just switch the texture?
Our base question is what would be the best approach to increase Framerate.
<img src="" /> 
(You can mix it with CSS2DRenderer if you’d still like the image to be part of the 3D world, in a way.)
Unlikely, it may lower the memory use - but performance depends more on the type of Material than the type of texture.
Regardless the way you choose - it shouldn’t affect the performance in a long run (shader recompilation may cause stutter, but only for a brief moment.)
Need archive or fiddle. I have 10 big texture with 8192 x 8192 and 60 FPS.
8192 x 8192 RGBA is 268 mb in video card and in ram.
I maybe missed, that the images are regulary updating. So something like a video in single frames. I expect you to have 10 Textures, loaded once, right?
Image is 0.9mb but in webgl is 268mb
Example: 000_100.zip (1.3 MB)
To save memory and switching you need something like this. But always will freezing when switching.
var tex=[];
var texture_loader=new THREE.TextureLoader();
for(var n=1;n<11;n++){
tex["ground_"+n]=texture_loader.load("images/ppp/ground ("+n+").png");
tex["ground_"+n].wrapS=tex["ground_"+n].wrapT=THREE.RepeatWrapping;
tex["ground_"+n].repeat.set(1,1);
}
var mesh=[];
mesh["screen"]=new THREE.Mesh(new THREE.PlaneBufferGeometry(1000,1000,1,1),
new THREE.MeshBasicMaterial({map:tex["ground_1"]}));
scene.add(mesh["screen"]);
//to Switch
mesh["screen"].material.map=null;
mesh["screen"].material.needsUpdate=true;
tex["ground_1"].dispose();
mesh["screen"].material.map=tex["ground_2"];
mesh["screen"].material.needsUpdate=true;
