I am stuck in low FPS.

[caymanbruce]

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.

[ivan.popelyshev]

@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.

[caymanbruce]

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. 

[ivan.popelyshev]

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

[Taz]

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

[caymanbruce]

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.