1. A concise explanation of the problem you're experiencing.
We have an application that builds live maps of vessels working offshore. In our maps we are adding real time background images to show depth data that is being processed by our application. Currently we show the background depth data as an image on a polygon and a vessel shape as a primitive collection of polylines.
Our first attempt was to use the PolygonGraphic and place the image as the material. This presented issues with z-ordering. Specifically when in 2D maps.
Our second attempt was to use PolygonGeometry and place the image on the material of the appearance. This presented issues with transparency and z-ordering. The issue was most noticed when moving from 2D to 2.5D to 3D.
The exact issue we saw is that the polylines were being occluded by the image regardless if the image was placed under or over the primitive collection. To see this you would need to run the code and move the camera at different angles around the image in 3d mode.
If we are not doing this the best way, then any assistance in showing us a better way to accomplish this would be greatly appreciated.
What is the best way to add images that are dynamically updated into a scene and have the images always be the bottom-most (farthest back, lowest z order) object?
2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.
function createPrimitives(scene) {
var vesselPrimitives = new Cesium.PrimitiveCollection();
scene.primitives.add(vesselPrimitives);
var coveragePrimitives = new Cesium.PrimitiveCollection();
scene.primitives.add(coveragePrimitives);
// Create "vessel" outline
var BL2 = Cesium.Cartesian3.fromDegrees(-4.145, 50.356);
var TR2 = Cesium.Cartesian3.fromDegrees(-4.142, 50.36);
var TL2 = Cesium.Cartesian3.fromDegrees(-4.146, 50.36);
var shape = vesselPrimitives.add(new Cesium.PolylineCollection({
id: "shape"
}));
shape.add({
positions : [BL2, TR2, TL2, BL2],
width : 5,
material : Cesium.Material.fromType('Color', {
color: Cesium.Color.CYAN
})
});
// Create "background image - with transparency"
var BL = Cesium.Cartesian3.fromDegrees(-4.144905863409379, 50.35749971594101);
var BR = Cesium.Cartesian3.fromDegrees(-4.141265583881021, 50.35753549832977);
var TR = Cesium.Cartesian3.fromDegrees(-4.141321430782741, 50.35986435097053);
var TL = Cesium.Cartesian3.fromDegrees(-4.14496188835051, 50.35982856564039);
var corners = [BL, BR, TR, TL];
var hierarchy = new Cesium.PolygonHierarchy(corners);
var polyGeo = new Cesium.PolygonGeometry({
polygonHierarchy : hierarchy,
// vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
});
var geoInstance = new Cesium.GeometryInstance({
geometry : polyGeo
});
var appearance = new Cesium.EllipsoidSurfaceAppearance({
aboveGround : false,
material : new Cesium.Material({
fabric : {
type : 'Image',
uniforms : {
image : "https://cesiumjs.org/Cesium/Source/Assets/Images/ion-credit.png"
// image : '../images/Cesium_Logo_Color.jpg'
}
}
})
});
/*
var coverage = new Cesium.GroundPrimitive({
geometryInstances : geoInstance,
appearance : appearance,
});
*/
var coverage = new Cesium.Primitive({
geometryInstances : geoInstance,
appearance : appearance,
});
// Add "background image" to its primitive collection
coveragePrimitives.add(coverage);
}
var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
createPrimitives(scene);
3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
Ultimately we want to be able to display an image that is being updated once per second and have that as the base image for the scene.
4. The Cesium version you're using, your operating system and browser.
We are currently using version 1.35 in production but we have also tested this with 1.46 and 1.47 with varying results.
