Aframe / Three.js - стереоскопический на GearVR и других гарнитурах - PullRequest
Новая
       5

Aframe / Three.js - стереоскопический на GearVR и других гарнитурах

0 голосов
/ 27 августа 2018

Я использую Aframe и стерео компонент для отображения 180 3D видео.Это работает очень хорошо на стандартной установке картона через WebVR и т. Д. Это использует функцию слоев Three.js

Теперь я пытаюсь реализовать ее на гарнитурах, начиная с GearVR и вскоре перейдя коснованные на Android, такие как Oculus Go и Pico.

Проблема, с которой я сразу столкнулся, заключается в том, что в GearVR в браузере магазина по умолчанию (я полагаю, это Oculus Caramel, но может быть и в Samsung) только один глаз отображается (как ни странно, правый глаз, левый -черный).Я вспоминаю, что в некоторых гарнитурах aframe не разделяет экран, а просто переходит в полноэкранный режим, но это не поможет при стереоскопическом рендеринге.

Я также понимаю, что когда я попадаю на несколько экранов в выделенных устройствах, ядолжны понять, как показать один вид на одном экране, а другой - на другом.

Я заметил, что некоторые другие виртуальные 3D-сайты, кажется, обошли это, но я не уверен, как это делается в Aframe / Three.js.

Важный бит кода в Стерео Компоненте 

          // If left eye is set, and the split is horizontal, take the left half of the video texture. If the split
              // is set to vertical, take the top/upper half of the video texture.

              if (this.data.eye === "left") {
                var uvs = geometry.faceVertexUvs[ 0 ];
                var axis = this.data.split === "vertical" ? "y" : "x";
                for (var i = 0; i < uvs.length; i++) {
                    for (var j = 0; j < 3; j++) {
                        if (axis == "x") {
                            uvs[ i ][ j ][ axis ] *= 0.5;
                        }
                        else {
                            uvs[ i ][ j ][ axis ] *= 0.5;
                            uvs[ i ][ j ][ axis ] += 0.5;
                        }
                    }
                }
              }

              // If right eye is set, and the split is horizontal, take the right half of the video texture. If the split
              // is set to vertical, take the bottom/lower half of the video texture.

              if (this.data.eye === "right") {
                var uvs = geometry.faceVertexUvs[ 0 ];
                var axis = this.data.split === "vertical" ? "y" : "x";
                for (var i = 0; i < uvs.length; i++) {
                    for (var j = 0; j < 3; j++) {
                        if (axis == "x") {
                            uvs[ i ][ j ][ axis ] *= 0.5;
                            uvs[ i ][ j ][ axis ] += 0.5;
                        }
                        else {
                            uvs[ i ][ j ][ axis ] *= 0.5;
                        }
                    }
                }
              }

И на камере 

    // Retrieve the PerspectiveCamera
            var rootIndex = childrenTypes.indexOf("PerspectiveCamera");
            var rootCam = this.el.object3D.children[rootIndex];

            if(originalData.eye === "both"){
                rootCam.layers.enable( 1 );
                rootCam.layers.enable( 2 );
              }
              else{
                rootCam.layers.enable(originalData.eye === 'left' ? 1:2);
              }
            }
...