The source of the problem starts with me trying to apply a "glow" or a "halo" effect to whatever is outputted by the fragment shader.
The way I found I should do this is by using a post-processing filter to the output. I'll render the image once blurred, and another time on top of it but normal. This leads to the effect I need aka: "Bloom" effect.
It seems like adding a framebuffer needs an Image not a fragment shader output? I'm not exactly sure how to add that to the pipeline... I'm kind of lost here as to how to go from here since all the tutorials online are either not using WebGL or using WebGL to post-process images...
This is all fairly new to me, any suggestions would be greatly appreciated!
Image is a DOM construct and foreign to WebGL, texImage2D allows reading an Image's pixel data into a texture.
A framebuffer has color and depth attachment targets, one can attach either renderbuffer or texture resources to those targets, the difference is that textures can be read in shaders whereas renderbuffers can not. When a framebuffer is bound using bindFramebuffer everything that is rendered ends up in the attachments, rasterized depth in the depth attachment, fragment shaded color output in the color attachment(s).
When you want to do post processing you render your base image into a framebuffer with a texture attachment, then unbind the framebuffer to render to the screen again but bind the texture that is attached to the (now disabled) framebuffer so that you can sample from it in a shader that renders a screen filling plane.
This process is also explained here, altough instead of rendering the output to a screen filling plane it is rendered onto a bunch of cubes.