Search the Community

Hi everyone. I need to chroma key the video stream on the background. The problem I met is that elements with blurred borders above the video probably change(multiply) the color for the gpu and filter does not remove covered parts of green background. original part filter applied To fix that I did try to create one more PIXI application, make chroma key of video there and than create the sprite from second canvas in the initial one. The idea was that second pixi app will have its own webgl context and gpu will render it separately. But the effect is totally the same so focus not successful. Maybe you have some thoughts how to do it. Possible solution is to have 3 pixi application. First with background content, 2nd with filtered video and top one with ui. But I want to find a way still make it one pixi app. Thank you in advance for any response.

Greetings! I've been porting this shadertoy shader to pixi js. It's compiling and running well. However, there seems to be a weird artifact in the rendered background and I'm guessing it's related to my poor knowledge of how pixi passes texture coordinates to the shader. In my codepen here you can see my latest attempt. The background image as seen here, renders as vertical strips in the pixi filter. It appears as if the top row of pixels of the image is repeated vertically?? I feel like it's something simple that I'm overlooking but wonder if anyone might have any insight as to why the striping is happening? Thank you to all the pixi / shader wizards here who might be able to please shed light on this. Cheers! ps -> i'm running pixi 6.5.8

Hello friends. My first post here. So, I'm working on a small project with around hundred images on big ViewPort. I have basic drag-and-drop functionality of images and I'm using manual requestAnimationFrame to render stage only during image dragging. Now I need to add drop-shadow on all Images. I have tried @Pixi/filters-drop-shadow package by bigtimebuddy but during dragging it significantly drops frame rate. Can anyone please suggest any other way to make drop-shadows with good performance. (P.S. I have thought of using pieces of shadow as a png and scale and skew them and assembly them in a way to look as real drop-shadow on any size of image on any zoom factor. But, that's kind of ridiculously complicated idea and I'm hoping for better suggestions. ) Thank you in advance.

Hi all, I'm pretty new to shaders, so this question may be a complete lack of understanding and if so, feel free to let me know. I'm trying to use a shader to pixelate a part of a specific image by passing in a normalized x/y coordinate, height, and width and using a conditional in the shader to determine whether or not to pixelate. This isn't the ideal solution as conditionals in shaders aren't great, but I wanted a really simple demo. The problem I'm having now is the normalized coordinates I'm passing in aren't relative to the sprite, but seem tied to the window size (world space?). I have a function to resize the sprite as the window resizes as well which is probably affecting things as well as the area applied in the shader moves about the screen not in line with the resizing. I'm trying to find a way to basically pass in some normalized coordinates and have the shader apply only at those coordinates on the texture without having to do the math upfront. Side note: every nonfiltered area also has the quality significantly lowered -- if the frag shader is just a passthrough that looks like this gl_FragColor = texture2D(uSampler, vTextureCoord); the quality still takes a significant drop from just applying that shader. Here's a fiddle example of what I'm talking about, though to see the resize functionality, popping it in a browser makes sense. https://jsfiddle.net/0ma58bsj/12/

Hello! This will be my first post here. RPG Maker MV is a small game engine which uses Pixi.js as it's main codebase. Because of this, pixi filters are compatible with the engine by way of this third party plugin. RPG Maker is a weird and finicky piece of software with a few strange pieces of design, so it's not entirely clear to me how far from standard pixi it is. I am looking to make a custom filter that involves both the limiting of a games palette to a set amount of indexed colors, as well as dithering those colors to create a smoother effect. You can see more details of what I have in mind here. What I want to know is, how would I interface a custom made filter like this with RPG Maker? Would it be relatively plug and play, or will I have to adapt a bunch of stuff to make it work? As a side question, is a dithering filter like this even possible, and if so, is it possible while not being too taxing to the average system? Thanks! I hope to hear from you soon!

