Add sphere mapped background Function for 360-Degree Textured Background

[perminder-17]

Increasing Access

After the merge of the issue #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
• 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🙂