0

My Problem

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.

What I've Tried

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.

Where I'm Stuck

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!

JoeVictor
  • 1,806
  • 1
  • 17
  • 38

1 Answers1

1

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.

LJᛃ
  • 7,655
  • 2
  • 24
  • 35
  • Thanks so much, these resources are invaluable. When you say screen filling plane, do you mean I should create a rectangular plane that is the size of the screen and render to that? Do you have resources on that? – JoeVictor Nov 25 '22 at 18:41
  • 1
    Yes that's what I'm referring to, a screen space plane can be easily accomplished by simply specifying vertices directly in [NDC coordinates](https://stackoverflow.com/questions/58702023/what-is-the-coordinate-system-used-in-metal) [-1 ... +1] and setting them to `gl_Position` without any transformation. – LJᛃ Nov 26 '22 at 00:32
  • [finally got it to work!](https://i.imgur.com/JQYSoFp.png) sorta. I blur each direction (x,y) separately to save runtime the draw call. looks good enough for my needs! – JoeVictor Nov 26 '22 at 23:09
  • for future travelers: I actually did it somewhat differently than rendering to a screen filling plane, I did render to framebuffer, but run a single-x/y blur pass in the frag shader. at 60 FPS, it doesn't really look bad. Worst case I run two draw calls – JoeVictor Nov 26 '22 at 23:11