jkm

Members
  • Content Count

    5
  • Joined

  • Last visited

  1. jkm

    Color palette Filter

    Thanks I sort of got a pallet limiter shader working. It's probably a monstrosity but it works. Code below in case someone ever finds it useful. For now I'm hardcoding each color into the fragment shader because I've had a lot of issues passing vec3 uniform into the shader and iterating it. import { Filter } from 'pixi.js' import { defaultVertexShader } from './shaderDefaults'; export class PaletteLimiterBuilder extends Filter { constructor(palette: RgbColor[]) { super(defaultVertexShader, buildFragmentShader(palette)); console.log(this.program.fragmentSrc) } } const buildFragmentShader = (palette: RgbColor[]) => { let parsedPalette = `` for(const {r,g,b} of palette){ parsedPalette+= `TRY(${r/255}, ${g/255}, ${b/255});\n` } return ` precision mediump float; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform vec4 filterArea; float hash(vec2 p) { return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); } float compare(vec3 a, vec3 b) { a*=a*a; b*=b*b; vec3 diff = (a - b); return dot(diff, diff); } void main(void) { const float pixelSize = 0.5; vec2 c = floor(vTextureCoord.xy / pixelSize); vec2 coord = c * pixelSize; vec3 src = texture2D(uSampler, vTextureCoord).rgb; vec3 dst0 = vec3(0), dst1 = vec3(0); float best0 = 1e3, best1 = 1e3; # define TRY(R, G, B) { const vec3 tst = vec3(R, G, B); float err = compare(src, tst); if (err < best0) { best1 = best0; dst1 = dst0; best0 = err; dst0 = tst; } } ${parsedPalette} # undef TRY gl_FragColor = vec4(mod(c.x + c.y, 2.0) > (hash(c * 2.0 + fract(sin(vec2(1.0, 1.7)))) * 0.75) + (best1 / (best0 + best1)) ? dst1 : dst0, 1.0); } ` } export interface RgbColor { r: number g: number b: number }
  2. jkm

    Color palette Filter

    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.
  3. https://gyazo.com/4a44909a40952ac6f5182d328f55d754 I've spent more time than I care to admit figuring it all out. I'm calculating a convex hull around a sprite and then slicing it up into matterjs driven little orc pieces. I'm not very happy with one thing yet. Each of these pieces is a separate Sprite and it has it's own Graphics object as a mask. I feel that if I were to have a couple of these going at the same time rendering could get expensive. Teach me to do better I should be learning react or something to get a dev job, but here I am cutting up orcs.
  4. jkm

    Graphics artifacts

    I remember reading about this a few weeks back. I just spent some time trying to fix it with these two lines but it doesn't seem to work for me. Where should I put them? I tried each frame before and after render as well as when creating Graphics object. graphics.geometry.updateBatches(); // try commenting that to see Uint16 overflow graphics.geometry._indexBuffer.update(new Uint32Array(graphics.geometry.indices)); For the other solution, editing pixi source, would I have to build it after change? I use webpack and I'm a noob. I temporarily fixed it by Drawing circles that don't have to animate anymore to a static canvas without using pixi but it bothers me I didn't solve my original issue this.addUvs(this.points, uvs, style.texture, start, size, style.matrix);
  5. jkm

    Graphics artifacts

    I've recently started playing with Pixi so I'm probably doing something very wrong here, but I encountered an issue when I'm drawing circles with PIXI.Graphics. So what I attempted to do is to fill the screen with circles that don't overlap. Each circle starts with 1 radius and then grows every frame. Pretty simple. My problem starts at about ~500 circles. It starts out ok.. But then this happens Is drawing hundreds of circles with drawCircle() into a single Graphics object per frame bad? I don't care about performance at this time, just doing a simple circle packing exercise. Simplified code below. No real reason to include growing and populating math here. I've tried putting begin Fill and line style inside the loop for every circle as well as completely outside the ticker. In the example below I have a separate loop doing math first and then another drawing circles but I tried them together too. I thought the long computation times for growing and populating each frame have something to do with my issue, but maybe it's a pixi/webgl limitation I have no clue about. Halp interface Circle { x: number y: number r: number } const circles: Circle[] = [] //array filled with circle objects. //on then on every frame I do public animate(delta: number) { for (const circle of circles) { growIfPossible() //simplified } populate() //adding new circles - simplified this.g.beginFill(0xFFFFFF) this.g.lineStyle(2, 0x121212) this.g.clear() for (const circle of this.circles) { this.g.drawCircle(circle.x, circle.y, circle.r) } this.g.endFill() } }