Hello, fellow game makers! Last day I was wrestling with PIXI's filters, or to be more precise, with applying filter to local coordinates of DisplayObject to make it scaling-consistent. So I got a smoke shader from the bottom of this tutorial and made it work at local coordinates of an object. I even adjusted frame and vTextureCoord for resolutions other than 1. And look at this gorgeous pearl-like texture! It is even animated and looks so beautiful! But alas, not on mobile... This is Samsung A3 2016 with resolution 1280x720 and devicePixelRatio=2 I'm pretty sure that coordinates are correct and shader doesn't request anything other than coordinates. PIXI.settings.FILTER_RESOLUTION and PIXI.settings.RESOLUTION are set to window.devicePixelRatio Input textures have a right resolution and scaled back to fit object boundaries. But somehow results on mobile and desktop are inconsistent. I have no idea how to approach this problem and I absolutely don't want to blindly adjust filter values with hope for it to work This is working example. Please try it on your device and share results. Devices with resolutions other than 1 or 2 are very welcome! https://www.pixiplayground.com/#/edit/vY25ooUOikjeQbp1k6ywF I speak English and Russian. Please be welcome to contact me through Telegram: https://t.me/PastRecall I really hope to use shaders for my personal project, so I hope there is a solution for this problem. Thank you for reading and have a nice day!

I'm trying to apply a series of filters to a Graphics object: const filters = [ new PIXI.filters.BlurFilter(10), colorMatrixFilter ]; Is there any way with filters to render the original graphics on top? I tried duplicating the Graphics object without filters but it's slow. In SVG it would be done like this: <filter id="myFilter"> <feGaussianBlur in="SourceGraphic" stdDeviation="10"/> <feColorMatrix mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="result"/> <feComposite in="SourceGraphic" in2="result" operator="atop"/> </filter>

Hello, I'm learning filters and I'm having an issue positioning the shockwave filter where I want it. What I have is a pixi container. Inside this container I have a sprite. That is the image I'm applying my filters to. One thing to note is that the Sprite is very large. It does not fit inside the screen. Instead it is positioned to be centered on the screen. This is intended. Next I have multiple small display objects inside the pixi container. These objects move around, after some time passes I want to check if these objects are on top of my sprite and if they are, I'd like create a shockwave on that point. Here's where the issue comes up. My understanding is that all I have to do is get the local coordinates of the moving object from the perspective of the sprite, like so: let filterCoords = sprite.toLocal(movingOjb.position, container); let filter = new ShockwaveFilter(filterCoords); But the problem is these coordinates aren't correct. More specifically the Y coordinates are correct but the X coordinates aren't which really confuses me. I've been trying to understand how exactly the filter coordinates interact with images that do not fully fit on the screen.

