Any working example of QuadtreePrimitive TileProvider

Hi,

I am looking for a working example of QuadtreePrimitive and TileProvider. I have found some old versions of its example but it seems it is removed

https://github.com/AnalyticalGraphicsInc/cesium/issues/3263

I have already found this class but it seems it is outdated

    var DemoTileProvider = function() {

this._quadtree = undefined;

this._tilingScheme = new Cesium.GeographicTilingScheme();

this._errorEvent = new Cesium.Event();

this._levelZeroMaximumError = Cesium.QuadtreeTileProvider.computeDefaultLevelZeroMaximumGeometricError(this._tilingScheme);

};

Object.defineProperties(DemoTileProvider.prototype, {

quadtree : {

   get : function() {

       return this._quadtree;

   },

   set : function(value) {

       this._quadtree = value;

   }

},

ready : {

   get : function() {

       return true;

   }

},

tilingScheme : {

   get : function() {

       return this._tilingScheme;

   }

},

errorEvent : {

   get : function() {

       return this._errorEvent;

   }

}

});

DemoTileProvider.prototype.beginUpdate = function(frameState) {

};

DemoTileProvider.prototype.endUpdate = function(frameState) {

};

DemoTileProvider.prototype.getLevelMaximumGeometricError = function(level) {

return this._levelZeroMaximumError / (1 << level);

};

DemoTileProvider.prototype.loadTile = function(frameState, tile) {

if (tile.state === Cesium.QuadtreeTileLoadState.START) {

   tile.data = {

       primitive : undefined,

       freeResources : function() {

           if (Cesium.defined(this.primitive)) {

               this.primitive.destroy();

               this.primitive = undefined;

           }

       }

   };

   var color = Cesium.Color.fromBytes(255, 0, 0, 255);

   

   if(tile.rectangle.west>=-Cesium.Math.PI&&tile.rectangle.east<=Cesium.Math.PI){    //Here is the code I add to make it work in Cesium 1.16

       tile.data.primitive = new Cesium.Primitive({

           geometryInstances : new Cesium.GeometryInstance({

               geometry : new Cesium.RectangleOutlineGeometry({

                   rectangle : tile.rectangle

               }),

               attributes : {

                   color : Cesium.ColorGeometryInstanceAttribute.fromColor(color)

               }

           }),

           appearance : new Cesium.PerInstanceColorAppearance({

               flat : true

           })

       });

        tile.data.boundingSphere3D = Cesium.BoundingSphere.fromRectangle3D(tile.rectangle);

       tile.data.boundingSphere2D = Cesium.BoundingSphere.fromRectangle2D(tile.rectangle, frameState.mapProjection);

       Cesium.Cartesian3.fromElements(tile.data.boundingSphere2D.center.z, tile.data.boundingSphere2D.center.x, tile.data.boundingSphere2D.center.y, tile.data.boundingSphere2D.center);

        tile.state = Cesium.QuadtreeTileLoadState.LOADING;

   }

}

if (tile.state === Cesium.QuadtreeTileLoadState.LOADING) {

   tile.data.primitive.update(frameState);

   if (tile.data.primitive.ready) {

       tile.state = Cesium.QuadtreeTileLoadState.DONE;

       tile.renderable = true;

   }

}

};

DemoTileProvider.prototype.computeTileVisibility = function(tile, frameState, occluders) {

var boundingSphere;

if (frameState.mode === Cesium.SceneMode.SCENE3D) {

   boundingSphere = tile.data.boundingSphere3D;

} else {

   boundingSphere = tile.data.boundingSphere2D;

}

return frameState.cullingVolume.computeVisibility(boundingSphere);

};

DemoTileProvider.prototype.showTileThisFrame = function(tile, frameState) {

tile.data.primitive.update(frameState);

};

var subtractScratch = new Cesium.Cartesian3();

DemoTileProvider.prototype.computeDistanceToTile = function(tile, frameState) {

var boundingSphere;

if (frameState.mode === Cesium.SceneMode.SCENE3D) {

   boundingSphere = tile.data.boundingSphere3D;

} else {

   boundingSphere = tile.data.boundingSphere2D;

}

return Math.max(0.0, Cesium.Cartesian3.magnitude(Cesium.Cartesian3.subtract(boundingSphere.center, frameState.camera.positionWC, subtractScratch)) - boundingSphere.radius);

};

DemoTileProvider.prototype.isDestroyed = function() {

return false;

};

DemoTileProvider.prototype.destroy = function() {

return Cesium.destroyObject(this);

};

    primitives.add(new Cesium.QuadtreePrimitive({

       tileProvider : new DemoTileProvider()

   }));

``

IS there any documentation or example that works with the latest version of cesium?

Hi,

I am looking for a working example of QuadtreePrimitive and TileProvider. I have found some old versions of its example but it seems it is removed

https://github.com/AnalyticalGraphicsInc/cesium/issues/3263

I have already found this class but it seems it is outdated

    var DemoTileProvider = function() {

this._quadtree = undefined;

this._tilingScheme = new Cesium.GeographicTilingScheme();

this._errorEvent = new Cesium.Event();

this._levelZeroMaximumError = Cesium.QuadtreeTileProvider.computeDefaultLevelZeroMaximumGeometricError(this._tilingScheme);

};

Object.defineProperties(DemoTileProvider.prototype, {

quadtree : {

   get : function() {
       return this._quadtree;
   },
   set : function(value) {
       this._quadtree = value;
   }

},

ready : {
   get : function() {
       return true;
   }

},

tilingScheme : {
   get : function() {
       return this._tilingScheme;
   }

},

errorEvent : {
   get : function() {
       return this._errorEvent;
   }

}

});

DemoTileProvider.prototype.beginUpdate = function(frameState) {

};

