Jump to content

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


Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

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.

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.


  • Recently Browsing   0 members

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