Add sphere mapped background Function for 360-Degree Textured Background

[perminder-17]

Increasing Access

After the merge of the issue https://github.com/processing/p5.js/pull/6735 I believe addition of a new function, sphereMappedBackground(img) with hopefully a better name maybe, to enhance the background rendering in p5.js will be worth it. This function aims to create a spherical mapping effect, where a simple 2D image transforms into a 360-degree panoramic view when applied as a texture to a large sphere. The intention is to provide a visually immersive experience when using orbitControl() within the scene. Implementing this feature will enhance the overall realism and user engagement in three-dimensional environments.

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [x] WebGL
• [ ] Build Process
• [ ] Unit Testing
• [ ] Internalization
• [ ] Friendly Errors
• [ ] Other (specify if possible)

Feature request details

Refer to the following p5.js sketch for a visual representation of the proposed feature: Sketch Link. The idea is to make the process of achieving a 360-degree image effect more accessible through a straightforward function.

[davepagurek]

Thanks for writing up an issue for this! I think this piece is super helpful for tying scenes together that use imageLight.

[haroon10725]

@davepagurek @Qianqianye Can I work on this?

[davepagurek]

I think @perminder-17 is working on this one currently. It would be great to get your input on it too once a PR is up for review though!

[perminder-17]

I think @perminder-17 is working on this one currently. It would be great to get your input on it too once a PR is up for review though!

Sorry for the delay. I was busy with university exams. I will continue working on this very soon🙂