Augentrennung mit WebVR

Question

Ich versuche, eine WebVR-Umgebung mit Three.js zu erstellen. Ich habe einige Szenen aus Cinema4D exportiert und sie mit dem Colladaloader von Three.js geladen. Jetzt wollte ich diese Umgebung in meinem Google Cardboard ausprobieren, aber ich musste natürlich den geteilten Bildschirm für meine beiden Augen haben.

Ich habe das Npm-Modul three-stereo-effect verwendet, um den VR-Effekt zu erzielen, aber es überlappt, wenn es in einem Karton verwendet wird. Ich schaute nach oben und sah, dass viele WebVR-Beispiele ein abgerundetes Rechteck für jedes Auge hatten (example of what I mean), kein gerades Rechteck, ich dachte, ich müsste Matrizen finden, um das zu beheben (wenn man sich die Beispiele von this repository anschaut). Aber dann habe ich ein VR-Tunnel-Rennspiel heruntergeladen und gesehen, dass sie gerade Rechtecke verwendet haben und die Vision in Ordnung war.

Jetzt denke ich, dass die eyeSeparation meines Stereoeffekts falsch ist, sah ich jemand die Eigenschaft eyeSeparation auf dem StereoEffect-Modul verwenden und das ausprobiert, aber ich denke, ich sollte nicht nur einen Wert erraten ...

Bin ich hier auf der richtigen Spur, um eine Lösung zu finden? Oder schaue ich in die völlig falsche Richtung, warum meine 3D-Szene bei der Verwendung von Karton keine gute Sicht bietet?

Dies ist der Code, mit dem ich experimentiere.

import {sets} from './data/'; 

import * as THREE from 'three'; 
import threeOrbitControls from 'three-orbit-controls'; 
import ColladaLoader from 'three-collada-loader'; 
import threeStereoEffect from 'three-stereo-effect'; 

import {BufferLoader} from './modules/sound'; 
import {SpawnObject} from './modules/render'; 

const OrbitControls = threeOrbitControls(THREE); 
const StereoEffect = threeStereoEffect(THREE); 

let scene, camera, renderer; 
let audioCtx, bufferLoader; 

const notes = []; 
let stereoEffect = null; 

const init =() => { 
    window.AudioContext = window.AudioContext || window.webkitAudioContext; 

    audioCtx = new AudioContext(); 
    bufferLoader = new BufferLoader(audioCtx); 

    bufferLoader.load(sets.drums) 
    .then(data => spawnObject(data)); 


    initEnvironment(); 

}; 

const spawnObject = data => { 

    for (let i = 0;i < 5;i ++) { 
    const bol = new SpawnObject(`object.dae`, audioCtx, data[0], scene, false); 
    notes.push(bol); 
    } 

    // console.log(notes); 
}; 

const initEnvironment =() => { 

    scene = new THREE.Scene(); 
    camera = new THREE.PerspectiveCamera(
    45, window.innerWidth/window.innerHeight, 
    1, 10000 
); 

    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 

    stereoEffect = new StereoEffect(renderer); 
    // stereoEffect.eyeSeparation = 1; 
    stereoEffect.setSize(window.innerWidth, window.innerHeight); 

    console.log(stereoEffect); 

    document.querySelector(`main`).appendChild(renderer.domElement); 

    camera.position.set(0, 0, 2); 
    camera.lookAt(scene.position); 

    new OrbitControls(camera); 

    //LIGHTS 
    const light = new THREE.PointLight(0xFFFFFF); 
    light.position.set(0, 0, 9); 
    light.castShadow = true; 
    light.shadow.mapSize.width = 1024; 
    light.shadow.mapSize.height = 1024; 
    light.shadow.camera.near = 10; 
    light.shadow.camera.far = 100; 
    scene.add(light); 

    // const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6); 
    // hemiLight.color.setHSL(0.6, 1, 0.6); 
    // hemiLight.groundColor.setHSL(0.095, 1, 0.75); 
    // hemiLight.position.set(0, 500, 0); 
    // scene.add(hemiLight); 
    // 
    // const dirLight = new THREE.DirectionalLight(0xffffff, 1); 
    // dirLight.color.setHSL(0.1, 1, 0.95); 
    // dirLight.position.set(- 1, 1.75, 1); 
    // dirLight.position.multiplyScalar(50); 
    // scene.add(dirLight); 
    // dirLight.castShadow = true; 


    //FLOOR 
    const matFloor = new THREE.MeshPhongMaterial(); 
    const geoFloor = new THREE.BoxGeometry(2000, 1, 2000); 
    const mshFloor = new THREE.Mesh(geoFloor, matFloor); 

    matFloor.color.set(0x212E39); 
    mshFloor.receiveShadow = true; 
    mshFloor.position.set(0, - 1, 0); 

    scene.add(mshFloor); 


    //ENVIRONMENT 
    const loader = new ColladaLoader(); 

    loader.load(`../assets/environment.dae`, collada => { 
    collada.scene.traverse(child => { 
     child.castShadow = true; 
     child.receiveShadow = true; 
    }); 

    scene.add(collada.scene); 
    render(); 
    }); 
}; 

const render =() => { 

    // stereoEffect.render(scene, camera); 
    // effect.render(scene, camera); 

    renderer.shadowMap.enabled = true; 
    renderer.shadowMap.type = THREE.PCFSoftShadowMap; 

    renderer.gammaInput = true; 
    renderer.gammaOutput = true; 

    renderer.setClearColor(0xdddddd, 1); 
    stereoEffect.render(scene, camera); 

    requestAnimationFrame(render); 
}; 



init(); 

Answer 1

Vom PDF "Scalable Multi-view Stereo Camera Array for Real World Real-Time Image Capture and Three-Dimensional Displays":

2.1.1 binokulare Disparität

binokulare Disparität ist die Positionsdifferenz zwischen den beiden retinalen Projektionen eines gegebenen Punkt im Raum. Dieser Positionsunterschied ergibt sich aus der Tatsache, dass die beiden Augen seitlich voneinander getrennt sind und somit die Welt aus den beiden leicht unterschiedlichen Blickwinkeln sehen. Für die durchschnittliche Person ist die mittlere laterale Trennung, die auch als Interokular bezeichnet wird, 65 mm. Der größte Teil der Bevölkerung hat eine Augenseparation innerhalb von ± 10 mm vom durchschnittlichen Interokular.

Es scheint, mit einem kleinen Test mit Freunden mit einer Vielzahl von Gesichtsformen Sie einen glücklichen Durchschnitt für den eyeSeparation Wert für das Gerät und den Leute, die es finden. Ich würde dann auch einige Einstellungen Panel zur Verfügung stellen, die ein paar verschiedene Einstellungen der eyeSeparation für Benutzer zur Auswahl, wenn sie Disparität oder Überlappung in ihrer Stereo-Erfahrung finden können. Normalerweise denke ich, dass dies mit einer Tastatur geschehen würde, die mit dem gleichen System verbunden ist, um die Stereo-Ausrichtung zu wählen, aber Sie sind in Pappe, so dass der Benutzer vielleicht versuchen muss, es richtig zu machen.