Bend/Curve PIXI.text() like screen of an old tube tv

[Johnny Kontrolleti]

I'm all new to WebGL and Pixi.js - I started digging into this, because of this exact effect I'm trying to achieve: Demo

As of now I got a scroll with multiple text object created using PIXI.Text() - this works fine, it's scrollable etc. 
But unfortunately I'm stuck implementing that kind of old tube tv screen bend effect on the text - don't even know where to start. Can I achieve this using pixi.js?

I'm thankful for every hint! Do I need a different approach?

That's how I init each text of mine: 

constructor($el, stage) {
    this.stage = stage;
    this.title = $el;

    this.text = new PIXI.Text(this.title.innerHTML, {
        fontFamily: "Unno",
        fontSize: 120,
        fill: "transparent",
        stroke: "white",
        strokeThickness: 1
    });
    this.text.resolution = 2;

    this.getPosition();
    this.stage.addChild(this.text);

    this.addListeners();

    const font = new FontFaceObserver("Unno");
    font.load().then(() => {
        this.text.updateText();
    })
}

getPosition = () => {
    const {width, height, top, left} = this.title.getBoundingClientRect();
    this.text.position.set(left, top);
};

...

 

Edited April 29, 2020 by Johnny Kontrolleti

[ivan.popelyshev]

Yes yo do . filter for this effect was posted here many times, but you have to search for it  Search "filter" in "this forum". maybe "curve" or "tv screen".

Edited April 29, 2020 by ivan.popelyshev

[Johnny Kontrolleti]

23 minutes ago, ivan.popelyshev said:

Yes yo do . filter for this effect was posted here many times, but you have to search for it  Search "filter" in "this forum". maybe "curve" or "tv screen".

I've been trying to achieve this effect for days now ?I'm desperate.. and somehow I haven't been able to find this effect filtering this forum - I'll probably need help for this as well ?

[ivan.popelyshev]

 

Here's v5 version: https://jsfiddle.net/Hackerham/0vftxLzn/17/ It has to be applied to a container that has bounds (calculated by chilren) that cover your "TV screen" or you have to deal with re-positining that way only your text is curved. 

You can use just a graphics with rect of alpha=0 or without fill/line to make such object.

 

Edited April 29, 2020 by ivan.popelyshev

[ivan.popelyshev]

If might re-position it so only your text gets curved, because filter is actually performance-heavy thing and the less pixels it filters the better , but that will require knowledge and experience with shaders and pixi filters in general.

It also might be not the same effect you want, so please give me more input if you want better help.

[Johnny Kontrolleti]

2 hours ago, ivan.popelyshev said:

If might re-position it so only your text gets curved, because filter is actually performance-heavy thing and the less pixels it filters the better , but that will require knowledge and experience with shaders and pixi filters in general.

It also might be not the same effect you want, so please give me more input if you want better help.

Thank you! I appreciate your effort!! 

I tried to somehow combine your v5 pen with my code, but I failed - for now I tried to apply the filter to the PIXI.Container() which includes all of my text. 
What I didn't understand was the filter.apply() function and the respective variables like output/input etc. 

Here's a codepen of my code: https://codepen.io/magiix/pen/NWGvXEe

In the end I want to achieve something like this: https://edoardosmerilli.com/overview/ and I think that might be possible applying that filter to the container (correct me if I'm wrong, I completely new). Though applying the filter to the container is probably bad performance wise, it'll do for the beginning.

Thanks again! 

Edited April 29, 2020 by Johnny Kontrolleti

[Johnny Kontrolleti]

15 hours ago, ivan.popelyshev said:

It also might be not the same effect you want, so please give me more input if you want better help.

Ok I think I achieved to apply the filter to the PIXI.Container: https://codepen.io/magiix/pen/NWGvXEe

Thanks again! 

How can I modify the filter to achieve more of an effect like here: https://edoardosmerilli.com/overview/
Don't get me wrong, the current state is almost what I want, but I need a little more bend/curve horizontally/on the y-axis - right now it seems there's only a bend on the x-axis/horizontally.

It's hard to explain, but I think it's clear if you take a look at the example above, focusing on the vertically on scroll appearing and leaving content.

What do I need to modify therefor?  

[ivan.popelyshev]

Sorry, that's not something im ready to teach you at the moment, it will require too much time if you dont have experience with filters and shaders  You have to go through all filters examples and maybe make a few of your own before I can make advices about that thing.

Or just try to change every small variable and look at results.

[ivan.popelyshev]

I recommend to start from https://webgl2fundamentals.org/ 

[Johnny Kontrolleti]

2 hours ago, ivan.popelyshev said:

I recommend to start from https://webgl2fundamentals.org/ 

Thanks again! Appreciate your work!

[Johnny Kontrolleti]

On 4/29/2020 at 10:07 PM, ivan.popelyshev said:

It also might be not the same effect you want, so please give me more input if you want better help.

I just encountered one problem. When you scroll, if you take a look at the initial A of "Auriga" the following codepen https://codepen.io/magiix/pen/NWGvXEe - there's a small line attached to the bottom left of this char. How so?

I reckon it's cause by the shader - how can I prevent this?

Edited May 4, 2020 by Johnny Kontrolleti

[ivan.popelyshev]

Try `filter.padding=10` . but pixi v5 fits to screen before it pads the area, so its better to do it yourself:

container.filterArea = element.getBounds(true, element.filterArea);
container.filterArea.fit(renderer.screen);
container.filterArea.pad(10}; //maybe more if you see that effect again

where container is your "app". I just dont want to post it that other people will copy and they have "app" as Application usually  its good that you dont use that mashup class

[ivan.popelyshev]

Btw, performance-wise I dont think it can be done more optimally than that without very big efforts, and only one fullscreen filter (with padding) does not consume much. If you want to save use battery, you can render frames only when text was scrolled, you can write that "optimization" at any time