Onion Skin Post Process?

Questions
21

You don’t need two effect wrappers as you have a single effect to use.

Also, you use samplers that you never set (textureSampler), so it can’t work.

Try this:
https://playground.babylonjs.com/#ZLB7Z2#3

How it works:

  • first frame: rttA is the texture red from (in the shader, sampler lastFrame), rttB is the texture written to
  • second frame: rttB is the texture red from (in the shader, sampler lastFrame), rttA is the texture written to
  • and so on

So, at each frame, the previous output (written) texture is used as the source texture, and the previous source texture becomes the output texture.

For this to work, however, you have to put something in the very first texture red from (rttA)…

In the PG, I make a rendering of the current scene, so it’s a read cube at the center of the screen.

Then, the shader simply samples the source texture and applies a coordinate scaling of 0.998 so that you can actually see some changes: the effect is a kind of a blurring toward the upper right corner of the screen.

Note also that it is working because the source / output textures are never cleared! So, the frames get accumulated one over the other, with a tiny shift each time (because of the 0.998 factor).

22

Thanks, Evgeni, but I must not be communicating the topic goal very effectively. If we remove the scaling factor from your Playground example, we simply get a frozen cube, rather than a blur of the spinning cube. What I’m trying to accomplish is something like this. (YouTube link)

None of my experiments are working, but in BJS–as best I can tell–we can’t simply blend the current pixels we’re drawing with what we drew for the last frame. It would have to be done like so:

  1. Render scene to Texture A.
  2. Multiply Texture B by 1 - OpacityFactor.
  3. Multiply TextureA by OpacityFactor.
  4. Add TextureA to TextureB.
  5. Display TextureB onscreen in place of the rendered scene, either with a custom PostEffect or some built-in method I’m not familiar with.
  6. Repeat for the next frame…
23

Ok, I understand better what you want to do.

Try this:

https://playground.babylonjs.com/#ZLB7Z2#4

Instead of passing the video texture as in the first PG, I pass a RTT in which the scene has been drawn into.

I can be a bit blocky, because I used 512x512 textures.

24

NOW I get it! That is amazing…

Here’s a documented version of the Onion Skin Effect playground, for future explorers: https://playground.babylonjs.com/#ZLB7Z2#6

3 Likes