现有纹理的抗锯齿

Question

I have a lot of pre-generated images (same size) that consist of curved and straight lines and a colorful fill. The problem is that:

• these lines are not smooth,
• straight lines are very thin.

Questions:

• a) using a shader, how to make all curves and straight lines more smoother in a given texture?
• b) how to make thin straight lines 2, 3 or 4 times thicker?

Sorry for not offering my own solution, I'm very new to shaders and haven't been able to solve this problem yet. I import pictures (textures) into the shader from p5.js.

let img, theShader, pg;
function preload() {
  img = loadImage('texture.jpg');
}
   
function setup() {   
    createCanvas(600,800);
    pixelDensity(1);
    pg = createGraphics(600, 800);
    pg.pixelDensity(1);
    theShader = pg.createShader(vert, frag);
    pg.texture(img);
    **
}

function draw() {
**
pg.shader(theShader);
theShader.setUniform('u_resolution', [pg.width, pg.height]);
theShader.setUniform('u_texture', pg);  
pg.rectMode(CENTER);
pg.noStroke();
pg.rect(0, 0, pg.width, pg.height); 
image(pg, 0,0, width, height);
**
}

Answer 1

You can try to apply some FXAA to reduce jagged edges but you can't just change arbitrary features (like line width) in a pregenerated image without writing some rather sophisticated custom filtering. This is basically the worst step in the pipeline to try to increase image quality, if at all possible you should try to get better source material: a higher resolution render, vector image format (svg) or straight up recreate the output.