Multiple processes blend not working

Bugs
1

Hello, im trying to create 2 postprocess passes. First just draws background, then another one blends into the previous one.

According to docs I should use :

  postProcess.autoClear = false;
 postProcess.alphaMode = BABYLON.Engine.ALPHA_COMBINE;

but it doesnt work. Previous post process is cleared completely anyway.

Pseudocode:

  var postProcess = new BABYLON.PostProcess("bg", "./bg.shader", ["iResolution", "iTime", 
"mouse"], ["iChannel0"], 1.0, camera);
var postProcess2 = new BABYLON.PostProcess("letters", "./letters.shader", ["iResolution", "iTime", 
"mouse", "noktoFactor"], ["iChannel0"], 1.0, camera);
 postProcess2.autoClear = false;
  postProcess2.alphaMode = BABYLON.Engine.ALPHA_COMBINE;

And just using
postProcess.onApply = function (effect) {} and postProcess2.onApply = function (effect) {}

Shaders:

bg:

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 vUV;
uniform sampler2D iChannel0;
uniform vec2 mouse;
uniform vec2 iResolution;

void mainImage(out vec4 f, in vec2 w)
{
    vec2 u = w/iResolution.xy; // left-bottom is (0,0)
    float dist = distance(u, mouse);
    float distFactor = 10.0;
    vec4 black = vec4(0,0,0,1.0);
    vec4 textureColor = texture2D(iChannel0, u);
    f=mix(textureColor, black, dist * distFactor);
}

void main()
{
    mainImage(gl_FragColor, vUV * iResolution.xy);
}

letters:

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 vUV;
uniform sampler2D iChannel0;
uniform vec2 mouse;
uniform vec2 iResolution;
uniform float noktoFactor;

void mainImage(out vec4 f, in vec2 w)
{
    vec2 uv=vUV;
    float dist = distance(uv, mouse);
    float distFactor = 10.0;
    vec4 black = vec4(0,0,0,1.0);
    vec4 textureColor = texture2D(iChannel0, vUV);
    f=mix(textureColor, black, dist * distFactor);
    f.a = 0.0; // I just want to preserve the old background.
}

void main()
{
    mainImage(gl_FragColor, vUV * iResolution.xy);
}

Using latest v.

2

This one is impossible to troubleshoot without a repor in the playground unfortunately, as it should definitely work.

4

https://www.babylonjs-playground.com/#DLZQXL#1 here, please take a look. Expecting second postprocess to just add some redish look.

5

Your example is actually not intented to work as you can not share the output of both process, here you simply want to add a full screen quad on top of the previous one, doing with post process would not be a blend operation (they are reserved to blend over the previous result of the same post process).

You could nevertheless do it with PP like this: https://www.babylonjs-playground.com/#DLZQXL#6

1 Like