Any way to integrate pure webgl code in graphic hierarchy of pixi?

[br77mont]

Hi, currently we are developing a complete graphic runtime based on the great pixi.

I need to integrate pure webgl code in this runtime.

My question: is it possible to implement my own derivated Pixi item based on (PIXI.Graphics,or PIXI.Container or ?)  ? It has to be able to contain pure webgl code and continue to be part of the stage hierarchy of pixi.

If not I see may be 2 solutions:

1 )Create a second canvas (one for pixi, one for a pure webgl component)? In this case I am afraid about performance?

2) refresh pure webgl code (external to pixi) over each pixi hierarchy refresh. I have done a simple test about . I am able to get pixi gl context (pixiapp.renderer.gl) and use pure webgl on it . it works , but by default all items related to pixi are cleared..) 

Any help about how to will be really appreciate
best regards

[Exca]

Yes it is possible. You can do a custom plugin for the renderer.

There's one example for V4 here https://github.com/pixijs/pixi-plugin-example

For V5 I'm not sure if there's examples done for that yet.

[ivan.popelyshev]

There a three ways to work with pure webgl in pixi.

1. Use pixi webgl abstractions: Geometry, Buffers, Shaders, e.t.c  Also, you can use texImage2D-related things in TextureResource, https://pixijs.io/examples/#/textures/gradient-resource.js

2. Render part of tree, call "renderer.reset();" , do whatever you want, call "renderer.reset();" again. Suited for integrations with other renderers like threejs and babylonjs

3. create separate canvas, do all your rendering there, and even if its webgl, "PIXI.Texture.from(myCanvas)" will make it into a texture. simple "texture.update()" will update that. Its undocumented feature of browsers, suited for integration with not-so-good documented renderers like Skia. Its basically copyTexSubImage2D , I traced how chromium does it.

If its your own custom webgl code,  and not some strange external thing, I recommend to use pixijs webgl abstractions. All VAO's , buffers, almost everything is mapped to it, your code will look much better. Yes, you can also use it and pure webgl operations at the same time if you make renderer plugin like @Exca said. Code is basically the same, I'm gonna update that thing in a few days.

[ivan.popelyshev]

Another thread I recommend to read: 

 

[br77mont]

I really appreciate all these answers...

Thanks a lot.

I will begin  to invsetigte with a simple webgl code.. My aim is to be able to integrate a mapcontrol (leaflet or other..) (as pixi plugin?) 

Bruno

[ivan.popelyshev]

I think I remember their code, but I dont remember if it was pixi-related or something else. yeah, you need a way to map their transforms to pixi transforms. Pixi has "position,scale,rotation,-pivot" order, its not difficult to make a pair of containers to emulate other behaviours. Its more about integrating math, and not webgl operations.