Use a webgl context from a third party library?

[rks]

Hi, I just joined this form and am very new to the webgl development, so my apologies in advance if this is a question that does not really make sense. 

I am currently trying to use PIXI.js with a third party data visualization library. 
One of the classes in this third party library provides a way to customize the way it renders graphics. 
In the sample application, they do this by writing a raw webgl but I would love to do this using PIXI.js if possible.

This class passes webgl context (this.context) so we can do something like below. 

const gl = this.context; // webgl context used by the third party library
const vs = gl.createShader(gl.VERTEX_SHADER);
...

So to use this context in PIXI.js, I tried

const renderer = new PIXI.Renderer({
context: this.context,
clearBeforeRender: false
})
...

However,  after I called renderer.render(stage), I see some graphics (what I drew using PIXI.Graphics) for an instance and I lost all of them.. 

I see a bunch of error logs in the developer console. 

2core.js:6180 unsupported index buffer type: uint32
push../node_modules/@pixi/core/dist/esm/core.js.GeometrySystem.draw @ core.js:6180
push../node_modules/@pixi/graphics/dist/esm/graphics.js.Graphics._renderDrawCallDirect @ graphics.js:2962
push../node_modules/@pixi/graphics/dist/esm/graphics.js.Graphics._renderDirect @ graphics.js:2947
push../node_modules/@pixi/graphics/dist/esm/graphics.js.Graphics._render @ graphics.js:2861
push../node_modules/@pixi/display/dist/esm/display.js.Container.render @ display.js:1797
push../node_modules/@pixi/display/dist/esm/display.js.Container.render @ display.js:1800
push../node_modules/@pixi/display/dist/esm/display.js.Container.render @ display.js:1800
push../node_modules/@pixi/core/dist/esm/core.js.Renderer.render @ core.js:10290
tilesChanged @ data.ts:122
a.<computed> @ Accessor.js:5
update @ BaseLayerViewGL2D.js:5
processUpdate @ LayerView2D.js:5
_updateLayerView @ FrameTask.js:5
forEach @ Collection.js:5
update @ FrameTask.js:5
(anonymous) @ scheduling.js:5
forAll @ PooledArray.js:5
x @ scheduling.js:5
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
requestAnimationFrame (async)
j @ scheduling.js:5
14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 5
14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 6
14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 7
14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 8
14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 9
14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 10
14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 11
14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 12
14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 13
14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 14
14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 15

Unfortunately, even after searching an answer in google for a few hours, I don't still understand what these errors indicate.. 
If somebody could give me any advise or insight, it would be highly appreciated.

Thank you very much. 

Edited April 27, 2021 by rks

[ivan.popelyshev]

Pixi has special method, "renderer.reset()" that resets all the pixi state cache and unbinds current vao/buffers. If your renderer has something like that, then you can just reset them both before and after usage, and it'll work.

I did it many times with pixi and threejs. You can even share textures if you know how to inject existing webgl objects in renderer wrappers.

 

Edited April 27, 2021 by ivan.popelyshev

[rks]

Hi, thank you very much for your reply. 
I am really glad that you have done something similar with other library (three.js). 

According to the document, the third party library seems to reset the state for me

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-2d-layers-BaseLayerViewGL2D.html#render

"Every time that render() is called, the API automatically resets WebGL to a conventional state which is almost the default one; the only two things that may be non-default are the bound framebuffer and the viewport, which is set to match the entire framebuffer."

Inside render(), I do something like below. 

this.renderer.context = this.context;
this.renderer.context.supports = {"uint32Indices": false}; // this is to avoid the "unsupported unsupported index buffer type: unit32" error
this.renderer.context.extensions = {}; // extensions cannot be undefined

const mygraphic = new PIXI.Graphics();
mygraphic.beginFill(mycolor, 0.5);
mygraphic.drawCircle(x, y, 20);
mygraphic.endFill();

this.stage.addChild(eachTile);
this.renderer.render(this.stage);
this.renderer.reset();

Now I was able to make some errors disappear but I still see many warnings. 

[.WebGL-0x113906e00]RENDER WARNING: there is no texture bound to the unit 1
17[.WebGL-0x113906e00]RENDER WARNING: there is no texture bound to the unit 2
17[.WebGL-0x113906e00]RENDER WARNING: there is no texture bound to the unit 3
17[.WebGL-0x113906e00]RENDER WARNING: there is no texture bound to the unit 4
17[.WebGL-0x113906e00]RENDER WARNING: there is no texture bound to the unit 5
17[.WebGL-0x113906e00]RENDER WARNING: there is no texture bound to the unit 6
17[.WebGL-0x113906e00]RENDER WARNING: there is no texture bound to the unit 7
17[.WebGL-0x113906e00]RENDER WARNING: there is no texture bound to the unit 8
17[.WebGL-0x113906e00]RENDER WARNING: there is no texture bound to the unit 9
17[.WebGL-0x113906e00]RENDER WARNING: there is no texture bound to the unit 10
17[.WebGL-0x113906e00]RENDER WARNING: there is no texture bound to the unit 11
17[.WebGL-0x113906e00]RENDER WARNING: there is no texture bound to the unit 12
17[.WebGL-0x113906e00]RENDER WARNING: there is no texture bound to the unit 13
17[.WebGL-0x113906e00]RENDER WARNING: there is no texture bound to the unit 14
17[.WebGL-0x113906e00]RENDER WARNING: there is no texture bound to the unit 15
localhost/:1 WebGL: too many errors, no more errors will be reported to the console for this context.

Would you be able to give me some advises on what these warnings might indicate?
Hope I still have a hope to get this working.. 

Edited April 28, 2021 by rks

[ivan.popelyshev]

need minimal demo. Yeah, framebuffer might be issue, add "renderer.reset()" before "render" too :)))

[rks]

Hi, thank you very much for your reply. 

I created a small demo in codepen reproducing the issue.
https://codepen.io/SKoji/pen/dyNEOeG?editors=1000

Please let me know if you have any issue accessing it. 

 

>>add "renderer.reset()" before "render"
This seems to be not possible cause the render() method is called by the library, not myself.

[rks]

Hi, sorry to bring this up again. 

After some research, I found these warning messages of "RENDER WARNING: there is no texture bound to the unit" are unique to Chrome and Safari or Firefox do not generate these warnings. 
Some people encountered the same warning messages and successfully get rid of them by making sure loading textures are finished before render. 

https://stackoverflow.com/questions/61727816/threejs-there-is-no-texture-bound-to-the-unit-1
 

Is there anyway to do the same with this in pixijs?
 

[ivan.popelyshev]

PixiJS binds only existing textures. However with all going on in reset() there's probably a case we missed that leads to unbound texture when multi-texture batcher works. However I'm sick in bed, so you have to wait for someone else to do it, or find on your own , its all in TextureSystem , and batcher does its thing through binding textures array somewhere in the same file, or maybe in BatchSystem / AbstracthBatchRenderer

Edited May 3, 2021 by ivan.popelyshev

[ivan.popelyshev]

You can also move it to pixijs github discussions , there might be more people from the team

[rks]

Just created an issue in the github repo.
https://github.com/pixijs/pixi.js/issues/7464

Thanks.