Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pixelate Filter is Busted #4

Closed
bigtimebuddy opened this issue Aug 11, 2016 · 6 comments
Assignees

Comments

@bigtimebuddy
Copy link
Member

@bigtimebuddy bigtimebuddy commented Aug 11, 2016

If you see the demos, the PixelateFilter doesn't appear to be operating correctly. Shows up as a solid block instead of pixelated image. http://pixijs.github.io/pixi-filters/examples/

@kaestel

This comment has been minimized.

Copy link

@kaestel kaestel commented Nov 1, 2016

Hi!
I'd love to use your pixelate filter for PIXI, but it doesn't work. Either it shows a solid block - or maybe it displaces the element out of view? I can't tell if it is one or the other. It doesn't give the pixelate effect anyhow.

Do you have any fix ready or would you be able to help us fix it?

Martin

@jeff-gold-marblemedia

This comment has been minimized.

Copy link

@jeff-gold-marblemedia jeff-gold-marblemedia commented Nov 21, 2016

does anyone have a fix for the pixelate filter? really want to use this in a project.

@jeff-gold-marblemedia

This comment has been minimized.

Copy link

@jeff-gold-marblemedia jeff-gold-marblemedia commented Nov 22, 2016

i modified the Ascii filter to fix this.. you can replace the filter in filter.js with this as a quick hack

function PixelateFilter()
{
    PIXI.Filter.call(this,
        // vertex shader
        "#define GLSLIFY 1\nattribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\n\nuniform mat3 projectionMatrix;\n\nvarying vec2 vTextureCoord;\n\nvoid main(void)\n{\n    gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n    vTextureCoord = aTextureCoord;\n}",
        // fragment shader
        "#define GLSLIFY 1\nvarying vec2 vTextureCoord;\n\nuniform vec4 filterArea;\nuniform float pixelSize;\nuniform sampler2D uSampler;\n\nvec2 mapCoord( vec2 coord )\n{\n    coord *= filterArea.xy;\n    coord += filterArea.zw;\n\n    return coord;\n}\n\nvec2 unmapCoord( vec2 coord )\n{\n    coord -= filterArea.zw;\n    coord /= filterArea.xy;\n\n    return coord;\n}\n\nvec2 pixelate(vec2 coord, vec2 size)\n{\n    return floor( coord / size ) * size;\n}\n\nvec2 getMod(vec2 coord, vec2 size)\n{\n    return mod( coord , size) / size;\n}\n\nfloat character(float n, vec2 p)\n{\n    p = floor(p*vec2(4.0, -4.0) + 2.5);\n    if (clamp(p.x, 0.0, 4.0) == p.x && clamp(p.y, 0.0, 4.0) == p.y)\n    {\n        if (int(mod(n/exp2(p.x + 5.0*p.y), 2.0)) == 1) return 1.0;\n    }\n    return 0.0;\n}\n\nvoid main()\n{\n    vec2 coord = mapCoord(vTextureCoord);\n\n    // get the rounded color..\n    vec2 pixCoord = pixelate(coord, vec2(pixelSize));\n    pixCoord = unmapCoord(pixCoord);\n\n    vec4 color = texture2D(uSampler, pixCoord);\n\n    // determine the character to use\n    float gray = (color.r + color.g + color.b) / 3.0;\n\n    float n =  65536.0;             // .\n    if (gray > 0.2) n = 65600.0;    // :\n    if (gray > 0.3) n = 332772.0;   // *\n    if (gray > 0.4) n = 15255086.0; // o\n    if (gray > 0.5) n = 23385164.0; // &\n    if (gray > 0.6) n = 15252014.0; // 8\n    if (gray > 0.7) n = 13199452.0; // @\n    if (gray > 0.8) n = 11512810.0; // #\n\n    // get the mod..\n    vec2 modd = getMod(coord, vec2(pixelSize));\n\n    gl_FragColor = color;\n\n}"
    );
    this.pixelSize = 4;
}


PixelateFilter.prototype = Object.create(PIXI.Filter.prototype);
PixelateFilter.prototype.constructor = PixelateFilter;
module.exports = PixelateFilter;

Object.defineProperties(PixelateFilter.prototype, {
    /**
     * This a point that describes the size of the blocks.
     * x is the width of the block and y is the height.
     *
     * @member {PIXI.Point}
     * @memberof PIXI.filters.PixelateFilter#
     */
    pixelSize: {
        get: function ()
        {
            return this.uniforms.pixelSize;
        },
        set: function (value)
        {
            this.uniforms.pixelSize = value;
        }
    }
});

},{}],9:[function(require,module,exports){
@KIvanow

This comment has been minimized.

Copy link

@KIvanow KIvanow commented Dec 4, 2016

@jeff-gold-marblemedia , you sir, are awesome. Thank you for the quick fix on the pixelate filter

@bigtimebuddy

This comment has been minimized.

Copy link
Member Author

@bigtimebuddy bigtimebuddy commented Dec 4, 2016

@jeff-gold-marblemedia would welcome a Pull request if you could put something together.

nchase added a commit to nchase/pixi-filters that referenced this issue Jun 17, 2017
this commit fixes `PixelateFilter` per the code that @jeff-gold-marblemedia posted in pixijs#4, which is cribbed from `AsciiFilter`.

I'm sad to admit that I don't yet know enough about GL or shaders to describe why this works or why the original implementation was broken.

I was able to trim down some unused code that was copied from `AsciiFilter` where `gray` was being assigned to a variable but never used.
nchase added a commit to nchase/pixi-filters that referenced this issue Jun 17, 2017
this commit fixes `PixelateFilter` per the code that @jeff-gold-marblemedia posted in pixijs#4, which is cribbed from `AsciiFilter`.

I'm sad to admit that I don't yet know enough about GL or shaders to describe why this works or why the original implementation was broken.

I was able to trim down some unused code that was copied from `AsciiFilter` where `gray` was being assigned to a variable but never used.
@nchase

This comment has been minimized.

Copy link
Contributor

@nchase nchase commented Jun 17, 2017

hi maintainers, see #23 if this is something that you still want – hope to learn more about webGL and shaders in the near future.

nchase added a commit to nchase/pixi-filters that referenced this issue Jun 17, 2017
this commit fixes `PixelateFilter` per the code that @jeff-gold-marblemedia posted in pixijs#4, which is cribbed from `AsciiFilter`.

I'm sad to admit that I don't yet know enough about GL or shaders to describe why this works or why the original implementation was broken.
nchase added a commit to nchase/pixi-filters that referenced this issue Jun 17, 2017
this commit fixes `PixelateFilter` per the code that @jeff-gold-marblemedia posted in pixijs#4, which is cribbed from `AsciiFilter`.

I'm sad to admit that I don't yet know enough about GL or shaders to describe why this works or why the original implementation was broken.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.