Should stereo images work on a Quest 3

[hwbraun]

Should aframe-stereo-component work on a Quest 3? I tried many times over the last few weeks, but end up with a white canvas, a black canvas or a non-stereo view. I cannot even get the included examples to work, hence I feel like I am missing something fundamental here. Could someone please give me a hint regarding the source of my issue? Basically, what I am trying to do is viewing real-time stereo images or 360 degree views from mountain-top HPWREN cameras. In this example, both Firefox and the Meta browser show just a black canvas, as soon as I try going into VR mode. stgo.txt

[vincentfretin]

Are you using the master build? I commented about it in https://github.com/c-frame/aframe-stereo-component/issues/50#issuecomment-2034431039

[hwbraun]

Are you using the master build?

Yes, I used aframe-master.zip and aframe-stereo-component-master.zip. Then I called them with:

I commented about it in https://urldefense.com/v3/__https://github.com/c-frame/aframe-stereo-component/issues/50*issuecomment-2034431039__;Iw!!Mih3wA!D0z46HxqRDd1vu1YAs73vxRhxHfDrQ4LtGgBtvcK2EoU2k_SDjRGEvJj9et7uLAxAfN-dfKQFAVNXM5LqQH5Kw$

Yes, I looked at that a number of times before, and that is basically the code I use. I wonder whether I am missing something outside the demo codes, like whether I need some other modules. For example, I have not done anything about WebXR or Three or so, I had just called the aframe and aframe-stereo modules, as per the stgo.txt file I had included.

Thank you so much for your response!

-- Reply to this email directly or view it on GitHub: https://urldefense.com/v3/__https://github.com/c-frame/aframe-stereo-component/issues/52*issuecomment-2059381026__;Iw!!Mih3wA!D0z46HxqRDd1vu1YAs73vxRhxHfDrQ4LtGgBtvcK2EoU2k_SDjRGEvJj9et7uLAxAfN-dfKQFAVNXM6Twm8A2Q$ You are receiving this because you authored the thread.

Message ID: @.***>

[hwbraun]

In case this helps, when I run the version at https://aframe-stereo-component-demo.glitch.me/examples/basic_image/index.html it is the only version that I saw as working fine, as do the other two examples in /examples. I don't see a difference between the code which its basic_image/index.html uses and mine, but when I copy the four index.html files, as well as the build.js and index.js into a directory structure, it does not work on my own web server (not sure whether I got the correct index.js file from below /examples/... in the URL above).

