filter() does not work after 1.9.0 if noFill() is called

[inaridarkfox4231]

Topic

filter() was introduced in webgl mode in 1.8.0. At this time, it seems that filter() was still working even with noFill().

// version: 1.8.0
function setup() {
   createCanvas(200,200,WEBGL);
 }
  
 function draw() {
   background(0);
   noFill();
   stroke(255);
   line(-100,-100,300,300);
   filter(INVERT);
 }

However, since 1.9.0, filter() does not work if noFill() is called. Of course it doesn't work with 1.11.2 either.

It will be drawn when you execute fill().

function setup() {
    createCanvas(200,200,WEBGL);
}

function draw() {
    background(0);
    noFill();
    stroke(255);
    line(-100,-100,300,300);
    
    fill(255);
    
    filter(INVERT);
}

It seems nonsensical to have to call pointless fill() to filter a sketch that just draws lines.
But I don't know if this is a bug or not.

That's all for raising the issue.

[subhraneel2005]

hi, i checked it in the web editor, and it seems actually pointless to call the fill() unneccessary. i will be working on this then

just let me know that you get this bug in the p5.js web editor?

[inaridarkfox4231]

here: noFill_filter_BUG

noFill() and no "fill()"

function setup() {
  createCanvas(400, 400, WEBGL);

  rotateX(PI/4);
  rotateY(PI/4);
  noFill();
  stroke(255);
  background(0);
  box(200);

  filter(INVERT);
}

noFill() and "fill()"

function setup() {
  createCanvas(400, 400, WEBGL);

  rotateX(PI/4);
  rotateY(PI/4);
  noFill();
  stroke(255);
  background(0);
  box(200);

  fill("aquamarine");

  filter(INVERT);
}

[subhraneel2005]

yes, if nofill() is given then giving fill() is uneccesary, thanks for noticing it. will work on this

[inaridarkfox4231]

Thank you for your working on this issue. I'm not familiar with the behavior around filter() and framebuffer, so I can't work for this issue.

[subhraneel2005]

its all good, no worries 😊

[subhraneel2005]

i think the bug was with noFill().
just added this._renderer.fill(255); to it. So, it will have a white fill by default, and we dont have to call fill() again. what do u think ?

[davepagurek]

Just a heads up -- In the dev-2.0 branch, where p5 2.0 is being developed, this section of the code has been refactored, so the implementation will likely be a little different. We now store the fill color as _renderer.states.fillColor, which is null if there should not be a fill, and is a p5.Color if a fill is active.

[subhraneel2005]

alright, then according to your insights, the code should be like this:

p5.prototype.noFill = function() {  
  this._renderer.states.fillColor = null; 
  return this;  
};  

please correct me if im wrong

[Vaivaswat2244]

Is someone working on this? If not I'd like to proceed on this.
Also instead of providing the fillColor with null. I'm assuming making it transparent white would be a better fix,
something on the lines of,

p5.prototype.noFill = function() {  
  this._renderer.states.fillColor = this.color(255, 255, 255, 0); 
  return this;  
};

[davepagurek]

There's a performance (and depth ordering) implication to having fill set, since we have to triangulate all the faces in order to fill them, and then it has an entry in the depth buffer, preventing farther-away objects from being drawn at those pixels. So I think we still want to avoid doing fills at all if noFill has been set, but ideally just update the filter() logic to run regardless of the fill.