Is there a method of using a filter that affects the entire screen, and not just the rendered sprites? (e.g. for the CRT filter, I'd want the lines to be visible across the entire background). An easy fix would be to set a rectangle graphic / sprite as the background, but I was wondering if there was a more correct way to approach this.

Hello, I am new to PIXI and as a former Flash developer, I am greatly enjoying learning it, as the concepts are quite similar! ? I recently came up against a stumbling block, which I hope a kind soul here may help me resolve: I'm trying to reproduce what one sees when looking through a camera's viewfinder. In order to achieve this, I am attempting to blur only a circular portion at the center of the stage. While this works as expected when I add a single blurred container and its corresponding mask, as children of the stage, the moment I add a "crisp" (non-blurred) version of the same container, I don't get what I would expect: i.e. the blurred circular portion overlaid over the non-blurred container. Instead, the masked, blurred version gets overriden and I only see the crisp version. Building off a CodePen generously provided by OSUblake from the GreenSock forums, I put together this CodePen to illustrate the problem: https://codepen.io/montoyland/pen/zYvWLzv (Uncomment the line in question, noted in the comments, to see what I mean). What would be the proper way to achieve what I am trying to do? I have seen from examples that other filters (such as the DisplacementFilter) can be constrained to a discreet area on the canvas, so I assume the same can be done with the BlurFilter while still coexisting with other containers on the stage. What I am missing? Thank you so much for your help! Cheers! Mike

This isn't fully pixi related, but I'm looking to swap colors, limit color palette in images. I've had some success blindly painting color palettes and using Color Map Filter but I have no idea how it actually works. Can someone point me in the right direction? How would I go about making a color palette that for example limits image's colors to 32 given ones? https://pixijs.io/pixi-filters/docs/PIXI.filters.ColorMapFilter.html I was able to copy some shaders from shadertoy that also manipulate colors, but for my use case dynamically calculated/painted color map seems like the best solution.

Hi community, I'm trying to add an additional filter to a sprite in Pixi v4 but somehow this only works when I add the filters at the same time like so: mysprite.filters = [new PIXI.filters.BlurFilter(), new PIXI.filters.NoiseFilter()]; My goal is to dynamically add and remove filters on the sprites at a later time. I have tried this (see below), but when I examine the "mysprite.filters" property, the debugger still tells me that there is only one filter on the sprite: mysprite.filters = [new PIXI.filters.BlurFilter()]; ... mysprite.filters.push(new PIXI.filters.NoiseFilter()); What is the correct way to add additional filters to a sprite? Thanks in advance. :)

Hi, I'm trying to implement the pixi-v4 filters in phaser 2 (CE Version). I'm especially interested in this one: https://github.com/pixijs/pixi-filters/tree/master/filters/zoom-blur I've noticed this example (http://phaser.io/examples/v2/filters/pixi-filter) in phaser 2 is outdated/not working (link to pixi filter is wrong). Even when i fix the link (e.g. https://github.com/photonstorm/phaser/blob/v2.6.2/filters/pixi/RGBSplitFilter.js) the filter gives an error because pixi is not included. So I'm wondering what is the right method to do it. I guess the main questions here are: is pixi-v4 filters compatible with phaser-v2 method of importing of pixi filters? if yes, where are the new filters (interested in the zoom-blur one: https://github.com/pixijs/pixi-filters/tree/master/filters/zoom-blur)? if not, any pointers how to port them? Thanks!

Hello there, I am trying to load a pixi glow filter for a phaser project I am working on. I followed this tutorial http://phaser.io/examples/v2/filters/pixi-filter But I am a bit confused as to how to make this run on type script without the ts definitions. Any help in this regard would be much appreciated Thank you

Hi, this is my first time using shaders and the new filters in pixi v4, so please bare with me First of all I'm a bit confused by the term (custom) filter.. Is that the same as the user of a shader? I assume it is. Second I tried using this example. I got it to work in pixi 3.x but somehow I can't figure out what i'm doing wrong in v4. no error messages, just a black canvas. My goal is to create custom button hovers with PIXI, using shaders, etc. I tried 2 different ways but... alas, same black canvas HTML: <a href="#" class="btn btn-one"> <canvas></canvas> <span class="title">button effect one</span> </a> shader.frag: precision mediump float; uniform vec2 mouse; uniform vec2 resolution; uniform float time; void main() { gl_FragColor = vec4( sin(time), mouse.x/resolution.x, mouse.y/resolution.y, 1.0); } JS: var btnOne = document.querySelector('.btn-one'); var width = btnOne.clientWidth; var height = btnOne.clientHeight; var app = new PIXI.Application({ width: width, height: height, view: btnOne.querySelector('canvas') }); btnOne.append(app.view); // create rect to fill the button and apply shaders to const rect = new PIXI.Graphics() .beginFill(0x00ff00) .drawRect(0, 0, width, height); app.stage.addChild(rect); // Stop application wait for load to finish app.stop(); PIXI.loader.add('shader', 'shader.frag') .load(onLoaded); var simpleShader; var uniforms = {}; uniforms.mouse = { type: 'v2', value: { x:0, y:0 } } uniforms.time = { type: 'f', value: 0 } uniforms.resolution = { type: 'v2', value:{ x: width, y: height} } function onLoaded (loader,res) { // Create the new filter, arguments: (vertexShader, fragmentShader, uniforms) simpleShader = new PIXI.Filter(null, res.shader.data, uniforms); rect.filters = [simpleShader]; app.start(); // bind mouse to shader effects btnOne.onmousemove = function(evt) { // Get the mouse position mousePos = { x: evt.clientX, y: evt.clientY } // Assigning a new value lets Pixi know to update the uniform in the shader // But doing something like uniforms.mouse.x = 0, won't update in this current version of Pixi simpleShader.uniforms.mouse.value = mousePos; } // apply the filter rect.filters = [simpleShader]; // Animate the filter app.ticker.add(function(delta) { simpleShader.uniforms.time.value += 0.1 }); } I read the post about creating filters in v4, but to a beginner it's just confusing as I don't understand a lot of the terminology used. Anyone can (hint how to) fix this so I can continue my explorations programming shaders?

Hi, All I'm relatively new to PixiJS and I'm facing an issue that I don't understand. # What I'm trying to accomplish : Basically I create a sprite based on an image and then I display a sort of black overlay over it. The idea is to let the user see through the black overlay thanks to a mask which will move according to user mouse movement. The mask texture is created using multiple graphics and filters rendered by a second webgl renderer. # The issue I'm facing Sometimes (~50% of the time) when I reload the page online, the mask is invisible. It's as if there isn't any mask applied to the black overlay whereas locally it's always working. Attached to this post you will find two pictures : The first one represents the black overlay with the mask which is not working. The second one represents the black overlay with the mask which is working. I'm using the latest release of PixiJS and the source code for this example can be found here : https://jsfiddle.net/vhynmdxh/ If someone has already solved this type of issue I would be happy to discuss with them :). Thanks.

