1

I'm generating blurred drop shadows in WebGL by drawing the object to be blurred onto an off-screen framebuffer/texture, then applying a few passes of a filter to it (back and forth between two off-screen framebuffers), then copying the result to the final output.

However, I'm just dropping the RGB channels, overwriting them with the desired color of the drop shadow (usually black) while maintaining the alpha channel. It seems like I could probably get better performance by just having my off-screen framebuffers be a single (alpha) channel.

Is there a way to do that, and would it actually help?

Also, is there a better way to apply multiple passes of a filter than just alternating between two frame buffers and using the previous frame buffer's bound texture as the input?

1

Assuming WebGL follows GLES then per the spec (Page 91):

The name of the color buffer of an application-created framebuffer object is COLOR_ATTACHMENT0 ... Color buffers consist of R, G, B, and, optionally, A unsigned integer values.

So you can't attach only to A, or only to any single colour channel.

Options to explore:

Use colorMask to disable writing to R, G and B. Depending on what data layout your GPU uses internally you can imagine that could effectively achieve exactly what you want or possibly have no effect whatsoever.

Is there a way you could render to the depth channel instead of to the alpha channel?

Reducing memory bandwidth is often helpful but if it's not a bottleneck then you could end up prematurely optimising.

To avoid excessive per-frame ping-ponging you'd normally attempt to reform your shader so that it does the effect of all the stages in one. Otherwise consider whether there's any better than-linear way to combine multiple passes. Instead of knowing only how to get from stage n to stage n+1, can you go from stage n to stage 2n? Or even just n+2?

|improve this answer|||||
  • Thanks for the good advice! The shader in question is a Kawase blur, which gets approximately to stage 2n of a Gaussian blur at each pass, and without any fast way to further combine passes. – Ben Dilts Oct 27 '14 at 14:35
  • If I write just to a depth buffer, can I use the depth buffer as input to writing the depth buffer on the next pass, and as an input to writing the actual frame buffer's color channels on the last pass? – Ben Dilts Oct 27 '14 at 14:36
  • You can always read directly from the previous depth buffer (e.g. that's how one common shadowing algorithm works) but whether you can set a value directly isn't so straightforward. If you can sample in your vertex shader then you can move your logic from fragment shader to vertex shader and just output an array of points that hits every pixel. If your browser supports EXT_frag_depth then you can set the output depth directly in the fragment shader via the additional output gl_FragDepth. – Tommy Oct 27 '14 at 20:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.