Jump to content

Is there a way to render sprites faster for mobile?


Recommended Posts

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:(

Link to post
Share on other sites

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 by ivan.popelyshev
Link to post
Share on other sites

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.

Link to post
Share on other sites

 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.

Link to post
Share on other sites

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?

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

image.png.f7cb55464412f1fc481867f4b776d192.png 

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.

Link to post
Share on other sites

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 by ivan.popelyshev
Link to post
Share on other sites

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.

19913089_2021-07-1611-02-22.thumb.gif.f4d8d4e42ceeafdbeafc57079b897c8a.gif

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

Link to post
Share on other sites
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.

Link to post
Share on other sites

> 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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

> 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?

Link to post
Share on other sites
Posted (edited)

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 by Yeferson
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...