Cesium’s Tileset are laying behind pointcloud of Potree

Viewed 638

I render cesium and potree on same canvas but when I added tileset from cesium It always laying behind pointcloud.

Tell me how to fix this issue.

I initialize both cesium and potree

cviewer = new Cesium.Viewer('cesiumContainer', {
    useDefaultRenderLoop: false,
    animation: false,
    baseLayerPicker : false,
    fullscreenButton: false, 
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: false,
    selectionIndicator: false,
    timeline: false,
    navigationHelpButton: false,
    imageryProvider : Cesium.createOpenStreetMapImageryProvider({url : 'http://a.tile.openstreetmap.org/'}),
    terrainShadows: Cesium.ShadowMode.DISABLED,
  });

  cviewer.snippet = new ThreeDTile();

viewer = new Potree.Viewer(document.getElementById("potree_render_area"),""); 

viewer.setEDLEnabled(false);
viewer.setMaterial("RGB");
viewer.setFOV(60);

if(isMobile()==true)

  viewer.setPointSize(2);
  viewer.setPointSizing("Fixed");
  viewer.setPointBudget(1*1000*1000); //medLow      

else

  viewer.setPointSize(1);
  viewer.setPointSizing("Adaptive");
  viewer.setPointBudget(2*1000*1000);


viewer.setQuality("Squares");

viewer.setEDLEnabled(false);
viewer.setShowSkybox(false);
viewer.setMaterialID(Potree.PointColorType.RGB);
viewer.setDescription('');

viewer.loadSettingsFromURL();
viewer.loadGUI();

  let cp = new Cesium.Cartesian3(4303414.154026048, 552161.235598733, 4660771.704035539);
  cviewer.camera.setView({
    destination : cp,
    orientation: {
      heading : 10, 
      pitch : -Cesium.Math.PI_OVER_TWO * 0.5, 
      roll : 0.0 

  });

Call Cesium render function inside Potree render function

render(){
   cviewer.render();
   …..
}

I modified initThree() function remove line that add potree’s canvas in potree render area

 // this.renderArea.appendChild(this.renderer.domElement);

and add cesium canvas in Three.WebGl Render

this.renderer = new THREE.WebGLRenderer({alpha : true,preserveDrawingBuffer: true , canvas : cviewer.canvas});

And also added the following lines as I see this on https://github.com/AnalyticalGraphicsInc/cesium/issues/648

 var resetFunc = this.renderer.state.reset;
 this.renderer.state.reset = function(){};
 this.renderer.resetGLState();
 this.renderer.state.reset = resetFunc;

I remove all events of Cesium except rotate because I want potree’s events only. And to stop collusion of some of the same events from both sides.

cviewer.scene.screenSpaceCameraController.enableTranslate = false;
cviewer.scene.screenSpaceCameraController.enableZoom = false;
cviewer.scene.screenSpaceCameraController.enableTilt = false;
cviewer.scene.screenSpaceCameraController.enableLook = false;

Identified pointdown event handler of Cesium from debugger and remove it. Because it stops orbit controls in potree.

 function p(e, t, i, r) {
     // function n(t) {
     //     r(e, t)
     // }
     i.addEventListener(t, n, !1), 
     e._removalFunctions.push(function() {
         i.removeEventListener(t, n, !1)
     })
  }
0 Answers
Related