Jump to content

PIXI Fragment shader and retina resolution


Recommended Posts

Hello everybody!

There is my fragment shader for PIXI.Filter. I'm using it to change the colour of the area drawed by PIXI's primitives (eg. for gradient effect). All looks good on renderer.resolution = 1 but if i set it into 2 It draws additional line out of the area, and strange big pixels on a complex forms like chart (see screenshots). Help me please :-)

precision mediump float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;
uniform mat3 mappedMatrix;
uniform vec4 topColor;
uniform vec4 bottomColor;
uniform float alpha;

void main(void) {				
  vec4 result = texture2D(uSampler, vTextureCoord);
  vec3 mapCoord = vec3(vTextureCoord, 1.0) * mappedMatrix;

  if(result.a > 0.0) {
    vec4 mixCol = mix(topColor, bottomColor, mapCoord.y);
    vec4 fg = texture2D(uSampler, vTextureCoord.xy);

    gl_FragColor = vec4(1.0, 0.0, 0.0, alpha);
    // gl_FragColor = mix(fg, mixCol, alpha); 
    // Gradient effect disabled. When pixels are red - it's better to see the bug
  } else {
    gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);

Unwanted line out of the area (resolution = 2)

Screen Shot 2016-11-08 at 14.44.32.png

Normal result (resolution = 1)

Screen Shot 2016-11-08 at 14.44.42.png

Strange big pixels (resolution = 2)

Screen Shot 2016-11-08 at 14.56.25.png

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

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...