I would like to use Pixi v4 filters in Phaser node application. I´ve read this tutorial: http://phaser.io/examples/v2/filters/pixi-filter and all posts about this that I´ve found, but I still don´t know, how am I supposed to load the filter script. For example the outline filter: https://github.com/pixijs/pixi-filters/tree/master/filters/outline game.load.script('filter', 'outline/src/OutlineFilter.js'); However, this is not working and I just can't figure out, how to load it correctly. (The path is correct.) Thank you

I want to make a filter that uses multiple source textures. Each source texture is the same size (or, will be scaled to the same size). I've played around with a few different ways of handling this, without much success. I had a look at the guide to create filters in v4 but the documentation for this case leaves a little to be desired. I've been somewhat successful but there are still certain issues: The second texture seems to be slightly scaled up, leading to misalignment and a weird margin. Whenever the sprite goes out of bounds, the coordinate systems go out of whack. You can see the issue in action in this jsfiddle. I need a way to have the source textures line up perfectly, without the misalignment/weird margin. (we can ignore rotation!) 'autoFit' must be true for my application for performance reasons.

Hi guys, I have a sprite batch containing 250+ 64x64 sprites from a single tileset / spritesheet. I need to apply a filter to the entire batch rather than per-sprite (way too slow!) I seem to only be able to add filters to the stage or single sprites. Anything else seems to do nothing. Is there any way I can do this? My original goal is to create an Overlay filter (Since the overlay blend mode doesn't work in WebGL) and apply it to all the sprites so they mix correctly with what is rendered underneath them. Thanks!

I have some questions about filters and how they behave in Pixi.js. 1. When settings filters on a display object like this: stage.filters = [filter1, filter2, filter3, filter4]; Is the order defined in the list is the same when rendered? 2. Does Pixi.js create brand new FrameBuffer Objects for each filter, or does it reuses the output of the previous filter as input for the next filter? Sorry if I'm not really clear or accurate since I'm not a WebGL expert ^^ Thanks for your insights

I recently started experimenting with Filters (shaders) and while it runs well when using a single filter on the world, applying a filter to my sprites seems to be killing performance. Even a simple filter that does nothing but output the color set on just 50 sprites is dropping my framerate from 50 to 18, even when sprites are offscreen. Is that to be expected? It makes filters virtually unusable unless very sparingly.

Hello everybody, I've a simple question, forgive me, but I'm new to this world. I'm wondering if there is a "built in" solution to apply a Graphics object as filter of a BitmapText in Pixi.js 4.5. I fill like this is a super common task, and I'm not sure if I need to write a custom shader to accomplish it. Thank you!

V4 filters are differ from V3. You can't just put there shader and assume that texture coords are in [0,1] range. I am sorry that you have to learn all of that, and I will make sure that the process will be easier for pixi-v5. Filter Area Thanks to @bQvle and @radixzz First, lets work with the AREA. When you apply filter to container, PIXI calculates the bounding box for it. We are working with bounding box. Invariant: maximal vTextureCoord multiplied by "filterArea.xy" is the real size of bounding box. Don't try to think about it: its like that because of performance reasons, its not logical in user-experience sense. Neither vTextureCoord dimensions, neither filterArea.xy are predictable, but they multiplication is what we need. Area can have padding, so please don't use it to get "displacement texture" coordinates or any second-hand textures you are adding to the shader, use "mappedMatrix" for it (see below) If you want to get the pixel coordinates, use "uniform filterArea", it will be passed to the filter automatically. uniform vec4 filterArea; ... vec2 pixelCoord = vTextureCoord * filterArea.xy; They are in pixels. That wont work if we want something like "fill the ellipse into a bounding box". So, lets pass dimensions too! PIXI doesnt do it automatically, we need manual fix: filter.apply = function(filterManager, input, output, clear) { this.uniforms.dimensions[0] = input.sourceFrame.width this.uniforms.dimensions[1] = input.sourceFrame.height // draw the filter... filterManager.applyFilter(this, input, output, clear); } Lets combine it in shader! uniform vec4 filterArea; uniform vec2 dimensions; ... vec2 pixelCoord = vTextureCoord * filterArea.xy; vec2 normalizedCoord = pixelCoord / dimensions; Here's the fiddle: https://jsfiddle.net/parsab1h/ . You can see that shader uses "map" and "unmap" to get to that pixel Now let's assume that you somehow need real coordinates on screen for that thing. You can use another component of filterArea, zw: uniform vec4 filterArea; ... vec2 screenCoord = (vTextureCoord * filterArea.xy + filterArea.zw); I dont have an example for that, but may be you need that value for something? Fitting problem Thanks to @adam13531 at github. One small problem: those values become wrong when PIXI tries to fit bounding box: here's the fiddle: http://jsfiddle.net/xbmhh207/1/ Please use this line to fix it: filter.autoFit = false; Bleeding problem Thanks to @bQvle The temporary textures that are used by FilterManager can have some bad pixels. It can bleed. For example, displacementSprite can look through the edge, try to move mouse at the bottom edge of http://pixijs.github.io/examples/#/filters/displacement-map.js. You see that transparent (black) zone, but it could be ANYTHING if it wasnt clamped. To make sure it doesnt happen in your case, please use clamping after you map coordinates: uniform vec4 filterClamp; vec2 pixelCoord = WE_CALCULATED_IT_SOMEHOW vec2 unmappedCoord = pixelCoord / filterArea.xy; vec2 clampedCoord = clamp(unmappedCoord, filterClamp.xy, filterClamp.zw); vec4 rgba = texture2D(uSampler, clampedCoord); Both FilterClamp and FilterArea are provided by FilterManager, you dont have to calculate pass it in "filter.apply", here's pixi code that takes care of that: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/managers/FilterManager.js#L297 OK, now we have "transparent" zone instead of random pixels. But what if we want it to be fit completely? displacementFilter.filterArea = app.screen; // not necessary, but I prefere to do it. displacementFilter.padding = 0; That'll do it. Why did I modify filterArea there, PIXI will "fit" it anyway, right? I dont want PIXI to have time calculating the bounds of container, because maggots are actually changing it, crawling in places that we dont see! No extra transparent space, and if you put it into http://pixijs.github.io/examples/#/filters/displacement-map.js , and you move mouse to bottom edge, you'll see the grass. Mapped matrix When you want to use extra texture to put in the filter, you need to position it as a sprite somewhere. We are working with sprite that is not renderable but exists in the stage. Its transformation matrix will be used to position your texture in the filter. Please use https://github.com/pixijs/pixi.js/blob/dev/src/filters/displacement/DisplacementFilter.js and http://pixijs.github.io/examples/#/filters/displacement-map.js as an example. Look for a mapped matrix: this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); maskMatrix is temporary transformation that you have to create for the filter, you dont need to fill it. Sprite has to be added into stage tree and positioned properly. You can use only texture that are not trimmed or cropped. If you want the texture to be repeated, like a fog, make sure it has pow2-dimensions, and specify it in baseTexture before its uploaded on GPU/rendered first time! texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; If you want to use an atlas texture as a secondary input for a filter, please wait for pixi-v5 or do it yourself. Add clamping uniforms, use them in shader and make better mapping in "filterMatrix"

Hello all, Since a week now I try to implement a simple lightmap system by myself for my game following this tutorial for libgdx. I've learned tiny bits of OpenGL API when I was coding "for fun" in C++ and I think I can implement this code with the raw WegGL api. However, I would like to do it with Pixi.js. The "ambient light" filter is really simple. But, for the lightmap I need to bind 2 framebuffers : the texture one and the lightmap one. How do I achieve this with Pixi? I've dig into the code of pixi.js, pixi-lights and pixi-extras-filters to try to figure how I can do. For the moment, I render my lightmap on a RenderTexture of the same size of my tilemap. I've found that textures are bound in FilterManager.prototype.applyFilter but I don't see any way in Pixi.js API to bind a second texture. Am I missing something or looking at the wrong place? What is the good way to go if I want to bind another texture for some filters? Extend the filter manager used by Pixi.js? Here is a very messy codepen where I make my tests. There is maybe a very simple solution to this problem but I'm beginner to GLSL/WebGL and I may not understand how to use the exposed API.

I have an openFL project that renders to a canvas, I am planning to use pixijs as a top layer to show glowing filters on top of openFL canvas. I already have the pixijs Canvas on top of openFL canvas. But are there examples to achieve glowing effect on pixijs Sprite? Here is an example in Adobe Flash Player of what I am trying to do: http://dcaclab.com/en/experiments/9900-a-simple-test-circuit Thanks