Support background(image) in WEBGL Renderer3D#8352
Support background(image) in WEBGL Renderer3D#8352davepagurek merged 5 commits intoprocessing:dev-2.0from
Conversation
src/core/p5.Renderer3D.js
Outdated
| const a0 = args[0]; | ||
|
|
||
| const isImageLike = | ||
| a0 instanceof p5.Image || |
There was a problem hiding this comment.
Ah right, tests are failing currently because p5 isn't globally available in p5 2.0 so that we can create smaller, more modular builds without importing everything.
Maybe rather than checking if something is an instance of a class, we use duck typing and check to see if it has the properties of an image, graphics, or media element? I think that would imply checking that a0 is not undefined and it has width, height, and canvas properties.
There was a problem hiding this comment.
Thank you for suggesting the changes @davepagurek. I’ve switched to duck-typing to detect image-like inputs by checking for width, height, and canvas (p5.Image/p5.Graphics). This keeps the behavior without requiring p5 on window.
|
Code looks good! I think the last ask would be to add a visual test to help ensure this works and continues to work when things change in the future. |
|
Thanks @davepagurek, I've added a WebGL visual test covering background(image) to ensure this behavior continues working. Please let me know if you’d like any other modification. Thank you |
|
Thanks, looking good! One thing that might help is if we can update the test to have maybe like a circle in the middle of the graphic so that we can also tell if anything changes with respect to scaling -- might catch some more possible regressions. then we're good to go! |
|
@davepagurek I've added a centered circle to the graphics in the webgl background(image) visual test to help catch scaling regressions and updated the expected screenshot accordingly. Thanks for the suggestion! |
davepagurek
left a comment
davepagurek
left a comment
There was a problem hiding this comment.
awesome, looks good to merge!
|
Thanks @davepagurek! |
2 participants
This PR applies the same fix for
background(image)in WEBGL to p5.js 2.0 as discussed in #8333.The change is implemented directly in
Renderer3D.background, allowing the renderer to correctly handle image-like inputs instead of forwarding them as color values.In WEBGL mode, when an image is passed to
background(), webGL color and depth buffers are cleared, the image is drawn in screen space with the camera reset and existing color-basedbackground()behavior is preserved.