How do I create an interlaced shader effect?

Questions
1

I want to add an interlaced shader effect, maybe using post-processing where there is almost like a CRT type overlay.

Interlaced

image
image640Ă—560 63.3 KB

Vs

Non-interlaced

image
image901Ă—673 84.1 KB

How can this be achieved? thanks

2

Hi, don’t know if you’d like to use CSS for this, but I just put in these lines for the container surrounding the canvas:

    #container {
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    #container.scanlines:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      touch-action: none;
      background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 2px);
    }

I took this from a game someone posted on this forum. I can’t find the post right now though.

Also, not sure if a shader is better for this, but this did the trick for me.

3

nice find! I will try this out. thanks

4

I made one using nodeMaterial, here is the material address
Babylon.js Node Material Editor (babylonjs.com)

Then there is pg
Babylon.js Playground (babylonjs.com)

image
image2244Ă—1100 167 KB

5

There is this post effects too that might have it. I forgot all the ones this has.

When I get up this morning ill dig and I might be able to find the exact effect.

Shadertoy might have a “CRT” effect that would work too.

6

I don’t know if it’s the effect you want
F4E6(J20GEUCLKF_BC6%W

7

I made one a bit like that with a node post process: Morph Target Space Travel | Babylon.js Playground (babylonjs.com)

8

thats fantastic! UFO flying about is pretty sweet