DemoTileProvider.prototype.endUpdate = function(frameState) {

};

DemoTileProvider.prototype.getLevelMaximumGeometricError = function(level) {

return this._levelZeroMaximumError / (1 << level);

};

DemoTileProvider.prototype.loadTile = function(frameState, tile) {

if (tile.state === Cesium.QuadtreeTileLoadState.START) {

   tile.data = {
       primitive : undefined,
       freeResources : function() {
           if (Cesium.defined(this.primitive)) {
               this.primitive.destroy();
               this.primitive = undefined;
           }
       }
   };
   var color = Cesium.Color.fromBytes(255, 0, 0, 255);
   if(tile.rectangle.west>=-Cesium.Math.PI&&tile.rectangle.east<=Cesium.Math.PI){    //Here is the code I add to make it work in Cesium 1.16
       tile.data.primitive = new Cesium.Primitive({
           geometryInstances : new Cesium.GeometryInstance({
               geometry : new Cesium.RectangleOutlineGeometry({
                   rectangle : tile.rectangle
               }),
               attributes : {
                   color : Cesium.ColorGeometryInstanceAttribute.fromColor(color)
               }
           }),
           appearance : new Cesium.PerInstanceColorAppearance({
               flat : true
           })
       });
        tile.data.boundingSphere3D = Cesium.BoundingSphere.fromRectangle3D(tile.rectangle);
       tile.data.boundingSphere2D = Cesium.BoundingSphere.fromRectangle2D(tile.rectangle, frameState.mapProjection);
       Cesium.Cartesian3.fromElements(tile.data.boundingSphere2D.center.z, tile.data.boundingSphere2D.center.x, tile.data.boundingSphere2D.center.y, tile.data.boundingSphere2D.center);
        tile.state = Cesium.QuadtreeTileLoadState.LOADING;
   }

}

if (tile.state === Cesium.QuadtreeTileLoadState.LOADING) {
   tile.data.primitive.update(frameState);
   if (tile.data.primitive.ready) {
       tile.state = Cesium.QuadtreeTileLoadState.DONE;
       tile.renderable = true;
   }

}

};

DemoTileProvider.prototype.computeTileVisibility = function(tile, frameState, occluders) {

var boundingSphere;

if (frameState.mode === Cesium.SceneMode.SCENE3D) {

   boundingSphere = tile.data.boundingSphere3D;

} else {

   boundingSphere = tile.data.boundingSphere2D;

}

return frameState.cullingVolume.computeVisibility(boundingSphere);

};

DemoTileProvider.prototype.showTileThisFrame = function(tile, frameState) {

tile.data.primitive.update(frameState);

};

var subtractScratch = new Cesium.Cartesian3();

DemoTileProvider.prototype.computeDistanceToTile = function(tile, frameState) {

var boundingSphere;

if (frameState.mode === Cesium.SceneMode.SCENE3D) {
   boundingSphere = tile.data.boundingSphere3D;

} else {

   boundingSphere = tile.data.boundingSphere2D;

}

return Math.max(0.0, Cesium.Cartesian3.magnitude(Cesium.Cartesian3.subtract(boundingSphere.center, frameState.camera.positionWC, subtractScratch)) - boundingSphere.radius);

};

DemoTileProvider.prototype.isDestroyed = function() {

return false;

};

DemoTileProvider.prototype.destroy = function() {

return Cesium.destroyObject(this);

};

    primitives.add(new Cesium.QuadtreePrimitive({
       tileProvider : new DemoTileProvider()
   }));

``

IS there any documentation or example that works with the latest version of cesium?

I noticed that loadTile function is not called by the QuadtreePrimitives. I don’t know what can prevent calling this function

Based on my current understanding from debugging code the update function is called but the render function is not called at all, some flag I guess is avoiding to call this function, I guess I have to provide tiles that are covered by tileprovider, I am not sure about it yet

Hi,

Unfortunately I don’t know the answer to your question. QuadtreePrimitive was originally written for terrain, but it was intended to be a general-purpose quadtree. It was never made part of the public API, though. Since 3D Tiles came along, it has evolved toward being even more terrain-specific. You’re almost certainly better off using 3D Tiles instead of trying to convince QuadtreePrimitive to work for you.

Kevin

Hi,
You know It’s for a while that I am considering using cesium for my research visualization but the problem is that I have to implement a kind of vector tile approach (request vector data per each x,y,z tile from server) and I could not find any better tileprovider than this, I can not also work with 3d tiles since it is mostly relied to cesium’s 3d tiles servers. So I wanted to start use this approach. I can not use pre rendered data from server since I am working with DGGS which are equal area globe tessellation and I realized that cesium is able to render such vectors with no distortions. If I could find any tile provider which can work as vector tiles (not necessarily pbf vector tiles) it would be great.

Thanks

Cesium has work-in-progress support for vector tiles via Cesium 3D Tiles. The spec is here:
https://github.com/AnalyticalGraphicsInc/3d-tiles/blob/3d-tiles-next/TileFormats/VectorData/README.md

Thanks Kevin,
Is that already implemented in library? Because I have to write a kind of vector tile provider to read my own data format instead of mvt format and pass it to rendering engine.

The specification is still a draft, but there is initial support for it in CesiumJS. You can see an example in this Sandcastle: https://sandcastle.cesium.com/index.html?src=3D%20Tiles%20Terrain%20Classification.html

I guess this is the class that I have to implement to be able to load my own vector data per each x,y,z tile
https://github.com/AnalyticalGraphicsInc/cesium/blob/1.64/Source/Scene/Cesium3DTileset.js#L137

thanks

Hi Omar,
Is there any examples to see how you made that vector tile format file?or even how we can validate our own vector tile?