Jump to content

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


Johnny Kontrolleti
 Share

Recommended Posts

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 by Johnny Kontrolleti
Link to comment
Share on other sites

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 😄

Link to comment
Share on other sites

 

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 by ivan.popelyshev
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by Johnny Kontrolleti
Link to comment
Share on other sites

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? :) 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by Johnny Kontrolleti
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...