Cesium’s Tileset are laying behind pointcloud of Potree

CesiumJS
1

**I am using potree in a project but now I want to put pointcloud on globe. **

I use cesium and render cesium and potree on same canvas but the problem I am facing is that when I use tileset from cesium It is laying behind potree’s objects like pointcloud.
See video of my issue https://youtu.be/Zvja1MRX9wQ

I want that objects of potree and cesium would be in same scene**
Here is how I use potree and cesium.**

I initialize both cesium in potree and remove all controls on Cesium

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,
  });

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

``

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)
})

``

2

Have you tried just using Cesium to render your point cloud? You can just upload your LAS/LAZ files to https://cesium.com/ion/ and add them to the globe like that.

Let me know if it works!

3

Hi Omar, Thanks for your reply.

I am trying using cesium ion. But does there is no solution to render cesium and potree objects on same scene. I am try to integrate them for month. I also successfully applied potree measurement points on cesium Globe on objects. But I am facing some depth issue.

4

I think integrating the rendering engines will be harder both to do and maintain compatibility. It should be easier to do this kind of fusion through the data instead. Does Potree support rendering 3D Tiles point clouds? That could be one way you could do it, have the data tiled and hosted on Cesium ion but rendered in your Potree scene with whatever other data you have there.

Also, we do have a set of measurements/analytics built on top of CesiumJS you might find useful here: https://cesium.com/ion-sdk/

It’s currently available as a commercial on-premise option, but we’re working on bringing it to Cesium ion.

5

Hi Webgl,

I also have a similar issue. I am using Potree examples on my computer . I ran cesium_retz.html example it was able to load pointclouds but underlying cesium maps couldn’t be rendered. I checked that tiles were successfully cached on the page but they weren’t rendered on the viewer. I have tested the same on my machine using cesium ion and they work perfectly well. You can see some images from my test here. https://github.com/potree/potree/issues/757

I am running potree through gulp on ubuntu 18.04. Potree version is 1.6