search

mrdoob / three.js

JavaScript 3D Library.
https://threejs.org/
MIT License
101.98k stars 35.33k forks source link

When in VR mode video is slightly of they dont match give a blurry view with Google Cardboard. #23112

Closed s3bubble closed 2 years ago

s3bubble commented 2 years ago

Describe the bug

I am trying to get something up an running for videojs vr. Everything thing works I just have one issue when running the project on a google cardboard the image is slightly of.

See this image. Screenshot 2021-12-29 at 21 15 29

You should notice the swans are not aligned.

To Reproduce

Clone this repo. https://github.com/s3bubble/videojs-vr

git clone https://github.com/s3bubble/videojs-vr.git

npm start.

Open in Safari browser with user agent iphone set.

Click play and then the enter vr button overlayed

You should then see the issue I am getting with the images being slightly off.

This is the same issue I am getting when using a Google cardboard.

All the code is in this file.

https://github.com/s3bubble/videojs-vr/blob/d565c9865fbc69a7283a4397549677e8a3f57a98/src/plugin.js#L148

Thanks

mrdoob commented 2 years ago

Please, provide a working jsfiddle. Closing in the meantime.

s3bubble commented 2 years ago

Sure thing here you go I have used jsbin you can see the code in the javascript tab.

https://output.jsbin.com/fuqiyawatu/8

Open in Safari and set the user agent. It will show the same issue I am getting on iPhone.

Screenshot 2021-12-30 at 10 07 59

Thanks

s3bubble commented 2 years ago

Can this issue be reopened now?

Mugen87 commented 2 years ago

You are using three.js in version r83 as well as VREffect and VRControls. We do not maintain this code anymore.

Please redirect your question to the forum.

s3bubble commented 2 years ago

Hi,

Thanks for the response happy to use the latest version but I cant find one example that works on my phone with three.js.

I know you have the examples.

https://threejs.org/examples/?q=video#webxr_vr_video

But none of these work on my phone. IMG_1126 IMG_1127 IMG_1128

The only tutorial I could get to work was from here.

https://hermionewy.github.io/webVR_tutorial/

All of them say webxr not available i am testing on and iPhone 12.

Do you have any working three.js video vr examples, that will work on an iPhone with a Google Cardboard?

mrdoob commented 2 years ago

No, we don't. Sorry.

s3bubble commented 2 years ago

It will work tho right? There are just no examples? I can try put one together for 360 vr.

mrdoob commented 2 years ago

We do not support Cardboard anymore. Sorry.

s3bubble commented 2 years ago

Ok thanks @mrdoob at least I know where we stand so the only way to get this working with cardboard or iPhone 360 video vr is to use the old webvr setup.

This guy seems to have attempted something https://github.com/thomasdeppisch/videojs-xr maybe I can grab something from this.

I guess people are no longer using Google cardboard for vr? need to get up to speed with this not really looked into vr much just have a Google cardboard lying about to test with.

Just prototyping and testing some stuff at the moment.