Zealot 7 Report post Posted January 6, 2020 (edited) 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 1 ivan.popelyshev reacted to this Quote Share this post Link to post Share on other sites
ivan.popelyshev 1071 Report post Posted January 6, 2020 (edited) 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 1 Zealot reacted to this Quote Share this post Link to post Share on other sites
Zealot 7 Report post Posted January 7, 2020 (edited) 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: screen recording.webm 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 Quote Share this post Link to post Share on other sites
bubamara 67 Report post Posted January 7, 2020 Do you really need shader for that? Wouldn't be simple tiling sprite enough? Quote Share this post Link to post Share on other sites
Zealot 7 Report post Posted January 7, 2020 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. Quote Share this post Link to post Share on other sites
bubamara 67 Report post Posted January 7, 2020 You can still render grid tile to canvas, grab the texture from it and update. 1 Zealot reacted to this Quote Share this post Link to post Share on other sites
Zealot 7 Report post Posted January 7, 2020 I'm not sure of how to achieve that yet, but I'll look into it. Thanks for your insight! 1 bubamara reacted to this Quote Share this post Link to post Share on other sites
Zealot 7 Report post Posted January 7, 2020 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 🙃 Quote Share this post Link to post Share on other sites
bubamara 67 Report post Posted January 8, 2020 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 1 Zealot reacted to this Quote Share this post Link to post Share on other sites
Zealot 7 Report post Posted January 8, 2020 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. 1 bubamara reacted to this Quote Share this post Link to post Share on other sites