I would really like to get this to work, since it seems useful to firefighters with the many cameras we have on mountain tops (see https://www.hpwren.ucsd.edu/cameras/ ) and the large fires we often have. They already like the non-stereo 360 degree views. We make camera data products, both real time and archived, publicly available. Most of those cameras have separate color and monochrome chips, about 75 mm apart, with the difference between the chips the human eye is quite willing to ignore (well, you might get headaches). Typically four of those two-barrel cameras, each pretty well locked down and using a 90+ degree FoV, since no machine may contain any moving parts, are installed at those sites. The four times two images can be slapped together for an approximation of a 360 degree view. Not super pretty, but good enough for what I want. When I manually create one of those stereo images and shoehorn them into a Quest 2 or Quest 3, they look interesting, using Skybox or whatever, but a 75 mm inter pupil distance does not get you very far. Adding an X offset of 15 pixels to one of the images to get them to look more hyperstereo-ish actually makes them look pretty amazing.

Please note that while I have off and on worked with VRish stuff since about the mis-1990s, starting with GL (before OpenGL made it less fun, at least for me) on a Silicon Graphics with shutter glasses, I am really not an expert in VR and am more into computer networks.

Just trying to point out the hopefully interesting use case here. If it works, it may be easy enough to use by non-IT folk, without having to send them to class.

[vincentfretin]

I just tested the basic_video/index.html demo on Quest 3 where I changed the two scripts to

<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>         
<script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-stereo-component@a3144d1/dist/aframe-stereo-component.min.js"></script>

you need to click on the canvas before clicking on VR, and the video stops when it ends. When adding the loop="true" attribute on video tag, the video played in loop. To autoplay the video using the usual attributes, it's doesn't work when using the video tag in assets. It works if you put it outside the a-scene, directly in body using:

<video src="MaryOculus.mp4" id="myVideo" autoplay="true" playsinline="true" muted="true" loop="true" style="position:absolute;opacity:0"></video>

Oh I just read again your comment, it's not a video stream you have it's two images.

[vincentfretin]

I just tested your two images on Quest 3 with

<html>
  <head>
    <title>A-Frame Layer Component - Basic</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-stereo-component@a3144d1/dist/aframe-stereo-component.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <img id="left" src="second.jpg">
        <img id="right" src="first.jpg">
      </a-assets>

      <a-camera id="camera" look-controls position="0 0 0" stereocam="eye:left;"></a-camera>

      <a-sky id="sky1" src="#left" stereo="eye:left"></a-sky>
      <a-sky id="sky2" src="#right" stereo="eye:right"></a-sky>

    </a-scene>
  </body>
</html>

it works without issue.

[vincentfretin]

I was using https with a local webpack dev server while testing (using https://github.com/networked-aframe/naf-valid-avatars/ repo and I created public/stereo.html in here) Can you create an example on https://glitch.com/~aframe where you reproduce your issue?

[hwbraun]

Oh I just read again your comment, it's not a video stream you have it's two images.

Yes, but that gives me an idea: I have many fire videos at https://www.youtube.com/user/hpwren/videos A significant number are multi-camera collages, and a few of them are somewhat 3D capable, based on 75mm distance between the M16 camera "eyes." A good example could be https://youtu.be/u55k-U_Xpc0 of the Sept 2020 Bobcat Fire around the Mt. Wilson Observatory north of Los Angeles. If I re-encode this with, say, a 15 pixel X offset for one of the "eyes," that should really help seeing whether the video significantly improves in a stereo presentation. If so, this may even be useful for https://www.hpwren.ucsd.edu/FIgLib/

Thanks!

[hwbraun]

I cut and pasted your code, so there should not have been typos on my end. I had to make one change, though:

as we are right in the midst of moving the HPWREN web site and data archive to AWS, and as a consequence of that, right now I do not have an httpS capable web server available. When I tried your HTML code I got: Firefox: black canvas after clicking VR Meta browser: showed 360 degrees, but only showed the color channel Neither browser showed an AR button, just a VR button. Btw, if there is some song and dance involved to get Javascript (modules) working, I probably have not done it, as I assumed they were self-contained. I started to try npm now and then doing "npm install" in the TLD of the aframe and aframe-stereo directories. I wonder whether I am missing dependencies or so, as I was never able to see both channels at the same time while using my own HTML files. > I just tested your two images on Quest 3 with > ```html > > > > > > > > > > > > > > > > > > >

it works without issue.

-- 
Reply to this email directly or view it on GitHub:
<a href="https://urldefense.com/v3/__https://github.com/c-frame/aframe-stereo-component/issues/52*issuecomment-2061941746__;Iw!!Mih3wA!DhhgMC7q4v_SvW6g0frsvBzusYnx_mxW78KbX8QmZGiuCOifEdu2UvvDmSg9U6ye6oZtnMRY9qq-_X2Y3iO5jg$">https://github.com/c-frame/aframe-stereo-component/issues/52#issuecomment-2061941746</a>
You are receiving this because you authored the thread.

Message ID: ***@***.***>

[hwbraun]

I had not used glitch before, hence I am not sure whether I did correctly what you wanted, but it resulted in a https://opposite-green-asp.glitch.me/ URL. When I tried it I again ended up with black background and it still seems to be in that state, whether I use a Quest 3 or a browser in Ubuntu.

I was using https with a local webpack dev server while testing (using https://urldefense.com/v3/__https://github.com/networked-aframe/naf-valid-avatars/__;!!Mih3wA!C16ovMi6d8jHJD_E7pnQLtsVaej3l4z0njV_XRF4gRx60WKjf9GB_Km8MrEDPKCTipvn4ewIOeF-3Il-y6K-Cg$ repo and I created public/stereo.html in here) Can you create an example on https://urldefense.com/v3/__https://glitch.com/*aframe__;fg!!Mih3wA!C16ovMi6d8jHJD_E7pnQLtsVaej3l4z0njV_XRF4gRx60WKjf9GB_Km8MrEDPKCTipvn4ewIOeF-3InTsufT_Q$ where you reproduce your issue?

-- Reply to this email directly or view it on GitHub: https://urldefense.com/v3/__https://github.com/c-frame/aframe-stereo-component/issues/52*issuecomment-2061946468__;Iw!!Mih3wA!C16ovMi6d8jHJD_E7pnQLtsVaej3l4z0njV_XRF4gRx60WKjf9GB_Km8MrEDPKCTipvn4ewIOeF-3Im0EdCSIA$ You are receiving this because you authored the thread.

Message ID: @.***>

[vincentfretin]

You need to upload your two images in assets, copy the link of the uploaded assets and change it in the html instead of having first.jpg and second.jpg. You absolutely need https to start a VR session in the headset, how did you test it until now? I'm opening in Meta browser in the headset with the url https://192.168.1.15:8080/stereo.html when I develop locally or a glitch url, getting the link with https://hmd.link or Meta Quest Web Launch instead of typing it in the headset. Firefox doesn't support WebXR, it's still WebVR, so I wouldn't use that. Chrome has WebXR on desktop Windows, but I personally never tried that, and I actually don't know how to link a Quest headset with Chrome desktop, I don't have Windows. You don't need to bother with npm here, it's just index.html and two scripts tags. To show the AR button you need to explicitly enable it in aframe 1.5.0 with for example xr-mode-ui="XRMode:xr" see https://aframe.io/docs/master/components/xr-mode-ui.html

Meta browser: showed 360 degrees, but only showed the color channel

So it's working, you see the images in the Quest 3? What do you mean by color channel? It's using a RGBA texture. Your first image is in colors, your second image is mostly gray.

[vincentfretin]

If you're not in https, you can't click on VR button when viewing in the headset, and you will only see the left eye image that may be the gray one.

[vincentfretin]

When you say black background, it's because you didn't specify the correct urls for the images, so it's 404 not found. Look at the Chrome console for errors (inspect the page, go to console tab).

[vincentfretin]

Maybe I'm stating the obvious, maybe not. To test locally, you still need a server, you can't just open index.html and references images from the filesystem.

[hwbraun]

Thank you for all the info you sent. I will follow up later today when I am more awake.

Maybe I'm stating the obvious, maybe not. To test locally, you still need a server, you can't just open index.html and references images from the filesystem.

Running a web server is easy, I installed apache2 when I needed it for local testing. My problem was/is the SSL certificate. But, now that you told me that it will not work without, I will find a way.

Thanks again, I will let you know when I get it to work.

-- Reply to this email directly or view it on GitHub: https://urldefense.com/v3/__https://github.com/c-frame/aframe-stereo-component/issues/52*issuecomment-2063169688__;Iw!!Mih3wA!AbJpboNaZbkotI6E2BXU7pyDzRmg9MWNoVN28F4-ly3rxx9POQlCjEIyVUZTGhjZ7lWFG_Rdz5rRc-dWwpy_dg$ You are receiving this because you authored the thread.

Message ID: @.***>

[vincentfretin]

For development, webpack dev server generates a self-signed certificate. The repo https://github.com/c-frame/aframe-cursor-teleport is using such a config. I'll modify this repo with a similar config soon. If you have git and node installed, execute the following commands:

git clone git@github.com:c-frame/aframe-cursor-teleport.git
cd aframe-cursor-teleport
npm install
npm start

you will see the different urls you can use, for example https://192.168.1.15:5000/

create a file examples/stereo/index.html and go to https://192.168.1.15:5000/examples/stereo/index.html

[hwbraun]

Yay, that was it. It works now. Thanks a lot for your help!

For development, webpack dev server generates a self-signed certificate. The repo https://urldefense.com/v3/__https://github.com/c-frame/aframe-cursor-teleport__;!!Mih3wA!EP3bu2pC4MpAVSFu90-IPplxVA0z9qUvIF5altyrzyxkGnsaGTjpq5qoFEE6d_7TfLzTG3jNVDJGJbHRMznN0Q$ is using such a config. I'll modify this repo with a similar config soon. If you have git and node installed, execute the following commands:

git clone ***@***.***:c-frame/aframe-cursor-teleport.git
cd aframe-cursor-teleport
npm install
npm start

you will see the different urls you can use, for example https://urldefense.com/v3/__https://192.168.1.15:5000/__;!!Mih3wA!EP3bu2pC4MpAVSFu90-IPplxVA0z9qUvIF5altyrzyxkGnsaGTjpq5qoFEE6d_7TfLzTG3jNVDJGJbF4dPy44A$

create a file examples/stereo/index.html and go to https://urldefense.com/v3/__https://192.168.1.15:5000/examples/stereo/index.html__;!!Mih3wA!EP3bu2pC4MpAVSFu90-IPplxVA0z9qUvIF5altyrzyxkGnsaGTjpq5qoFEE6d_7TfLzTG3jNVDJGJbElUCYp1Q$

-- Reply to this email directly or view it on GitHub: https://urldefense.com/v3/__https://github.com/c-frame/aframe-stereo-component/issues/52*issuecomment-2063408003__;Iw!!Mih3wA!EP3bu2pC4MpAVSFu90-IPplxVA0z9qUvIF5altyrzyxkGnsaGTjpq5qoFEE6d_7TfLzTG3jNVDJGJbGzSPtU3A$ You are receiving this because you authored the thread.

Message ID: @.***>

[vincentfretin]

Alright! Let us know what you'll be able to do with those cameras.

[hwbraun]

I have another question, if I may. I have been fighting basically all morning with an inability to get the real-time images into the VR.

These work:

loading from a local file

loading from the laptop where thw webdev server is running:

This does not work: where the real-time goodies are:

This pointer  works fine when accessed with a web browser, but on the Q3 creates black nothingness.

I will look further into this, e.g., may be a packet trace could reveal whether the two image (monochrome and color) were really requested and received.

If you have any thoughts of why I cannot access remote images across the network, I would appreciate it if you could let me know.

Alright! Let us know what you'll be able to do with those cameras.

-- Reply to this email directly or view it on GitHub: https://urldefense.com/v3/__https://github.com/c-frame/aframe-stereo-component/issues/52*issuecomment-2064206489__;Iw!!Mih3wA!GYIi07G2RmVrM0lUM3GwSBFqi8QvtBL7R_i8SyS1S6XUbNU4XyZY1fUOPto1atvN6JMoVjheRyDzgVSveED85A$ You are receiving this because you authored the thread.

Message ID: @.***>

[hwbraun]

Never mind, Gemini told me that it is a CORS issue I ran into.

I have another question, if I may. I have been fighting basically all morning with an inability to get the real-time images into the VR.

These work:

loading from a local file

loading from the laptop where thw webdev server is running:

This does not work: where the real-time goodies are:

This pointer  works fine when accessed with a web browser, but on the Q3 creates black nothingness.

I will look further into this, e.g., may be a packet trace could reveal whether the two image (monochrome and color) were really requested and received.

If you have any thoughts of why I cannot access remote images across the network, I would appreciate it if you could let me know.

Alright! Let us know what you'll be able to do with those cameras.

-- Reply to this email directly or view it on GitHub: https://urldefense.com/v3/__https://github.com/c-frame/aframe-stereo-component/issues/52*issuecomment-2064206489__;Iw!!Mih3wA!GYIi07G2RmVrM0lUM3GwSBFqi8QvtBL7R_i8SyS1S6XUbNU4XyZY1fUOPto1atvN6JMoVjheRyDzgVSveED85A$ You are receiving this because you authored the thread.

Message ID: @.***>