Add sphere mapped background Function for 360-Degree Textured Background

perminder-17 commented 9 months ago

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 commented 9 months ago

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

haroon10725 commented 8 months ago

@davepagurek @Qianqianye Can I work on this?

davepagurek commented 8 months ago

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 commented 8 months ago

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🙂

processing / p5.js