Can't get grid shader to work (v3 to v5)

[Zealot]

I'm looking to generate a basic grid using a shader, and I've came across this Codepen which fits what I'm looking for.

Only issue is: it's using Pixi v3, I've been looking into the documentation to port this code to work for a v5 filter, with no success so far. I'm still in the process of learning about shaders and filters, and the original code is already 2 versions outdated. Any help would be greatly appreciated.

Cheers!

Edited January 7, 2020 by Zealot

[ivan.popelyshev]

There were countless threads like this. I've remade many shaders and i can help you after you make at least two tries

those are our filters:

https://github.com/pixijs/pixi.js/wiki/v5-Creating-filters

https://github.com/pixijs/pixi.js/wiki/v4-Creating-filters

You need fullscreen mode, compatible with v3, "container.filterArea = renderer.screen". You also need to move uniforms to new format - just values, "type" is not needed.

In case you don't actually need a filter content , its better to rewrite it to mesh shader: https://pixijs.io/examples/#/mesh-and-shaders/triangle-color.js

The basic distinction - you need extra framebuffer? you don't know what framebuffer is? Don't use filter, use mesh shader, its simpler.

Welcome to the forums!

 

Edited January 6, 2020 by ivan.popelyshev

[Zealot]

Hi @ivan.popelyshev thanks a lot for being this welcoming and your quick answer ?

I made some progress! First thing first: I want to use this grid within a pixi-viewport, might not change much but I prefer to say it first. Anyway here's the modified code:

const uniforms = {};
uniforms.vpw = this.width;
uniforms.vph = this.height;
uniforms.offset = [0, 1];
uniforms.pitch = [50, 50];
uniforms.resolution = [this.width, this.height];

const gridShader = new Filter(undefined, shader, uniforms);
const rect = new Graphics().drawRect(0, 0, this.width, this.height);
rect.filters = [gridShader];

window.viewport.filterArea = window.game.renderer.screen;

window.viewport.addChild(rect);

This got me from a sad black background to an actual grid, only issue is: it's not scaling with the viewport:

Now I'm trying to make it scale nicely with the viewport, I'll get back at you when I managed to do that.

8 hours ago, ivan.popelyshev said:

In case you don't actually need a filter content , its better to rewrite it to mesh shader: https://pixijs.io/examples/#/mesh-and-shaders/triangle-color.js 

That might be more suited to my needs, I'll also look into this.

8 hours ago, ivan.popelyshev said:

The basic distinction - you need extra framebuffer? you don't know what framebuffer is? Don't use filter, use mesh shader, its simpler.

Indeed I don't know much about the use of framebuffers in this case. All I'm trying to do is to get a grid while limiting the draw calls, my initial – naive – approach was the classic OOP loop with an individual Graphics instance for each line, I'm just looking for something more optimized, maybe a mesh shader makes more sense for that use case.

Thanks again for your precious help, I'm a bit ashamed of my lack of knowledge here ?

Edited January 7, 2020 by Zealot

[bubamara]

Do you really need shader for that? Wouldn't be simple tiling sprite enough?

[Zealot]

1 minute ago, bubamara said:

Do you really need shader for that? Wouldn't be simple tiling sprite enough?

I need to be able to programmatically adjust the grid appearance (lines width, and color), I'm not sure of how to achieve that using a sprite.

[bubamara]

You can still render grid tile to canvas, grab the texture from it and update.

[Zealot]

I'm not sure of how to achieve that yet, but I'll look into it. Thanks for your insight!

[Zealot]

I've been trying to use a canvas to create the texture, that I'll later use in a TileSprite, I'm trying to make it work in a Sprite for now but something is wrong and it's not rendering anything:

const canvas = document.createElement("canvas");
canvas.width  = 100;
canvas.height = 100;
canvas.style.border = "4px solid white";
canvas.style.background = "white";

const tileTexture = Texture.from(canvas);
this.background = Sprite(tileTexture);

window.viewport.addChild(this.background);

I'll look at it more in depth tomorrow ?

[bubamara]

You actually need to draw something to canvas plus it's missing new keyword before Sprite. Here's working demo for you: https://pixiplayground.com/#/edit/H7xf1sMhhQpzD2anLy51a

[Zealot]

7 hours ago, bubamara said:

You actually need to draw something to canvas plus it's missing new keyword before Sprite. Here's working demo for you: https://pixiplayground.com/#/edit/H7xf1sMhhQpzD2anLy51a

Thanks a lot, it helped me get a working grid using a TilingSprite. The result is pretty good, and the `cacheAsBitmap` method probably helped the whole thing run even smoother, however I'm not sure the TilingSprite approach has a lot of benefits performance-wise over the looped `Graphics` elements, but I'm not sure of how to compare memory usage for the 2 of them.

It should be fine for the scope of my project for now, I just wished I had a better understanding of shaders are they look like an excellent solution for this kind of use.

[khansami]

On 1/8/2020 at 7:52 PM, Zealot said:

Thanks a lot, it helped me get a working grid using a TilingSprite. The result is pretty good, and the `cacheAsBitmap` method probably helped the whole thing run even smoother, however I'm not sure the TilingSprite approach has a lot of benefits performance-wise over the looped `Graphics` elements, but I'm not sure of how to compare memory usage for the 2 of them.

It should be fine for the scope of my project for now, I just wished I had a better understanding of shaders are they look like an excellent solution for this kind of use.

Here I am using single graphic object with lines to draw and there is spike in GPU utilization, and it stablized when number of lines are reduced. I think there is also a limit to number of graphics pixi.js draws. So I am planning to have unlimited grid so may be grid shader might help.

[khansami]

On 1/8/2020 at 11:37 AM, bubamara said:

You actually need to draw something to canvas plus it's missing new keyword before Sprite. Here's working demo for you: https://pixiplayground.com/#/edit/H7xf1sMhhQpzD2anLy51a

I tried to use this method, but I got this moire pattern. There is stackoverflow answer to such question but I don't how to translate the code to pixi and pixi-viewport
https://stackoverflow.com/questions/63264077/prevent-moire-pattern-in-pixi-js

 

[Mujab Muneeb]

Hi @khansami can you please your code with me? I'll be very thankful.