The component seems to be working on my Quest 3's Default browser. That is, I'm able to enter the immersive mode and view the photo.

https://en.wikipedia.org/wiki/Anaglyph_3D#Stereo_conversion_(single_2D_image_to_3D) (red-blue, red-green, red-cyan...)

OrbitControls is probably not the best choice for panning in non-VR mode

Likely needs the component to emit an event

Many of our stereo pair images are RIGHT/LEFT rather than LEFT/RIGHT for easier viewing when doing the cross-eyes trick. It would be nice if this supported an option to switch the images.

Some cameras like Panasonic DMC-GX8 save images as .mpo.

An MPO file is a stereoscopic image consisting of two overlapping 2D images in JPG format. It's also known as a "stereoscopic pair" or "parallel stereo."

Wikipedia : https://en.m.wikipedia.org/wiki/JPEG#JPEG_Multi-Picture_Format

See example folder for a .mpo

Estimate the depth?
https://twitter.com/wesbos/status/1750710004707934626?t=XfzUwM--Hn5R4vmN0EcWCg&s=19

And then #22

We start to have more and more cameras hardcoded in the code

This is inevitable, but we should make it easier to add a new one and clearly see what's hardcoded.

At minimum, move this in dedicated function at the top of the file. But also consider storing these in a dedicated JSON file.

In #21, I hardcoded the assumption that any picture taken with Canon EOS R5 RF5.2mm F2.8 L Dual Fisheye was fisheye, but that's not true if they have been processed.

We should look at pixel colors in the corner and middle of the image to see if they are black. If they are, assume fisheye

They don't take 100% of the picture width

Do not start a Three.js scene before the user interacts with the component (to avoid potentially creating too many WebGL contexts), use a canvas2d fallback in the meanwhile.

Spatialify seems to allow taking spatial pictures: https://apps.apple.com/us/app/spatialify/id6471922894

We need a sample

To fix mobile support where max texture size is lower than the eye image size, we just realized the eye image.

Instead, we could split it in multiple images, used as different textures, potentially on different meshes.

This would allow keeping the full image resolution.

likely due to max WebGL texture size of 4096, see https://webglreport.com

I tried to run the example from 1901 on iPhone latest iOS.
The viewport is opened at the top of the page, not in place.
And it only shows one image, see

1. The projection isn't right (see example with vertical lines): is it due to 190deg fov?
2. the auto cropping isn't working properly (black at top / bottom): maybe start at least by assuming top / bottom are from a circle

Viewing VR180 leads to a strange sensation, it seems that only head rotation is used and the position stays fixed?

https://www.usa.canon.com/shop/p/rf5-2mm-f2-8-l-dual-fisheye

The demo doesn't load anymore on Chrome 97 :(

clicking Enter VR on a second image returns DOMException: Failed to execute 'requestSession' on 'XRSystem': There is already an active, immersive XRSession.

type="single" src="" src-right=""

When using this image as a sample, I get an error :-

stereo-img.js:204 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'width')
    at StereoImg.createEye (stereo-img.js:204:21)
    at StereoImg.initialize3DScene (stereo-img.js:311:18)
    at async StereoImg.parseImageAndInitialize3DScene (stereo-img.js:320:7)
    at async StereoImg.init (stereo-img.js:366:7)

You can keep this image as an example for your project, thanks

Looks like the image is downlowded 4 times, which doesn't play well if the server doesn't cache

I've tried a few SBS 3D images and I always get the same result: views fine in non-VR mode but the 'Enter VR' mode doesn't seem to enter the WebXR mode and instead just displays a binocular stereo view with image data only in the left eye, which does respond to headset movement but the right eye is empty and it just doesn't enter the WebXR view so there's no 3D visualisation. Here's two examples, one a VR180 fisheye SBS image from a Insta360 Evo and a non VR-180 3d image from a Sony Bloggie 3d camera. Example code :-

<stereo-img src="media/bloggie.jpg" wiggle="false"></stereo-img>

Vision Pro can take pictures.

Related: #33

https://www.apple.com/apple-vision-pro/ has Safari, and hopefully supports WebVR / WebXR.

Whoever has access to this device, please report back.

When I try switching to three 0.160, the render appears brighter.

For a picture like that one:

Users do not expect to see a sphere:

But would prefer to see it in a square.

https://www.leiainc.com/lume-pad-2

Lume Pad 2 has a high resolution 3D display with head tracking, rear (5K) and front stereo cameras, both supporting 3D photo/ video capture and 3D video chat.

@Josh3DIRL maybe you can help by sharing a sample?

I have a lot of pictures taken on my phone for photogrammetry. It would be nice if I could skip the stitching process and provide both images to the viewer.

Hello, firstly, thank you for your work on this project! I found this project somewhat randomly, searching on Github, so please bear with me.

I'm running into an issue when I started serving my images through S3, that hopefully has an easy fix.

Uncaught (in promise) DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
    at parseStereo (https://cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/stereo-img.js:84:128)
    at async HTMLElement.parse (https://cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/stereo-img.js:220:25)
    at async HTMLElement.parseImageAndInitialize3DScene (https://cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/stereo-img.js:275:5)
    at async HTMLElement.init (https://cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/stereo-img.js:292:5)

I poked around a little bit, and apparently you can set an option to allow anonymous cross-origin on the canvas image: https://stackoverflow.com/questions/22097747/how-to-fix-getimagedata-error-the-canvas-has-been-tainted-by-cross-origin-data

Setting the headers as outlined in the answer there is easy to do on my end.

Perhaps there are alternative solutions as well?

Thanks for taking a look.

Left-right photos are anamorphic at the top and bottom of the screen.
Whatever the format !
Tested on Quest 3.

You can compare your pictures with stereo photo maker results
(Make html5 stereo viewer option)

I cannot use your component !

Apparently it's a thing? https://github.com/webcomponents/custom-elements-manifest

My Wordpress site is stripping the metadata and it results in an error after parsing the EXIF and other headers:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'GPano')
    at parseVR (stereo-img.js:23:19)
    at async HTMLElement.parse (stereo-img.js:218:25)
    at async HTMLElement.parseImageAndInitialize3DScene (stereo-img.js:275:5)
    at async HTMLElement.init (stereo-img.js:292:5)

A simple null-coalesce should solve the problem, or just short-circuiting and going with defaults if exif is undefined.

Looks like https://stereo-img.steren.fr/ doesn't work anymore

Look at left right image correlation