Jump to content

I am stuck in low FPS.


caymanbruce
 Share

Recommended Posts

7 hours ago, Jinz said:

You can confirm canvas renderer like this for instance:


console.log(app.renderer instanceof PIXI.CanvasRenderer ? "Canvas" : "WebGL");

Also for the latest API version options is the first and only parameter for the Application constructor so you don't need to pass (0, 0, options) just (options): Doc

UPD: oh yeah;) Pixi already logs the renderer type for you but are sure it doesn't log "Canvas" when you use forceCanvas:true option?

 

7 hours ago, Jinz said:

How many are you rendering to each RenderTexture? The trick is to render many DisplayObjects to the RenderTexture, so that it will only take one draw call per-animation-frame to draw them, and then at a slower rate you can update the DisplayObjects and re-render them to the RenderTexture. But like's been said there's memory limitations to consider too..

I render it on every PIXI.Graphics object. Maybe that is the problem. But I don't know how to render it as a whole. Here is a small demo I make on a tiny map:

 

How to improve this?

In this small demo I am pretty sure it logs as WebGL when I turn on WebGL. You can see I have set "forceCanvas:true" in the Application.

And here is the log info.

webgl.png

Link to comment
Share on other sites

7 minutes ago, ivan.popelyshev said:

@caymanbruce At this point, I recommend you forget about pixi for some days and try to do your stuff with just canvas2d, maintaining huge "chunks" of food 256x256 pixels in different canvases, overlapping. You have to figure out an algirithm itself.

Ah that'll be a long battle. When I began my project I started with Canvas2D but after a few months of struggling I found PIXI. Now I thought I am so close to finishing my game but I have to rewind back. :(

Link to comment
Share on other sites

You dont have webgl available, and that means this thing and im repeating it one more time => You have to write an algorithm that caches huge chunks of foods in offscreen canvases (in pixi its renderTexture) and updates them only when they are changed. Make it 300x300 with overlaps. 

So, two options:

1. Implement this algorithm either for pixi either for canvas2d

2. Switch to WegGL

Link to comment
Share on other sites

I just changed Pixi.js version from 4.4.2 to 4.5.3 and the forceCanvas option now works. Not sure why it doesn't work with the older version (even with options as 3rd param or as 1st) but TBH I would just upgrade to new Pixi.js version and move forward.

Only thing else I can add is to read guides/tutorials/posts that show strategies for using offscreen canvases and try to implement with RenderTextures - also prob many of those about "efficient html5 canvas" will have an applicable section about offscreen canvases...

Link to comment
Share on other sites

14 hours ago, ivan.popelyshev said:

You dont have webgl available, and that means this thing and im repeating it one more time => You have to write an algorithm that caches huge chunks of foods in offscreen canvases (in pixi its renderTexture) and updates them only when they are changed. Make it 300x300 with overlaps. 

So, two options:

1. Implement this algorithm either for pixi either for canvas2d

2. Switch to WegGL

thanks i havent looked into this optimization before. i dont have enough time to rewind back to pure canvas2D APIs for now. Do you mean i can still do the optimization with PIXI using canvasRenderer? If so i am a bit released. Otherwise i might need to switch to webGL and rewrite it with Canvas2D later when I feel necessary.

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...