When I Animation Images as my background. Ths sRGB encoing plays at a Low frame rate at first play

Questions
,
1

At first I use 24 frame(24 images) with Default Encoing(Linear Encoding) to make a loop animation:

            interTime += delta;
            if (interTime > 1.0 / 24.0) {
                interTime = 0;
                scene.background = ImageListA[imageIndex];
                imageIndex += 1 * fixed;

                if (imageIndex > ImageListA.length - 1) {
                    imageIndex = ImageListA.length - 1;
                    fixed = -1;
                }
                if (imageIndex < 0) {
                    imageIndex = 0;
                    fixed = 1;
                }
            }

and it works fine with Linear Encoding.
But when I change the encoind to sRGB:

    ImageList.forEach(image => {
        image.encoding = THREE.sRGBEncoding;
      });

The whole scene plays in a low frame rate at first play(the first 24frame), why and how to solve it?
Is sRGB less efficient than Linear? But why low-frame-rate happeds only first play?

2

I faced the same problem, but in my case, the fps is always 30 if I set the texture encoding to sRGB.

I have a demo code here: Test of Threejs sRGB texture update · GitHub

If I don’t set the texture encoding, the fps is stable at 60.

Can anybody help to explain why this happens and how to solve it?

Thanks!

3

I also found that the render function itself runs very fast(about 1ms), but the requestAnimationFrame calling period becomes very long when I set the texture encoding to sRGB, so I think the GPU must be doing something that blocks the browser from updating the next frame.

4

I found an issue that describes this problem: Texture: Performance issues with hardware sRGB decode. · Issue #26183 · mrdoob/three.js · GitHub

and I think I can transform the texture from sRGB to Linear manually in shader.