Jump to content

Combining my own webgl code with pixi


Recommended Posts



I have tried to bind existing webgl code with Pixi. I want to put an adapter class into PIXI.Container but it doesn't seem to be that easy. I have inherited a small class from PIXI.DisplayObject and put that instance into Container.


The issues. Within the container I have Text sprites and these and my adapter instance are not working together.

First issue was wrong program.


  WebGL: INVALID_OPERATION: uniformMatrix3fv: location is not from current program


I fixed that by calling


  renderer.shaderManager._currentId = -1;


in my renderWebGL method to say that other Sprite needs to reload the program.

But I still have:


  [.WebGLRenderingContext-0x7f911d128d20]GL ERROR :GL_INVALID_VALUE : glBufferSubData: out of range


In the end webgl has too many errors and does not work anymore. And I have no glue how to fix that. So my questions are:


- What is the proper way to create new webgl objects that I can use with existing sprites etc. with Pixi?

- Is shaderManager._currentId = -1; right way to avoid program clash?

- What is the most evident cause of the glBufferSubData issue? E.g., Have I forgot to close something in my webgl code before giving execution to Sprite's code?








Link to comment
Share on other sites

Are you trying to do this with v2 or v3?


Have you looked at how other features in v3 (sprites for example) are implemented? We usually have an object (Sprite) and a renderer (SpriteRenderer). Without seeing your code there is no magical method that will fix your problems because I don't even know what you are doing wrong :)


The basic idea is that your object, when being rendered just ensures the proper renderer is set and renders itself. For example, Sprite#_renderWebGL:

Sprite.prototype._renderWebGL = function (renderer){    renderer.setObjectRenderer(renderer.plugins.sprite);    renderer.plugins.sprite.render(this);};

It is then the SpriteRenderer#render method's job to flush the batch if necessary and do other things. When the object renderer changes (switches to your custom renderer) the WebGLRenderer will call stop of the current renderer and start of the new one you passed in.


Hopefully that helps you get started making a custom Object and ObjectRenderer. The best thing to do is just mimic what our built-in object renderers do already.

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