Hi Kevin, have switched on the notification in google mail now, so it notifies me when emails arrive!!
I tried the terrainprovider you suggested - not much success - then I switched off my depthTestAgainstTerrain and voila!! Works.
However I also need that depthTest on account of the ellipsoids …
Below is my sandcastle code, draws billboard, polygon & ellipsoid - if you comment / uncomment the depthTestAgainstTerrain on line 12, you will see what I mean. Zoom in & out when it it is on and you see how the polygon & billboard disappear/appear.
We need the ellipsoid to be cut off at the earth/sea surface. If we use it to surround for eg. an object rising from the surface, it gradually reveals more until when the object is higher than the diameter, you will see the whole ellipse.
How can I chop off the portion of the ellipsoid below the surface? Or should I be using an entirely different object altogether? Remember that the ellipsoid also needs to move position with the object… (For the movement - Dan gave me the solution to seperate out the modelmatrix - which causes the 2D to fail, but 3D moves easily)
Summary of issues desperate for help:
-
Visibility of billboards, polylineCollections, labels and polygons VERSUS hiding ellipsoid portion below surface
-
Moving ellipsoid but still keeping 2D integrity …
Please help. Thanks!
Regards
Rencia
Code:
require([‘Cesium’], function(Cesium) {
“use strict”;
var widget = new Cesium.CesiumWidget(‘cesiumContainer’, {
imageryProvider : new Cesium.OpenStreetMapImageryProvider({
url : ‘http://otile1.mqcdn.com/tiles/1.0.0/osm’
})
});
var scene = widget.scene;
//scene.globe.depthTestAgainstTerrain = true;
var primitives = scene.primitives;
var ellipsoid = scene.globe.ellipsoid;
var terrainProvider = new Cesium.CesiumTerrainProvider({
url : ‘//cesiumjs.org/smallterrain’
});
var billboard;
function addBillboard(scene, ellipsoid, terrainProvider) { //, image) {
var image = new Image();
image.src = ‘…/images/Cesium_Logo_overlay.png’;
var positions = ellipsoid.cartographicArrayToCartesianArray([
Cesium.Cartographic.fromDegrees(18.06, -32.65)
]);
var promise = Cesium.sampleTerrain(terrainProvider, 11, positions);
Cesium.when(promise, function(updatedPositions) {
var billboards = new Cesium.BillboardCollection();
var textureAtlas = scene.createTextureAtlas({
image : image
});
billboards.textureAtlas = textureAtlas;
billboard = billboards.add({
position : positions[0],
imageIndex : 0,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM
});
billboard.isBillBoard = true;
scene.primitives.add(billboards);
});
}
function drawPoly(terrainProvider, primitives) {
// Red polygon
var positions = ellipsoid.cartographicArrayToCartesianArray([
Cesium.Cartographic.fromDegrees(17.96, -32.65),
Cesium.Cartographic.fromDegrees(18.06, -32.75),
Cesium.Cartographic.fromDegrees(18.37, -32.67),
Cesium.Cartographic.fromDegrees(17.97, -32.56)
]);
var promise = Cesium.sampleTerrain(terrainProvider, 11, positions);
Cesium.when(promise, function(updatedPositions) {
var redPolygonInstance = new Cesium.GeometryInstance({
geometry : Cesium.PolygonGeometry.fromPositions({
positions : positions,
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.2))
}
});
// Add polygon instances to primitives
primitives.add(new Cesium.Primitive({
geometryInstances : redPolygonInstance,
appearance : new Cesium.PerInstanceColorAppearance({
closed : true,
translucent : true
})
}));
});
}
function drawDome(scene, ellipsoid, terrainProvider) {
// Create ellipsoid are position with model matrix
var height = -2500.0;
var positions = ellipsoid.cartographicArrayToCartesianArray([
Cesium.Cartographic.fromDegrees(18.06, -32.60)
]);
var radii = new Cesium.Cartesian3(5000.0, 5000.0, 5000.0);
var promise = Cesium.sampleTerrain(terrainProvider, 11, positions);
Cesium.when(promise, function(updatedPositions) {
var ellipsoidmodelMatrix = Cesium.Matrix4.multiplyByTranslation(
Cesium.Transforms.eastNorthUpToFixedFrame(positions[0]),
new Cesium.Cartesian3(0.0, 0.0, height)
);
var ellipsoidGeometry = new Cesium.EllipsoidGeometry({
vertexFormat : Cesium.VertexFormat.VERTEX_FORMAT,
radii : radii
});
var ellipsoidInstance = new Cesium.GeometryInstance({
geometry : ellipsoidGeometry,
//modelMatrix : ellipsoidmodelMatrix,
id : ‘dome’,
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(0.0, 0.0, 1.0, 0.4))
}
});
// Add ellipsoid instance to primitives
var domePrimitive = new Cesium.Primitive({
geometryInstances : ellipsoidInstance,
id : ‘dome’,
appearance : new Cesium.PerInstanceColorAppearance({
translucent : true//,
//closed : true
})
});
domePrimitive.modelMatrix = ellipsoidmodelMatrix;
scene.primitives.add(domePrimitive);
});
}
Sandcastle.addToolbarButton(‘Draw polygon’, function() {
//cleanup();
drawPoly(terrainProvider, primitives);
});
Sandcastle.addToolbarButton(‘Draw billboard’, function() {
//cleanup();
addBillboard(scene, ellipsoid, terrainProvider);
});
Sandcastle.addToolbarButton(‘Draw dome’, function() {
//cleanup();
drawDome(scene, ellipsoid, terrainProvider);
});
var destination = Cesium.Cartographic.fromDegrees(18.06, -32.70, 25000.0);
var flight = Cesium.CameraFlightPath.createAnimationCartographic(scene, {
destination : destination
});
scene.animations.add(flight);
Sandcastle.finishedLoading();
});
