createPostProcess Continuous Loop on Playground

Happy Thanksgiving to the Support Team! I probably should be focusing on when to put the turkey in the oven but here i am, studying Babylon! :slight_smile:

I don’t understand the following example. https://playground.babylonjs.com/#KA93U#555

Why does it loop continuously between the “warpingPostProcess” and “nodesPostProcess”? I can see that both VAR definitions reference each other, but I don’t understand why it was built this way, nor why the postProcess warping can’t be stopped by commenting out 1 of the definitions.

I would like to separate the two processes to control the warp-IN and warp-OUT as separate functions. It might be an interesting effect to transition between different scenes (scene1 warps in, new scene2 warps out). Any suggestions how to break the loop into 2 separate 2D warp behaviors?

I am not sure what you mean by they reference each other.

Form what I understand from this playground, is it from the doc ?

It looks like there are 2 post processes running in sequence both based of time so they might use some kind of wrapping math like cos / sin … or mod functions to keep the values in a kind of looping range.

Hi! i meant the following:

Examining the playground code carefully there are TWO “postprocess” declarations, each with functions.

  1.   var postProcess = BABYLON.NodeMaterial.ParseFromSnippetAsync(postProcessShaderUrl, scene).then(nodesPostProcess => {
     nodesPostProcess.name = "PostProcessingMaterial"
     nodesPostProcess.createPostProcess(camera, 1.0);
    

    });

  2.  var warpingPostProcess = BABYLON.NodeMaterial.ParseFromSnippetAsync(warpingPostProcessShaderUrl, scene).then(nodesPostProcess => {
     nodesPostProcess.name = "WarpingPostProcessingMaterial"
     nodesPostProcess.createPostProcess(camera, 1.0);
    

    });

The second one ‘references’ the first declaration: var “nodesPostProcess” in a way that seems strange. I don’t see any cos function to explain the animation reversal. At first it seemed #1 was the first animation and #2 was the second animation but it doesn’t seem to work that way.

Is there another recommended way to achieve this effect?

btw - code is not from documentation sections. It was contributed by another user.

There’s no referencing between both post-processes, nodesPostProcess is a local variable in each case.

If you want to stop after the “warp in”, I guess you will to calculate the time it takes to get there, based on what the node material (the warping post-process) is doing…