setFrame() under WEBGL environment not rendering correct frame

[pacpapapa]

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.1

Web browser and version

Arc 130.0.6723.117

Operating system

macOS 13.2.1

Steps to reproduce this

Steps:

1. Here is an example: https://editor.p5js.org/a25811342/sketches/ctcrkd_71
2. gif.getCurrentFrame() shows that it does apply assigned frame to the object.
3. However, when using image() to render the image, the one in WEBGL environment is still, but the other one works fine with default renderer. (object be placed in another layer without WEBGL using createGraphics())

Snippet:

let gif;
let layer2d;

function preload() {
  gif = loadImage('Rotating_earth_(large).gif');
}

function setup() {
  createCanvas(400, 400, WEBGL);
  layer2d = createGraphics(width, height);
}

function draw() {
  background(220);
  
  let gifFrame = frameCount % (gif.numFrames());
  gif.setFrame(gifFrame);
  print(gif.getCurrentFrame());
  
  // setFrame() cannot apply to WEBGL environment.
  image(gif, -200, -200, 200, 200);
  
  // but work fine with default renderer.
  layer2d.image(gif, 0, 0, 200, 200);
  image(layer2d, 0, 0);
}

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[rishabhs-rizz]

good issue, could you please assign this issue to me

[davepagurek]

Hey @rishabhs-rizz, sorry I missed this, I'll assign it to you!