How can I use multiple shaders efficiently?

Neither I want to merge multiple shaders into a single complex shader nor I want to call multiple shaders from a single shader (as this is not efficient ). Is there any other way to do this?

It is a big vague… Do you have some examples that would show inefficiencies?

What do you mean by “calling shaders”?

Yeah I mean, suppose I want to create two filters: gyayscale and invert, so I create two different fragment shaders and use them with BABYLON.shaderMaterial. Now let’s say I want another filter which uses both grayscale and invert , so now I have two options:

  1. Create a new shader altogether which can perform both these operations and give the final output to gl_FragColor which will be reduntant
  2. Create a new shader and include the grayscale and invert shaders in it, which means this time I am calling gl_FragColor two times(once to get the output of grayscale and then to get output of invert) which is expensive

I don’t want to use any of the above options, so is there any other way to do this?

I don’t think writing to gl_FragColor is so expensive, but in any case you can make your two functions return a rgba color instead of writing to gl_FragColor directly:

https://playground.babylonjs.com/#6GFJNR#8

@Evgeni_Popov there was some confusion regarding the use of shaders.
Basically what we want is to apply two or more different fragment shaders one after the other, using intermediate textures and frame-buffers. This is similar to what GPUImageFilterGroup does in the gpuimage library (for iOS and Android), in case you are familiar with it.

Also, we are applying these on a 2D image.

I don’t know this library.

If I understand it well, what you want is applying some post processes one after the other?

Maybe setting up a repro of what you currently have would help understand your needs.

1 Like