mpetroff
commented
1 week ago The "distortion" is just a pinhole camera projection.
essentially using pannellum to do this computation for me
This is done using WebGL, so it can't use anything with CSS. It can only project the panorama itself.
If you're using equirectangular images, you could load the image yourself and a pre-rendered overlay, selectively draw them to a <canvas>, and configure Pannellum similar to what's described in https://github.com/mpetroff/pannellum/issues/743#issuecomment-501481934.
My goal is similar to #1223, but I think my question is different enough for it to be its own issue.
I'm attempting to make a circular region that displays on the panorama when the user hovers over it. The region should be distorted such that it appears to be on the surface of the objects in the panorama. I have the necessary data about my panorama to compute the normal surface (a depth map), so I can determine how the region should be distorted when facing it directly. I also know how to set the CSS so that it appears distorted. However, as the view of the panorama changes (pitch and yaw), the distortion of the region changes. I put together this diagram with Google Maps to show what I mean, but I believe this is universal for projecting a panorama to a 2d view (the region's also a square, not circle, but I think the concept is the same):
In theory, I could write a function called whenever the pitch and yaw changes, and somehow compute the new distortion based on that pitch and yaw. However, I was wondering if I could just make the region distort the same as the panorama's distortion, essentially using pannellum to do this computation for me. If that's not possible, any tips on how to compute the distortion based on pitch and yaw would be really helpful, as I think the math is a bit beyond me.
And thanks for creating and sharing this amazing library, it's been invaluable for my project!