Jump to content

What is the best way to implement my own shader?


Recommended Posts

I am working on a Bullet Hell game. To make it visually more interesting, I used glsl.js and wrote a shader that displays the game as if on a CRT screen.

More recently though, I figured out more about the inner workings of Pixi.js, and finally got the WebGLRenderer working. But now I have a performance problem:

-glsl.js reading from a Pixi.CanvasRenderer works fine(30fps), but starts to lag A LOT when there are a few more bullets on the screen.

-just a Pixi.WebGLRenderer without the extra glsl.js layer works extremely fast(60+fps), even with many bullets on the screen.

-Combining the Pixi.WebGLRenderer with glsl.js makes everything go horribly sluggish(15fps or lower).


Of course, the third option is what I want to use in the future. My best bet is that it is so slow is because Pixi.js places the Stage in a canvas, which is then again read by glsl.js. This step of placing image data and then grabbing it again is something that could be averted if I could pass the texture of a RenderTexture directly to glsl.js to be used as an Sampler2d object.


So... how do I do this? Or are there other, easier ways to implement my own shader right now using only PIXI.js?

Link to comment
Share on other sites

  • 6 months later...

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