Zealot

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

Recommended Posts

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 by Zealot

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

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 by Zealot

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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 🙃

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.