Skip to content

Set interapolation to nearest when used in WebGL mode for noSmooth() #6578

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.

Sign up for GitHub

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Set interapolation to nearest when used in WebGL mode for noSmooth() #6578

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/core/shape/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,13 @@ p5.prototype.noSmooth = function() {
this.drawingContext.imageSmoothingEnabled = false;
}
} else {
// Get the WebGL context
var gl = this._renderer.GL;

// Set texture interpolation to NEAREST
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These change the interpolation for the active texture I believe. There may not be an active texture at this time. I think for this to work, we have to store the texture smoothing value in RendererGL somewhere, and then right before we draw something using a texture, then we activate the texture and update its interpolation. Once we have a reference to the active texture as a p5.Texture, we can call its setInterpolation method rather htan using a raw WebGL call:

p5.js/src/webgl/p5.Texture.js

Line 337 in 03596de

setInterpolation (downScale, upScale) {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello, I'm new to this, and I wanted to share my understanding. Please correct me if I'm wrong:

  • It seems like I need to store the texture smoothing value in p5.RendererGL's constructor. I grasp that, but I'm curious – since there must be an active texture, should the user/artist manage that manually, or can we automate it here?
  • I have a similar question about setInterpolation as well.

I apologize if these questions seem basic. Even if you can't explain them, pointing me to some helpful resources would be greatly appreciated. Thank you!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right now, although it's not documented, you can set the interpolation of a specific texture by doing something like this in a sketch:

_renderer.getTexture(yourImage).setInterpolation(NEAREST, NEAREST); // or LINEAR, LINEAR

If we want it to only set the current texture, we don't need to store anything in RendererGL, and instead just have to do something like:

noSmooth() {
  if (this._tex) {
    this._tex.setInterpolation(NEAREST, NEAREST);
  }  // else maybe log a warning?
}

The reason to maybe to store something in RendererGL is if think the resulting behaviour is confusing:

texture(yourImage)
noSmooth()

texture(someOtherImage)
// this texture is not smoothed

...but that's an API decision we have to make. Do you have any preference as a user for how it should work?

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

this.setAttributes('antialias', false);
}
return this;
Expand Down