a-videosphere: 180 degree support and SBS support.

[Clodo76]

https://aframe.io/docs/1.5.0/primitives/a-videosphere.html#equirectangular-video

• Minimal: doc report 5000 as default values, in code is 500.
• Suggestion: report the 'rotation' attribute also in the a-videosphere doc page, it's a typical need adjust that, like your example in aframe/examples/boilerplate/360-video: <a-videosphere rotation="0 -90 0" src="#video" play-on-click></a-videosphere>
• First question: it's possible to playback a 180 degree video? This i think maybe supported, like change texture scale.
• Second question: it's possible to provide a 360 or 180 side-by-side?

Thanks

[vincentfretin]

For your second question, for 360 stereo video, you can look at https://github.com/oscarmarinmiro/aframe-stereo-component and there is actually also a half mode for 180 videos but I never used it. I used it mainly with videos and single image with top=left eye and bottom=right eye.

[dmarcos]

Feel free to submit a PR with doc improvements.

For first question. It would be possible to playback 180 degrees video but we haven't seen much demand. What's the format / special about it? 180 video is not just equirectangular too? Can always be supported via 3rd party component.

[RomanIvn]

Answering the first question for future generations, for non-equirectangular but spherical projection (like a 180 fisheye) as such:

Using a custom shader on a videosphere:

    <script>
      AFRAME.registerShader('fisheyesphere', {
        schema: {
          src: { type: 'map', is: 'uniform' }
        },
        vertexShader: `
          varying vec3 vNormal;

          void main() {
            vNormal = normal;
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
          }
        `,
        fragmentShader: `
          uniform sampler2D src;

          varying vec3 vNormal;

          void main() {
            vec2 uv = normalize( vNormal ).xy * 0.5 + 0.5;
            vec3 color = texture2D( src, uv ).rgb;

            gl_FragColor = vec4( color, 1.0 );
          }
        `
      });

    </script>

    <a-videosphere src= "#fishvideo" play-on-click  geometry="phiLength: 180; phiStart: 0;" rotation="90 0 0" position="0 0 0" material="shader: fisheyesphere"></a-videosphere>

this approach can be adapted to dual fisheye lenses 360 thus answering the second question aswell. ref: eye projection in three.js