split screen for over under images on sky

[okwme]

I'm trying to use an over under panorama background image on a sky element but getting errors.

 <a-scene>
      <a-camera position="0 0 10" cursor-visible="false" stereocam="eye:left;"></a-camera>
      <a-sky src="http://example.com/image.png" stereo="eye:left; split:vertical;"></a-sky>
      <a-sky src="http://example.com/image.png" stereo="eye:right; split:vertical;"></a-sky>
</a-scene>

i also tried it like this:

  <a-scene>
      <a-assets>
          <img src="http://example.com/image.png" id="img">
      </a-assets>
      <a-camera position="0 0 10" cursor-visible="false" stereocam="eye:left;"></a-camera>
      <a-sky src="#img" stereo="eye:left;split: vertical;"></a-sky>
      <a-sky src="#img" stereo="eye:right;split: vertical;"></a-sky>
  </a-scene>

and like this:

 <a-scene>
      <a-camera position="0 0 10" cursor-visible="false" stereocam="eye:left;"></a-camera>
      <a-sky color="#F00" stereo="eye:left;"></a-sky>
      <a-sky color="#00F" stereo="eye:right; "></a-sky>
</a-scene>

On all occasions I get the error: DOMException: Failed to execute 'querySelector' on 'Document': The provided selector is empty.

I saw there was talk about this in this merged Pull Request but even after using the updated verison I still get the error.

I installed through npm with the following versions:

    "aframe": "^0.5.0",
    "aframe-stereo-component": "^0.3.1",

I'm including them using require() as instructed but also tried using the CDN embed with same errors.

[okwme]

Actually the example cube also doesn't work for me, I just see both cubes. Probably also important to note I'm using vue.js (a React-like framework) with webpack.

[okwme]

aha i'm using aframe v0.5.0. ok test are working, but split still doesn't work with images.

[oscarmarinmiro]

I'd say it should work now with the new release https://github.com/oscarmarinmiro/aframe-stereo-component/releases/tag/v0.5.0 ... (on Aframe v0.5.0) .. it that's not the case just say, I'll take a look (I fixed a bug that spitted out the same error as yours in this release)

[AndreaMonzini]

@oscarmarinmiro Hello i have similar problem. I tried to use stereo <a-sky> with equirectangular top dow, i tried to use two different equirectangular textures separated for left and right eye, i tried to project textures into two spheres but it's not working with aframe v0.5.0. and aframe-stereo-component v0.5.0

Simple example with two equirectangular textures:

<a-camera position="0 0 10" cursor-visible="false" stereocam="eye:left;"></a-camera>
        <a-sky src="1.jpg" stereo="eye:left;"></a-sky>
        <a-sky src="2.jpg" stereo="eye:right;"></a-sky>

Could you provide simple example with stereo <a-sky> ? ( even without textures) If useful i can prepare equirectangular textures with Blender.

Anyway thank you for the great stereo component !

[okwme]

@oscarmarinmiro Thanks for taking the time to reply!

I've updated the stereo-component to 0.5.0 as well as a-frame to 0.5.0 and have less success than before. I am now only able to separate the left and right view using the sky with colored backgrounds like:

<a-scene>
      <a-camera position="0 0 10" cursor-visible="false" stereocam="eye:left;"></a-camera>
      <a-sky color="#F00" stereo="eye:left;"></a-sky>
      <a-sky color="#00F" stereo="eye:right; "></a-sky>
</a-scene>

When I use images as background for the sky like this:

<a-scene>
      <a-assets>
          <img src="http://example.com/image.png" id="img">
          <img src="http://example.com/image2.png" id="img2">
      </a-assets>
      <a-camera position="0 0 10" cursor-visible="false" stereocam="eye:left;"></a-camera>
      <a-sky src="#img" stereo="eye:left;"></a-sky>
      <a-sky src="#img2" stereo="eye:right;"></a-sky>
  </a-scene>

I see nothing. When i use images as background for the sky like this:

<a-scene>
      <a-camera position="0 0 10" cursor-visible="false" stereocam="eye:left;"></a-camera>
      <a-sky src="url(http://example.com/image.png)" stereo="eye:left;"></a-sky>
      <a-sky src="url(http://example.com/image.png)" stereo="eye:right;"></a-sky>
  </a-scene>

I am only able to see the second <a-sky>. If I switch the order of the <a-sky> elements it is always the last declared which appears in both cameras.

In both of the image scenarios I receive this error twice:

Uncaught (in promise) DOMException: Failed to execute 'querySelector' on 'Document': 'http://myresource.com/image.png' is not a valid selector.

adding split: vertical; to the <a-sky> element does not appear to have any effect although that is my ultimate goal in order to avoid using two images instead of one vertically split image.

Is it actually possible to use vertical:split with an image or is it designed to only be possible with a video element?

[AndreaMonzini]

Maybe this issue and issue #19 should merged:

[oscarmarinmiro]

Images should work now, new release here:

https://github.com/oscarmarinmiro/aframe-stereo-component/releases/tag/v0.6.0

There's an example in the README for images, you can also go here http://bl.ocks.org/bryik/4bf77096d3af66b11739caaf01393837 for a how-to clip an over-under image into two separate 'eye' files. Sorry for the inconvenience, over/under images still not implemented in just one image file.