Too many active contexts

[philipshanson]

Noob question. I have a 100 individual components and I need to draw fill a vertical rectangle every 30ms in each component so I tried to use a canvas for the rectangle and then use webgl to render using pixi. The browser complains max 16 web context. I've found that chrome only allows 16 and then decided that was the wrong way to do it. 

What I want to do is have 1 larger hidden context then render all the rectangles at on offset to the hidden context. Then can I slice out each rectangle and apply it on a 1 to 1 basis to a canvas. This means I only have to use 1 context to render each canvas. 

How can I achieve this or is there a better way.

 

Thanks in advance

[ivan.popelyshev]

It will be slow as hell (rendertexture GPU <-> CPU). Its better to use CanvasRenderers for that.

[philipshanson]

I tried that it eats CPU. Rendering with canvas rendering uses tones of CPU and GPU where as using webgl on 16 contexts keeps the usage low. I was going to try 1 context and split it over all the rectangles and test the performance. I just didn't know the best way to use 1 context for many canvases 

 

Thanks for your response

[philipshanson]

Or am I using canvas rendering incorrectly.  Will post some code shortly

 

Thanks

[philipshanson]

I just use the webgl canvas or the canvas renderer by the boolean flag in the autoDetectRenederer. with webgl it dramatically reduces the CPU and uses the GPU. with canvas both the  CPU and GPU are higher. The CPU is too high with canvas.

 

const meters = {};

function drawMeter(canvas, key, level, peak) {
   if (!meters[key]) {
      const container = new PIXI.Container();
      const renderer = new PIXI.autoDetectRenderer(canvas.width, canvas.height, { view: canvas });
      const graphics = new PIXI.Graphics();
      container.addChild(graphics);

      meters[key] = {
         container: container,
         renderer: renderer,
         graphics: graphics
      };
   }

   meters[key].graphics.clear();
   meters[key].graphics.beginFill(0xFF0000);
   meters[key].graphics.drawRect(0, 0, canvas.width, canvas.height * Math.random());

   meters[key].renderer.render(meters[key].container);
}

 

Am I doing something wrong?

 

Thanks

[ivan.popelyshev]

I don't understand what are you doing. 100 canvases and only 16 webgl contexts are possible, and you have to destroy each webgl renderer when you dont need it anymore

[philipshanson]

I have attached a picture.

every cell is its own component the vertical rectangle can be drawn at different heights every 30mS. I have more that 16 of these components so I cant use a webgl context for each because you are only allowed 16. I can use a canvas for each but the CPU usage is very high. Could I use just 1 webgl context and some how map a slice of that context to the correct canvas

 

Thanks sorry if Im not making any sense

[ivan.popelyshev]

You can render all that page with one canvas, right? Background sprite - all the static components, render it only when you need to change some numbers. All other sprites are Textures with same BaseTexture, you just change their region.

[ivan.popelyshev]

Also, you can just add all those div's you have ABOVE the canvas  

[philipshanson]

No each meter has a small canvas for the rectangle 

[ivan.popelyshev]

As I said, you can use one big canvas that lies underneath your HTML, just make your div container transparent 

[ivan.popelyshev]

And I believe that 100 CanvasRenderer's will work too. Just use only one ticker for them. For that kind of task i even could use pure canvas2d api, its not that big problem  

[philipshanson]

yes and then overlay my meters over the top. it would work for that example.

What I want to try and do is this. looking at the picture I have provided. the top canvas is 1 canvas painting using webgl. it has 2 different colour bars bouncing up and down. underneath I have 2 other canvases. I want the first 1 underneath to show the red bar from the top canvas context and the  2nd to show the blue. both should be eith done bu scissoring or setting a viewport or however this can be achieved. Do you know how to do that?

[philipshanson]

If I can do that I can scale up that  technique. I will performance test it too

 

thanks

[ivan.popelyshev]

@philipshanson i told you possible solutions. You are over-complicating things, don't go there. But if you go there, please don't take me with you.

[philipshanson]

Ok no problem. Thanks for.the advice. I will try 1 large canvas and offer the rectangles then over lay the meters Thanks

[philipshanson]

I have built a simple test just using multiple canvases and canvas 2d and it's fine. Thanks for your advice and help. Keep it simple

[ivan.popelyshev]

@philipshanson I'm glad that it worked for you