在CesiumVR基础上实现3D左右立体视觉

Posted 2020-10-18 seethetruth

整体思路

---

 

1. 在VR模块的基础上调整视差，使其随距离发生变化；
2. 左右分屏时，需要将左右屏的横向进行1/2压缩；这是因为3D-TV在对左右格式影像进行合并时，会进行拉伸；
3. 左屏幕的相机相对于原来的（右屏）相机位置发生了变化，所以需要重新判断左屏幕相机视野内的切片，并重新进行渲染（解决黑色切片问题）。

---

 

代码部分

---

1. 视差调整以及分屏横向压缩   　　　

   　　　function updateAndExecuteCommands(scene, passState, backgroundColor) {    
　　　　　　 ......
       　　 var near = camera.frustum.near;
       　　 var fo = near * 5.0;
       　　 var eyeSeparation = fo / 30.0;
       
       　　 //var eyeTranslation = Cartesian3.multiplyByScalar(savedCamera.right, eyeSeparation * 0.5, scratchEyeTranslation);
       　　 //修改，使得视差随相机高度变化
      　　  //var modifyEyeSeparation = eyeSeparation * 0.5 * savedCamera.position.z  ;
        　　//savedCamera.getMagnitude()获取距离中心的距离
       　　 var modifyEyeSeparation = eyeSeparation * 0.5 * savedCamera.getMagnitude() ;
       　　 var eyeTranslation = Cartesian3.multiplyByScalar(savedCamera.right, modifyEyeSeparation, scratchEyeTranslation);

      　　  viewport.x = passState.viewport.width;
        
      　　  // camera.frustum.aspectRatio = viewport.width / viewport.height;
      　　  // 修改，使得VR模式下球体横向收缩
      　　  camera.frustum.aspectRatio = viewport.width*2 / viewport.height;

      　　  var offset = 0.5 * eyeSeparation * near / fo;

      　　  //Cartesian3.add(savedCamera.position, eyeTranslation, camera.position);
      　　  camera.frustum.xOffset = offset;

　　　　　　executeCommands(scene, passState);             

       　　  viewport.x = 0;
      　　  //
      　　  Cartesian3.subtract(savedCamera.position, eyeTranslation, camera.position);
        
      　　  camera.frustum.xOffset = -offset;
       　　 //相机位置发生变化，所以要渲染的切片发生变化；所以重新计算需要渲染的切片，进行渲染 (这部分还需要进行完善)       
     　　   executeCommands(scene, passState);
       　　 Camera.clone(savedCamera, camera);

2.对左屏（相机偏移的场景）重新进行渲染（暂时解决方案，对相机外的场景同样进行渲染,存在的问题：效率太低）

　　CullingVolume.prototype.computeVisibility = function(boundingVolume) {
   　　 if (!defined(boundingVolume)) {
       　　 throw new DeveloperError(‘boundingVolume is required.‘);
  　　  }
    
   　　 var planes = this.planes;
  　　  var intersecting = true;
   　　 for (var k = 0, len = planes.length; k < len; ++k) {
      　　  var result = boundingVolume.intersectPlane(Plane.fromCartesian4(planes[k], scratchPlane));
      　　  if (result === Intersect.OUTSIDE) {
     　　       // return Intersect.OUTSIDE;
           　　 //修改，不进行判断是否在范围内，全部进行渲染，从而避免立体视觉部分出现黑框
          　　  return Intersect.INSIDE;
       　　 } else if (result === Intersect.INTERSECTING) {
           　　 intersecting = true;
       　　 }
   　　 }
   　　 return intersecting ? Intersect.INTERSECTING : Intersect.INSIDE;
　　};

---

有待解决的问题

　　相机偏移后（左屏），应当对场景（左屏）重新进行渲染。具体指

1. 1. 重新判断boundingVolume（球体）与CullingVolume（相机的视野）的相互关系（INSIDE或OUTSIDE），即判断球体是否在相机的视野范围内，对范围内的部分进行渲染；
   2. 重新对场景进行渲染，从而将当前相机视野内的切片渲染出来，避免黑框的出现