Two questions about WebGL and FrameBuffers

[Qqwy]

Slowly, I am progressing with my bullet hell game. Right now, there are two mayor performance issues, however.

I am using PIXI.js, but because I need some WebGL features that are not yet implemented in PIXI, I resorted to doing much of the game using the CanvasRenderer and changing some stuff myself.

 

Of course, this is much slower. Thus I tried finding out how to do similar stuff in WebGL, but here I'm stuck. I have two questions which both have to do with WebGL's FrameBuffers:

 

1. How can I use a FrameBuffer or a webgl-enabled canvas and send it to a fragment shader to be used with the texture2d() function instead of a native canvas? I tried using glsl.js and doing this, but for some reason it doesn't work: I see one short flash of the texture and then the texture vanishes. I don't know if this is a glsl.js bug or if I am doing something horribly wrong.

 

 

2. How can I use blending modes similar to the canvas.context.globalCompositeOperation()  in the 2d native canvas API? For the collision map I want to change it to 'lighter', to ensure that the R, G and B channels don't influence eachother. Anyhow, how can I do something like this? From my understanding, the shaders only run after all the textures have put in the FrameBuffer. Am I correct in this assumption?

 

 

The test version, where you can see my two backbuffers and also how the glsl.js doesn't work with the PIXI.WebGLRenderer, can be seen here

 

I hope someone can help me with these problems.

 

Thanks,

~Qqwy