Jump to content

Use a webgl context from a third party library?


Recommended Posts

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 by rks
Link to post
Share on other sites

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 by ivan.popelyshev
Link to post
Share on other sites
Posted (edited)

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 by rks
Link to post
Share on other sites

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?
 

Link to post
Share on other sites

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 by ivan.popelyshev
Link to post
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.

Guest
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.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...