Multiple WebGL (Pixi.Renderer) instances on the same screen?

[ShotgunJed]

Is it possible to have multiple webGL instances or Pixi.Renderer instances on one page?

For example, I'm trying to make a page that has many items in a grid (like an online store), and I was thinking of having one pixi.Renderer for each item. But then I would have about 20 of these instances which I don't really like, because it may not be as fast as having 1 renderer. I know I could use 1 renderer, but I want to merge the interactive Pixi graphics with html elements.

So I'm trying to do something like this:

https://threejs.org/examples/webgl_multiple_elements.html

The webgl render elements (the 3d shapes) are all placed within html divs.

The way that is achieved is by having 1 renderer, drawing all the shapes in a grid, and "splicing" or splitting the renderer, having different parts of the scene draw to different placeholder divs, in each item.

My questions:

1. Can Pixi.js do this "splicing"? i.e: 1 scene can render to multiple divs, and change the visible viewport, before rendering?

2. Is having 1 pixi renderer (fullscreen) = 20 small pixi renderers (fullscreen when put together) in regards to performance?

[ivan.popelyshev]

There's a limit for webgl contexts.

[ShotgunJed]

2 minutes ago, ivan.popelyshev said:

There's a limit for webgl contexts.

Hmmm thats a shame. Google says there is a limit of 16.

Is it possible for a Pixi renderer to render parts of the scene to multiple different divs?

[ivan.popelyshev]

Use CanvasRenderer

[ivan.popelyshev]

Yes, you can use multiple pixi renderers with same stage or different stages.

The idea is to write your own Application, instead of using baseline: https://github.com/pixijs/pixi.js/blob/dev/src/core/Application.js

This is mashup class for hello-world apps and demos. When you need extra renderer, extra stage, or anything else - you have to write your own App instead of this thing.

[Rok Slana]

On 4/19/2018 at 11:52 AM, ivan.popelyshev said:

Yes, you can use multiple pixi renderers with same stage or different stages.

The idea is to write your own Application, instead of using baseline: https://github.com/pixijs/pixi.js/blob/dev/src/core/Application.js

This is mashup class for hello-world apps and demos. When you need extra renderer, extra stage, or anything else - you have to write your own App instead of this thing.

Hi Ivan. Could you please point me to some code that uses multiple pixi renderers with one or different stages ?

I am currently working on an app and I need to include spine animations but I am unable to 'superimpose' them over the existing app.renderer without loosing what was previously rendered by pixi.

(I know that there is a pixi-spine library  that simplifies this but I wasn't able to use it as the documentation too sparse for my understanding - first time pixi & spine user).

I got the spine part working (web-gl runtime) as desired and I've got pixi part working but mashing them both together into a container,  renderer or whatever else is beyond my current understanding. Any pointers or suggestions? I am working with Vanilla JS.

Thank you!

Edited January 16, 2023 by Rok Slana

[jonforum]

On 1/15/2023 at 5:08 PM, Rok Slana said:

 without loosing what was previously rendered by pixi.

renderer have option `clearBeforeRender` 

https://pixijs.download/release/docs/PIXI.Renderer.html#constructor