Is there a way to render sprites faster for mobile?

[Yeferson]

I have a problem to render approximately 300 sprites in pixijs, on my pc it works perfectly, but on my phone the fps to lower and the slowness is noticeable.

It is possible that the slowness is due to the number of sprites, I had planned to generate a grid of RenderTextures and render all the sprites in groups, but I don't know if that works.

I designed a system to recycle the sprites and use them elsewhere if they are not shown on the screen, I also used a grid to divide my map by sections and improve the optimization.

Image: https://ibb.co/hmmYS5J

This amount of sprites looks perfectly on my mobile device, but when I increase the number of sprites it becomes slow.

Image: https://ibb.co/hfWnqvn

As I said before, I had planned to use a RenderTexture in each section of the grid with the elements that belong to that section, I don't know if that is a good solution.

I want to know what is the best way to render this amount of sprites for mobiles.

HELP:(

[ivan.popelyshev]

Did you try to profile?

> It is possible that the slowness is due to the number of sprites,

No, it should run 10000 just fine.

> I had planned to generate a grid of RenderTextures and render all the sprites in groups, but I don't know if that works

In case of extremely slow javascript - that might help. You can also use https://github.com/pixijs/tilemap , just put each group in a tilemap, it will eat js performance like one sprite, but forget about outer batching in that case, this thing is always 1 drawcall. It will certainly be faster than renderTexture because it wont render all those extra transparent pixels.

Edited July 14, 2021 by ivan.popelyshev

[Yeferson]

Yes, i make a profile and the render consumes more resources. In addition to the sprites, I also have some Graphics but I deleted them and the fps still lowered.

I also had thought about using Tilemap but for my sprites I use different sizes, I couldn't find how to add a tilemap with varied scala.

I think I'll have to use the RenderTexture to see how it goes.

[ivan.popelyshev]

>  I couldn't find how to add a tilemap with varied scala.

oh right, there is no scale

Well you can just copy all its ts files to your project and add it, its not that difficult

Basically, tilemap is a glorified Mesh-shader combo: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js , and internally it fills up array with points/textures, processes it to an array then shader gets it. If the contents weren't cleared/refilled, next frame will be just one drawcall , without any other functions.

Graphics beginTextureFill() works almost the same but it just is .. bigger. seriously bigger.

[Yeferson]

Do you mean to copy the Tilemap files to add the function multiple scales? I think it's a very good idea, I'm going to do it but if I have any complications along the way then I'll write to you to help me

[Yeferson]

I have a question, before I embark on the adventure. I would like to know if I can create a batch rendering with different textures using Geometry (https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js)? Do you think that if it would help me improve my performance?

[ivan.popelyshev]

Your environment is that slow it cant support hundreds of sprites in batching. Tilemap and mesh-shader is baking single geometry that can be used every frame. If you add batching there, well, you slow down JS side again.

[Yeferson]

Hello, me again.
I have been trying to create the multiple scales in tilemap but I run into a problem, from what I understand, tilemap paints all the textures on a single mesh, right? that is, to make it work multiple sizes do I have to create a copy of the texture and use setSize ()? I need guidance on this problem pleas.

[ivan.popelyshev]

it has like 11 params for addRect. You can add 2 more , and specify them in shader

[Yeferson]

I did it, add a "scale" parameter inside options, and scale the size of that point but the texture is not scaled, it appears cut off

 

I am not an expert in shader, can you guide me on how to change the size of the texture by shader? or should the vertices be modified? I have read about Webgl, glsl, etc but I can't find the solution.

[ivan.popelyshev]

here we push tile size: https://github.com/pixijs/tilemap/blob/c3f1095d3c23183f35da8d5d4d121ae9e484e454/src/Tilemap.ts#L276-L277 

the problem is that we need two separate widths: one for texture, one for rect. Whatver is tileWidth? its yours to decide. Suppose you put both in "points" array.

Next, here is UV calculation based on that "points" , choose which "w,h" you want wisely: https://github.com/pixijs/tilemap/blob/c3f1095d3c23183f35da8d5d4d121ae9e484e454/src/Tilemap.ts#L546-L553  

here, totally in three places, are rect vertices, swap "W,h" to whatever you take from points: https://github.com/pixijs/tilemap/blob/c3f1095d3c23183f35da8d5d4d121ae9e484e454/src/Tilemap.ts#L599-L600

Edited July 16, 2021 by ivan.popelyshev

[ivan.popelyshev]

Honestly, i can do it in 10 or 15 minutes just fine, but i have 10 plugins like that and many cries for help.

I dont know whether the plugin will help you, because there might be other CPU-intensive places in your app that you dont know about.

 

[Yeferson]

I already profile and looked closely, I had intensive use in my grid, this because every time the camera moves it adds another column or row, and adds all the sprites that that grid contains.

That's the abnormal in the profile, so if I fix that using tilemap then I won't need the grid.

[Yeferson]

32 minutes ago, ivan.popelyshev said:

here, totally in three places, are rect vertices, swap "W,h" to whatever you take from points: https://github.com/pixijs/tilemap/blob/c3f1095d3c23183f35da8d5d4d121ae9e484e454/src/Tilemap.ts#L599-L600

Do you mean that if I edit the size of the vertex (which is a quad) then the size of the texture is edited?
To test change the size of Width and Height by forcing both to 50 and what I show you in the image above happened, the texture is cut but not scaled.

[ivan.popelyshev]

> That's the abnormal in the profile, so if I fix that using tilemap then I won't need the grid.

you still need kind of grid, just to group up many sprites into one tilemap

>Do you mean that if I edit the size of the vertex (which is a quad) then the size of the texture is edited?

Yes, you have to 1

1. add extra width, height in method params

2. put it in points,

3.calculate uv based on corresponding width/height

4. calculate vertex based on corresponding width/height

right now w,h are used for both

[Yeferson]

Ready, I did it: D
Just add one more parameter (options.scale).

1. Add scale in options params.
2. Multiply that scale by tileWidth and tileHeight
3. Put scale in points.
4. Create a new element "SCALE" in the enum "POINT_STRUCT"
5. Add an "aScale" attribute in tilemap.vert and TilemapGeometry and set the vertSize variable to 14, also pass aScale as vScale in tilemap.vert.
6. Add a varying "vScale" in tilemap.frag.
7. In shaderGenerator divide 1.0 / vScale and multiply that value by uSamplerSize. textureCoord * uSamplerSize [$ {i}] * (1.0 / vScale)
8. Finally add my scale to vertexBuf and voila.

Thank you.

[ivan.popelyshev]

Now you know how it feels to make a production-ready feature for webgl. You have to go through several layers of data transforms and modify them all. If architecture of renderer/plugin is good enough - you can do that easy enough. This is real stuff, not a webglfundamentals demo or udemy course.

[Yeferson]

I had never used webgl, and shaders only a little bit in Unity3d, but a couple of videos from The Cherno, your guidance and following the logic of the code were enough.

Thank you.

[Yeferson]

Now I need an anchor for the textures.
Ah sh**, here we go again.

[ivan.popelyshev]

> I had never used webgl, and shaders only a little bit in Unity3d, but a couple of videos from The Cherno, your guidance and following the logic of the code were enough.

look at Freya Holmer videos on unity  She's doing something i want to do too but in webgl.

> Thank you.

Well, you are good student

> Now I need an anchor for the textures.
> Ah sh**, here we go again.

btw there's defaultAnchor field in texture, might use that if you like addRect(texture) and not specify other params.

for anchor, its just an offset of X, you dont need extra elements, right?

[Yeferson]

Yes, it was simple. Add two more parameters to tilemap (options.anchorX and options.anchorY) then put the X and Y with the following modification (tileWidth and tile Height already have the scale alteration):

pb.push(x - tileWidth * anchorX);
pb.push(y - tileHeight * anchorY);

And ok, I'll see Freya Holmer.
Thanks again for your help.

Edited July 16, 2021 by Yeferson