WebGL setAttributes causes image interpolation to default to LINEAR

[RandomGamingDev]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

1.11

Web browser and version

129.0.6668.58 & 115.15.0esr

Operating system

Debian 12

Steps to reproduce this

Steps:

1. Call setAttributes
2. setInterpolation on a texture to NEAREST
3. Render the texture and watch it not work

Example (working sketch located at https://editor.p5js.org/PotatoBoy/sketches/tFXOSAnZV):

let img;
let canvas;

function preload() {
  img = loadImage('test.png');
}

function setup() {
  canvas = createCanvas(400, 400, WEBGL);
  setAttributes({ alpha: true });

  canvas.getTexture(img).setInterpolation(NEAREST, NEAREST);
}

function draw() {
  background(0);
  image(img, -width / 2, -height / 2, width, height);
}

Result:

Expected Result:

Note: Related to #6325 which is encompassed by this issue

[RandomGamingDev]

Calling _renderer.getTexture(img).setInterpolation(NEAREST, NEAREST); fixes it for both Chrome and Firefox unlike #6325 where it only fixes it for Chrome and Firefox works by default.

[samarsrivastav]

hey @RandomGamingDev !! I was trying to reproduce the issue, and found out that adding the setAttribite like this setAttributes('alpha' ,true); instead of a key value pair generates the desired output

demo

[davepagurek]

The core issue here is that setAttributes invalidates previous returned values from createCanvas. We're refactoring the rendering system in p5 2.0 to not do this any more, so we can check back in on this issue when that's further along 🙂

[samarsrivastav]

Thanks for the clarification!
Looking forward to the p5 2.0 update — I’ll keep an eye on the progress. Appreciate the heads-up!