In my case,disableDepthTestDistance of PointPrimitive has been set to POSITIVE_INFINITY, but it is still not at the top.It is still overwhelmed by CircleGeometry, which makes it impossible to pick up.
I want to keep PointPrimitive at the top level, even if the appearance.renderState.depthTest of the Primitive loaded CircleGeometry is false, what should I do?
See Test DEMO
Thank you very much for the detailed community forum post! I would love to know more about your application. For instance, what are you trying to achieve with your PointPrimative objects? More information on your project goal would help me provide you with more tailored support. In the meantime, have you checked out the following community forum threads?
These threads discuss a lot of the topics that you are mentioning here. Among other things, these resources discuss best practices for disabling depth tests for a variety of entities. I am curious to hear your thoughts!
-Sam
Thank you so much sam.rothstein!
I want to keep my PointPrimative at the top level. I have set its disableDepthTestDistance property to Number.POSITIVE_INFINITY. But it doesn’t seem to take effect. For details, you can see the Test Demo above.
The effect I want is:
The actual effect is:
The PointPrimitive in the middle seems to be overwhelmed by the CircleGeometry, which prevents me from picking it up.
And the reason why I want Disable Depth Test For the CircleGeometry is because I want CircleGeometry to maintain its integrity and not be overwhelmed by other objects, such as 3dtiles.
As shown below (Enable Depth Test):
For the CircleGeometry, the effect I want is as follows(Disable Depth Test):
But there is still a problem with the above effect. PointPrimitive is overwhelmed by CircleGeometry, even if the disableDepthTestDistance property of PointPrimitive has been set to Number.POSITIVE_INFINITY.
So, my real demand is, Disable Depth Test For CircleGeometry, and keep PointPrimitive at the top.
I don’t know if I have described my problem clearly. I look forward to your reply.
@sam.rothstein
class VertexPrimitive{
constructor() {
this._vertexs = new Cesium.PointPrimitiveCollection({
blendOption: Cesium.BlendOption.TRANSLUCENT
})
}
add(vertex) {
this._vertexs.add(vertex)
}
update(frameState) {
if (this._vertexs.length > 0) {
let originalLength = frameState.commandList.length
this._vertexs.update(frameState)
let endLength = frameState.commandList.length
for (let i = originalLength; i < endLength; ++i) {
frameState.commandList[i].pass = Cesium.Pass.TRANSLUCENT
frameState.commandList[i].renderState = Cesium.RenderState.fromCache({
depthTest: {
enabled: false
},
depthMask: false
})
}
}
}
……
}
It can be solved in this way.
@IKangXu
Thank you for your reply. I tried the solution you gave, but it didn’t seem to work. I don’t know if I didn’t write it correctly.
@zouyaoji switch to entity to load the circle.
const circle = new Cesium.CircleGeometry({
center: startPosition,
radius: 100,
});
const primitive = new Cesium.Primitive({
appearance: new Cesium.MaterialAppearance({
material: Cesium.Material.fromType("Color"),
faceForward: true,
renderState: {
depthTest: {
enabled: false,
},
},
}),
geometryInstances: new Cesium.GeometryInstance({
geometry: circle,
}),
asynchronous: false,
});
primitiveCollection.add(primitive);
to
function computeCirclePoints(center, radius) {
let pnts = [];
let cep = Cesium.EllipseGeometryLibrary.computeEllipsePositions({
center: center,
semiMajorAxis: radius,
semiMinorAxis: radius,
rotation: 0,
granularity: 0.005
},
false,
true
);
if (cep && cep.outerPositions) {
pnts = Cesium.Cartesian3.unpackArray(cep.outerPositions);
}
return pnts;
}
var pnts = computeCirclePoints(startPosition, 100);
pnts.push(pnts[0]);
var entity = new Cesium.Entity({
polygon: {
material: Cesium.Color.YELLOW.withAlpha(0.6),
fill: true,
hierarchy: {
positions: pnts
}
}
});
viewer.entities.add(entity);
Thank you for jumping in and helping out @zouyaoji 
Your engagement means a lot to the community!
-Sam
Thanks to @IKangXu , but the problem is still not solved.
Do you have a solution? @sam.rothstein
I want to use Primitive API instead of Entity API.
In my case, how can I pick up the PointPrimitive covered by CircleGeometry. Or how to make PointPrimitive at the top. When I set disableDepthTestDistance of PointPrimitive to Number.POSITIVE_INFINITY, PointPrimitive is still not at the top level. Can this be considered a BUG?
The method of using primitive has been solved.
The method is as follows:
Set the draw primitive object
pass = Cesium.Pass.OPAQUE and blending: Cesium.BlendingState.ALPHA_BLEND
In fact, it is to adjust the order of Primitive rendering to before PointPrimitive
const primitive = new Cesium.Primitive({
appearance: new Cesium.MaterialAppearance({
material: Cesium.Material.fromType("Color"),
faceForward: true,
renderState: {
depthTest: {
enabled: false,
},
},
}),
geometryInstances: new Cesium.GeometryInstance({
geometry: circle,
}),
asynchronous: false,
});
primitiveCollection.add(primitive);
const primitive = new Cesium.Primitive({
appearance: new Cesium.MaterialAppearance({
material: Cesium.Material.fromType("Color"),
faceForward: true,
renderState: {
depthTest: {
enabled: false,
},
},
}),
geometryInstances: new Cesium.GeometryInstance({
geometry: circle,
}),
asynchronous: false,
});
primitiveCollection.add(primitive);
var originalPrimitiveUpdate = primitive.update;
primitive.update = function (frameState) {
const originalLength = frameState.commandList.length;
originalPrimitiveUpdate.call(this, frameState);
const endLength = frameState.commandList.length;
for (let i = originalLength; i < endLength; ++i) {
frameState.commandList[i].pass = Cesium.Pass.OPAQUE;
frameState.commandList[i].renderState = Cesium.RenderState.fromCache({
depthTest: {
enabled: false
},
depthMask: false,
blending: Cesium.BlendingState.ALPHA_BLEND
});
}
};
@IKangXu
It’s solved perfectly. Thank you for your contribution and sharing.
If you use GroundPrimitive, The following effects occur
The reason for this phenomenon is GroundPrimitive
the order of rendering itself takes precedence over Cesium.Pass.TRANSLUCENT
Therefore, there is no need to adjust the rendering order accordingly.
primitive.update = function (frameState) {
const originalLength = frameState.commandList.length;
originalPrimitiveUpdate.call(this, frameState);
const endLength = frameState.commandList.length;
for (let i = originalLength; i < endLength; ++i) {
if(frameState.commandList[i].pass !== Cesium.Pass.TRANSLUCENT) {
continue;
}
frameState.commandList[i].pass = Cesium.Pass.OPAQUE;
frameState.commandList[i].renderState = Cesium.RenderState.fromCache({
depthTest: {
enabled: false
},
depthMask: false,
blending: Cesium.BlendingState.ALPHA_BLEND
});
}
};