Showing a point cloud on top of wms imagery [iTownsV2]

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

Showing a point cloud on top of wms imagery [iTownsV2]

Chris Lucas
Hello,

I am trying to view a point cloud on top of wms imagery in iTowns2. Both data is loaded, but the imagery is blocking the point cloud (see screenshots at: https://drive.google.com/file/d/0B_iWdvcnZj81UE9vaVI3NnUxZGs/view?usp=sharing and https://drive.google.com/file/d/0B_iWdvcnZj81OEhDUU1HeDNOa1U/view?usp=sharing). Is there a way to put the imagery properly under the point cloud?

I tried loading the point cloud and imagery in different order and enabling/disabling skirt of tilelayer, but no luck.

I am using windows 10 with Chrome version 60.0.3112.101 (Official Build) (64-bit) and this is the code I'm using:

var viewerDiv = document.getElementById('viewerDiv');
viewerDiv.style.display = 'block';

itowns.THREE.Object3D.DefaultUp.set(0, 0, 1);

itowns.proj4.defs('EPSG:28992', '+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +no_defs');

var extent = new itowns.Extent(
    'EPSG:28992',
    149260.453, 149555.000,
    410619.451, 410908.357
);

var view = new itowns.View('EPSG:28992', viewerDiv, { logarithmicDepthBuffer: true });
view.mainLoop.gfxEngine.renderer.setClearColor(0xcccccc);

var debugGui = new dat.GUI();

var tileLayer = itowns.createPlanarLayer("Ortho", extent, {object3d: view.scene})
tileLayer.disableSkirt = true;
view.addLayer(tileLayer);

view.addLayer({
    update: itowns.updateLayeredMaterialNodeImagery,
    url: 'https://geodata.nationaalgeoregister.nl/luchtfoto/rgb/wms',
    networkOptions: { crossOrigin: 'anonymous' },
    type: 'color',
    protocol: 'wms',
    version: '1.3.0',
    id: 'wms_imagery',
    name: 'Actueel_ortho25',
    projection: 'EPSG:28992',
    transparent: false,
    extent: extent,
    axisOrder: 'wsen',
    options: {
        mimetype: 'image/jpeg',
    },
}, tileLayer);

function showPointcloud(serverUrl, fileName, table) {
    var pointcloud;
    var oldPostUpdate;
    var controls;

    // Configure Point Cloud layer
    pointcloud = new itowns.GeometryLayer('pointcloud', view.scene);
    pointcloud.file = fileName || 'infos/sources';
    pointcloud.protocol = 'potreeconverter';
    pointcloud.url = serverUrl;
    pointcloud.table = table;

    function placeCamera(position, lookAt) {
        view.camera.camera3D.position.set(position.x, position.y, position.z);
        view.camera.camera3D.lookAt(lookAt);
        // create controls
        controls = new itowns.FirstPersonControls(view, { focusOnClick: true });
        debugGui.add(controls, 'moveSpeed', 1, 100).name('Movement speed');

        view.notifyChange(true);
    }

    // add pointcloud to scene
    function onLayerReady() {
        var ratio;
        var position;
        var lookAt;

        debug.PointCloudDebug.initTools(view, pointcloud, debugGui);

        view.camera.camera3D.far = 2.0 * pointcloud.root.bbox.getSize().length();

        ratio = pointcloud.root.bbox.getSize().x / pointcloud.root.bbox.getSize().z;
        position = pointcloud.root.bbox.min.clone().add(
            pointcloud.root.bbox.getSize().multiply({ x: 0, y: 0, z: ratio * 0.5 }));
        lookAt = pointcloud.root.bbox.getCenter();
        lookAt.z = pointcloud.root.bbox.min.z;
        placeCamera(position, lookAt);
        controls.moveSpeed = pointcloud.root.bbox.getSize().length() / 3;

        // update stats window
        oldPostUpdate = pointcloud.postUpdate;
        pointcloud.postUpdate = function postUpdate() {
            var info = document.getElementById('info');
            oldPostUpdate.apply(pointcloud, arguments);
            info.textContent = 'Nb points: ' +
                pointcloud.counters.displayedCount.toLocaleString() + ' (' +
                Math.floor(100 * pointcloud.counters.displayedCount / pointcloud.counters.pointCount) + '%) (' +
                view.mainLoop.gfxEngine.renderer.info.memory.geometries + ')';
        };
    }

    view.addLayer(pointcloud).then(onLayerReady);
}

showPointcloud("http://localhost:8000/iTownsViewer/data", "cloud.js", undefined, true);


Any help would be welcome.

Regards,
Chris Lucas

_______________________________________________
ITowns-user mailing list
[hidden email]
https://lists.osgeo.org/mailman/listinfo/itowns-user
Reply | Threaded
Open this post in threaded view
|

Re: Showing a point cloud on top of wms imagery [iTownsV2]

Jérémy Gaillard
Hi,

This bug has been addressed in a recent pull request:
https://github.com/iTowns/itowns/pull/453

The fix should be merged very soon. In the meantime, you can use the fixed
version which is on the branch "fixPointMaterial".

Regards,

Jérémy Gaillard

On 08/23/2017 12:14 PM, Chris Lucas wrote:

> Hello,
>
> I am trying to view a point cloud on top of wms imagery in iTowns2. Both data is
> loaded, but the imagery is blocking the point cloud (see screenshots at:
> https://drive.google.com/file/d/0B_iWdvcnZj81UE9vaVI3NnUxZGs/view?usp=sharing
> and
> https://drive.google.com/file/d/0B_iWdvcnZj81OEhDUU1HeDNOa1U/view?usp=sharing).
> Is there a way to put the imagery properly under the point cloud?
>
> I tried loading the point cloud and imagery in different order and
> enabling/disabling skirt of tilelayer, but no luck.
>
> I am using windows 10 with Chrome version 60.0.3112.101 (Official Build)
> (64-bit) and this is the code I'm using:
>
> var viewerDiv = document.getElementById('viewerDiv');
> viewerDiv.style.display = 'block';
>
> itowns.THREE.Object3D.DefaultUp.set(0, 0, 1);
>
> itowns.proj4.defs('EPSG:28992', '+proj=sterea +lat_0=52.15616055555555
> +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel
> +units=m +no_defs');
>
> var extent = new itowns.Extent(
>     'EPSG:28992',
>     149260.453, 149555.000,
>     410619.451, 410908.357
> );
>
> var view = new itowns.View('EPSG:28992', viewerDiv, { logarithmicDepthBuffer:
> true });
> view.mainLoop.gfxEngine.renderer.setClearColor(0xcccccc);
>
> var debugGui = new dat.GUI();
>
> var tileLayer = itowns.createPlanarLayer("Ortho", extent, {object3d: view.scene})
> tileLayer.disableSkirt = true;
> view.addLayer(tileLayer);
>
> view.addLayer({
>     update: itowns.updateLayeredMaterialNodeImagery,
>     url: 'https://geodata.nationaalgeoregister.nl/luchtfoto/rgb/wms',
>     networkOptions: { crossOrigin: 'anonymous' },
>     type: 'color',
>     protocol: 'wms',
>     version: '1.3.0',
>     id: 'wms_imagery',
>     name: 'Actueel_ortho25',
>     projection: 'EPSG:28992',
>     transparent: false,
>     extent: extent,
>     axisOrder: 'wsen',
>     options: {
>         mimetype: 'image/jpeg',
>     },
> }, tileLayer);
>
> function showPointcloud(serverUrl, fileName, table) {
>     var pointcloud;
>     var oldPostUpdate;
>     var controls;
>
>     // Configure Point Cloud layer
>     pointcloud = new itowns.GeometryLayer('pointcloud', view.scene);
>     pointcloud.file = fileName || 'infos/sources';
>     pointcloud.protocol = 'potreeconverter';
>     pointcloud.url = serverUrl;
>     pointcloud.table = table;
>
>     function placeCamera(position, lookAt) {
>         view.camera.camera3D.position.set(position.x, position.y, position.z);
>         view.camera.camera3D.lookAt(lookAt);
>         // create controls
>         controls = new itowns.FirstPersonControls(view, { focusOnClick: true });
>         debugGui.add(controls, 'moveSpeed', 1, 100).name('Movement speed');
>
>         view.notifyChange(true);
>     }
>
>     // add pointcloud to scene
>     function onLayerReady() {
>         var ratio;
>         var position;
>         var lookAt;
>
>         debug.PointCloudDebug.initTools(view, pointcloud, debugGui);
>
>         view.camera.camera3D.far = 2.0 * pointcloud.root.bbox.getSize().length();
>
>         ratio = pointcloud.root.bbox.getSize().x / pointcloud.root.bbox.getSize().z;
>         position = pointcloud.root.bbox.min.clone().add(
>             pointcloud.root.bbox.getSize().multiply({ x: 0, y: 0, z: ratio * 0.5
> }));
>         lookAt = pointcloud.root.bbox.getCenter();
>         lookAt.z = pointcloud.root.bbox.min.z;
>         placeCamera(position, lookAt);
>         controls.moveSpeed = pointcloud.root.bbox.getSize().length() / 3;
>
>         // update stats window
>         oldPostUpdate = pointcloud.postUpdate;
>         pointcloud.postUpdate = function postUpdate() {
>             var info = document.getElementById('info');
>             oldPostUpdate.apply(pointcloud, arguments);
>             info.textContent = 'Nb points: ' +
>                 pointcloud.counters.displayedCount.toLocaleString() + ' (' +
>                 Math.floor(100 * pointcloud.counters.displayedCount /
> pointcloud.counters.pointCount) + '%) (' +
>                 view.mainLoop.gfxEngine.renderer.info.memory.geometries + ')';
>         };
>     }
>
>     view.addLayer(pointcloud).then(onLayerReady);
> }
>
> showPointcloud("http://localhost:8000/iTownsViewer/data", "cloud.js", undefined,
> true);
>
>
> Any help would be welcome.
>
> Regards,
> Chris Lucas
>
>
> _______________________________________________
> ITowns-user mailing list
> [hidden email]
> https://lists.osgeo.org/mailman/listinfo/itowns-user
>
_______________________________________________
ITowns-user mailing list
[hidden email]
https://lists.osgeo.org/mailman/listinfo/itowns-user