PGraphics + noSmooth() + alpha = 绘图工件 [英] PGraphics + noSmooth() + alpha = drawing artifacts

问题描述

注意:我也在处理论坛上问过这个问题(xy+ EPSILON, y + EPSILON);) 非常非常 非常 小间距 (static final float EPSILON = 0.00001f;我的猜测是这种特殊的配置，缺少锯齿可能意味着这条对角线的两个点都落在同一个像素上，最终不会在右上角区域呈现.为什么是那个区域，为什么会有这么小的距离，我不知道，但这听起来有点让人头疼 Jakub Valtar 和 Andres Colubri 不得不面对.

FWIW 这里有一个 hacky 的解决方法:使用更大的距离，可以渲染透明且没有锯齿:

PGraphics pg;无效设置(){大小(400, 500);不平滑()；pg = createGraphics(width/20, height/20);pg.beginDraw();//仅用于调试目的:带边的矩形pg.fill(0, 0, 255);pg.rect(0,0,pg.width-1,pg.height-1);pg.stroke(255,255,255, 128);pg.endDraw();}无效点NoSmooth(PGraphics pg，浮动x，浮动y){pg.beginShape();pg.vertex(x,y);pg.vertex(x + 0.75,y);//顶点之间的任何小于0.75的距离并且没有什么可以用锯齿渲染pg.endShape();}无效画(){背景(255)；如果(鼠标按下){pg.beginDraw();pointNoSmooth(pg,mouseX,mouseY);pg.endDraw();}//渲染放大图像(pg, 0, 0, 宽度, 高度);//在 TL 角渲染小预览图像(pg,0,0);}

请注意，我已将 PGraphics 分辨率设置为小 20 倍，然后将其放大，以便更容易查看像素在 PGraphics 上的位置.我没有缩放 mouseX,mouseY 坐标，所以你需要在测试时绘制左上角的小预览.0.75 距离可以解决问题:根据我的测试，任何小于 0.7499995 的距离都会再次出现问题.

Note: I also asked this question on the Processing forum here.

I have this sample code:

PGraphics pg;

void setup() {
  size(400, 500);
  pg = createGraphics(width, height);

  pg.noSmooth();
  pg.beginDraw();
  pg.background(0, 0, 255);
  pg.endDraw();
}

void draw() {

  if (mousePressed) {
    pg.beginDraw();
    pg.stroke(255, 254);
    pg.point(mouseX, mouseY);
    pg.endDraw();
  }

  image(pg, 0, 0, width, height);
}

I would expect this code to show a point wherever the user presses the mouse. Instead, I am only able to see points in a couple rectangular areas:

If I remove the call to pg.noSmooth() or if I remove the alpha value in the pg.stroke() call, then it works fine:

If I replace the pg.point() call with pg.ellipse() or pg.rect() then it also works fine.

It seems like the combination of using a PGraphics, the noSmooth() function, the point() function, and an alpha value results in this buggy behavior. I’ve tried in Processing 3.3 and Processing 3.5.2 and I see the same behavior in both.

Am I missing something obvious?

解决方案

After a wee bit of digging up turns out the JAVA2D renderer draws a point as a diagonal line(line(x, y, x + EPSILON, y + EPSILON);) with a very very very small spacing (static final float EPSILON = 0.0001f;). My guess is this particular configuration the lack aliasing might mean both points of this diagonal line land on the same pixel and end up not being rendered on the top right area which. Why that area and how come this small distance I don't know, but it sounds a bit like the headaches Jakub Valtar and Andres Colubri had to deal with.

FWIW here's a hacky workaround: using a larger distance that does get rendered with transparency and no aliasing:

PGraphics pg;

void setup() {
  size(400, 500);
  noSmooth();

  pg = createGraphics(width/20, height/20);
  pg.beginDraw();
  // just for debug purposes: rectangle with edge
  pg.fill(0, 0, 255);
  pg.rect(0,0,pg.width-1,pg.height-1);
  pg.stroke(255,255,255, 128);
  pg.endDraw();

}

void pointNoSmooth(PGraphics pg, float x,float y){
  pg.beginShape();
  pg.vertex(x,y);
  pg.vertex(x + 0.75,y);//any less than 0.75 distance between vertices and there's nothing to render with aliasing
  pg.endShape();
}

void draw() {
  background(255);
  if (mousePressed) {
    pg.beginDraw();
    pointNoSmooth(pg,mouseX,mouseY);
    pg.endDraw();
  }
  // render upscaled
  image(pg, 0, 0, width, height);
  // render small preview in TL corner
  image(pg,0,0);
}

Notice that I've set the PGraphics resolution 20 times smaller, then drawn it upscaled so it's easier to see where the pixels land on the PGraphics. I'm not scaling the mouseX,mouseY coordinates though, so you'll need to draw in the small top left preview when testing. That 0.75 distance does the trick: from what I've tested, anything smaller than 0.7499995 starts acting buggy again.

这篇关于PGraphics + noSmooth() + alpha = 绘图工件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！