GIF's don't update when using setUniform

[aferriss]

Most appropriate sub-area of p5.js?

• [ ] Accessibility (Web Accessibility)
• [ ] Build tools and processes
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Friendly error system
• [X] Image
• [ ] IO (Input/Output)
• [ ] Localization
• [ ] Math
• [ ] Unit Testing
• [ ] Typography
• [ ] Utilities
• [x] WebGL
• [ ] Other (specify if possible)

Details about the bug:

Gif's don't update their current frames when being sent to a custom shader using the setUniform() function. However, if you make a call to image() using the gif, then the texture will begin updating. We shouldn't need to do this, however one small workaround is to draw your image very small offscreen.

• p5.js version: 1.4
• Web browser and version: Chrome 96
• Operating System: Mac OSX
• Steps to reproduce this:

1. Load a gif
2. Create a custom shader
3. Try to send the gif to the custom shader using setUniform()

You can see an example showing the issue here

[Yash621]

@aferriss can I work on this issue ?

[aferriss]

@Yash621 That would be great, thank you!

[davepagurek]

If this is still being worked on, I suspect that the issue is that the texture only updates data on the GPU if a _dirty flag is set: https://github.com/processing/p5.js/blob/05c93858bcf2ed8f7b1c4362cd459c8312369112/src/webgl/p5.Texture.js#L238

...but inside p5.Image, when animating gifs or updating pixels, it uses a flag called _modified instead: https://github.com/processing/p5.js/blob/05c93858bcf2ed8f7b1c4362cd459c8312369112/src/image/p5.Image.js#L843

We might just need to make the above use _dirty (which is being correctly used in the WebGL text rendering system, I believe.)

[AryanKoundal]

@davepagurek @Qianqianye Can I work on this issue and submit a PR? I'll be working by taking https://github.com/processing/p5.js/issues/5511#issuecomment-1182661814 as a reference.

[davepagurek]

Thanks @AryanKoundal, I'll assign this to you!

[AryanKoundal]

@davepagurek I did as you told in https://github.com/processing/p5.js/issues/5511#issuecomment-1182661814 ,

• Before the code change the gif was working when there was a call to image() using the gif, then the texture will started updating
• After changing the _modified variable to _dirty in the https://github.com/processing/p5.js/blob/05c93858bcf2ed8f7b1c4362cd459c8312369112/src/image/p5.Image.js#L843 the texture doesn't update even after the call. What should I do now ?

[davepagurek]

Ah, I realize the _dirty flag is for ImageData, not images, so it is still checking for isModified() here: https://github.com/processing/p5.js/blob/05c93858bcf2ed8f7b1c4362cd459c8312369112/src/webgl/p5.Texture.js#L209

Do you know if it's going through this branch at all? https://github.com/processing/p5.js/blob/05c93858bcf2ed8f7b1c4362cd459c8312369112/src/webgl/p5.Texture.js#L210

Either by setting breakpoints or adding console.log statements, probably the next step would be to determine where things are breaking. If it's going into that branch, then we have to determine why it's not actually updating the texture when it thinks it is. If it's not, we have to diagnose why it doesn't appear to be modified, e.g. maybe also check that it's going into this branch here to update the gif each frame? https://github.com/processing/p5.js/blob/05c93858bcf2ed8f7b1c4362cd459c8312369112/src/image/p5.Image.js#L247

[davepagurek]

Update: It looks like the issue might be because in texture() and image() we check if the argument is a gif and call _animateGif if so: https://github.com/processing/p5.js/blob/00821f33ca1d8a6990364568f0374c4aaf713faa/src/core/p5.Renderer2D.js#L159-L161

Maybe we need to add a similar check to setUniform here in this branch? https://github.com/processing/p5.js/blob/d3fb62b6706f39ca4d277b59f8bc1fc2386fa806/src/webgl/p5.Shader.js#L477-L482