Reset normal Viewer visualization after using Oculus plugin

Hi, everyone,
I'm using the Oculus plugin with Cesium and i have no problem passing from "Viewer visualization" to "oculus visualization", the point is i'm not able to come back to the "Viewer visualization". How can I reset the scene, and eliminate postprocessing and the frustum offesetting introduced by the oculus plugin?

Thanks in advance.

here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>try</title>
<script src="lib/Cesium/Cesium.js"></script>
<script src="src/canvas-copy.js"></script>
<script src="src/cesium-oculus.js"></script>
<script src="lib/vr.js/vr.js"></script>
<script src="lib/GeoserverTerrainProvider.js"></script>
<script src="lib/jquery-1.11.1.js"></script>
<style>
@import url(lib/Cesium/Widgets/widgets.css);

body,html {
  height: 100%;
}

body {
  padding: 0;
  border: 0;
  margin: 0;
  overflow: hidden;
}

#cesiumContainer {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          margin: 0;
          overflow: hidden;
          padding: 0;
          font-family: sans-serif;
}

#stereo div {
  pointer-events: none;
  height: 100%;
  width: 50%;
  border: 0px solid red;
  margin-left: 0px;
  float: left;
}

.eyeLeft {
  display: 'block';
  float: left;
  width: 100%;
  height: 100%;
  border: 0px solid red;
}
.eyeRight {
  display: 'none';
  float: left;
  width: 50%;
  height: 100%;
  border: 0px solid red;
}

.fullSize {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  border: none;
  width: 100%;
  height: 100%;
}

.myButton{
  position: absolute;
    left: 10px;
  border: 1px solid #edffff;
}
#oculus{
  top: 8%;
}
#viewer{
  top: 12%;
}
    
</style>
</head>
<body>

  <div style="width: 100%; height: 100%">
    <div id="cesiumContainerLeft" class="eyeLeft"></div>
    <div id="cesiumContainerRight" class="eyeRight"></div>
  </div>
  
  <button id="oculus" type="button" class="cesium-button myButton" title="oculus">oculus</button>
  <button id="viewer" type="button" class="cesium-button myButton" title="viewer">viewer</button>
  
  <!-- library -->
  <script src="src/cesium-oculus.js"></script>
  <script src="src/canvas-copy.js"></script>
  
  <!-- app -->
  <script>
  
//-------------------------------INITIAL SETTINGS--------------------
//create the viewer in the left div
var viewer = new Cesium.Viewer('cesiumContainerLeft');
viewer.scene.debugShowFramesPerSecond = true;
var canvasL = viewer.canvas;
canvasL.className = "fullSize";

//create the right canvas in the right div
var canvasR = document.createElement('canvas');
canvasR.className = "fullSize";
document.getElementById('cesiumContainerRight').appendChild(canvasR);

\(&#39;\#oculus&#39;\)\.bind\(&#39;click&#39;, \{ param1: viewer\}, oculusRules\); ('#viewer').bind('click', { param1: viewer}, backToViewer);

//--------------------OCULUS VIEW-------------------------------
function oculusRules(event){
  \(&#39;\.eyeRight&#39;\)\.css\(\{display: &#39;block&#39;\}\); &nbsp;&nbsp;('.eyeLeft').css({width: '50%'});
  var viewer = event.data.param1;
  
  var canvasCopy = new CanvasCopy(canvasR, false);
  
  var cesiumOculus = new CesiumOculus(run);
  
  function run() {
    var scene = viewer.scene;
    scene.camera.frustum.fovy = Cesium.Math.toRadians(90.0);
    var camera = scene.camera;
    var eyeSeparation = 2.0;
  
    var tick = function() {
      // Render right eye
      cesiumOculus.setSceneParams(scene, 'right');
      scene.initializeFrame();
      scene.render();
  
      canvasCopy.copy(canvasL);
  
      // Render left eye
      var originalCamera = scene.camera.clone();
      CesiumOculus.slaveCameraUpdate(originalCamera, scene.camera, -eyeSeparation);
      cesiumOculus.setSceneParams(scene, 'left');
      scene.render();
  
      // Restore state
      CesiumOculus.slaveCameraUpdate(originalCamera, scene.camera, 0.0);
  
      Cesium.requestAnimationFrame(tick);

    };
  
    tick();

    var onResizeScene = function(canvas, scene) {
    var supersample = 1.0;
      var width = canvas.clientWidth * supersample;
      var height = canvas.clientHeight * supersample;
  
      if (canvas.width === width && canvas.height === height) {
        return;
      }
      canvas.width = width;
      canvas.height = height;
      scene.camera.frustum.aspectRatio = width / height;
    };
    var onResize = function() {
      onResizeScene(canvasL, scene);
      onResizeScene(canvasR, scene);
    };
    window.setTimeout(onResize, 60);
    window.addEventListener('resize', onResize, false);
  }
}

function backToViewer(event){
  \(&#39;\.eyeRight&#39;\)\.css\(\{display: &#39;none&#39;\}\); &nbsp;&nbsp;('.eyeLeft').css({width: '100%'});
  var viewer = event.data.param1;

}
  
  </script>
  
</body>
</html>

Hi,

Apologies for the delay as I missed the email. I’ve created a PR to add toggling to the example code.

https://github.com/NICTA/cesium-oculus-plugin/pull/5

Chris

Hi Chris,
Thanks for the help, now it works great!
I'm facing with an other problem, I'm trying to load the 'Cesium_Air.gltf' model in my application using the follwing code:

var modelMatrix = Cesium.Transforms.northEastDownToFixedFrame(Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 500));
var model = Cesium.Model.fromGltf({
      url : 'model/Cesium_Air.gltf',
      modelMatrix : modelMatrix,
      scale : 20.0,
      minimumPixelSize : 50,
});
scene.primitives.add(model);

Once the model is loaded if it falls in the camera field of view the entire canvas became totally black and everything disappear from the scene even if the rendering still goes on because if I change the point of view till 'hiding' the model behind the globe, the globe reappears.
I suppose it is due to the postProcessFilter.

Thanks in advance.

Mdp

Hi Mdp,

You’re right, it looks like an issue with the postprocess filter. The GLTF model must cause the buffers to be handled a bit differently. We’ll try to have a closer look in the next week or so.

If you’re keen to look into fixing it yourself we’d welcome a pull request. I’ve created a branch that reproduces the issue here…

https://github.com/NICTA/cesium-oculus-plugin/tree/models

Note that we’re also investigating WebVR as an alternative to VR.js (see webVR branch). If we can resolve some remaining issues this may change the way we apply the oculus distortion filter.

Chris

This was related to an incompatibility between OIT and postprocess filters. You can workaround this by disabling OIT.

https://github.com/NICTA/cesium-oculus-plugin/pull/6/files

Chris

Thank you Chris, now it’s perfect.
By the way, the plugin is amazing!

Matteo.

Glad you like it Matteo. Please let us know if you do anything cool with it, and we’d be happy to feature it as an example on the github page if it’s public.

Chris