Hi!
Can anybody please help?
I try to create a primitive, like ellipse and fill it use canvas with transparent background.
But in this case all under transparent background become transparent too.
How I can blend primitive filled with canvas with transparent background and other semi-transparent entities/primitive which are located under first primitive (filled with canvas).
Example:
Screenshot:
Thanks!
It’s not entirely clear whether this is the effect that you want to achieve, but you might be looking for
const material = new Cesium.Material({
translucent: true, // <--------------------------------- this line?!
fabric: {
...
Hi! Thank you very much for your answer!
Yes, I want to have an effect like in your example. But in your example, the black text becomes not black, looks like it blends with the semi-transparent white rectangle (but the rectangle located under the text and text, which locate upper, have to be fully black).
The same effect I have if I draw text in this way:
let material = new Cesium.ImageMaterialProperty({
image: canvas,
transparent: true
});
var eEntity = viewer.entities.add({
name: "Single Large Canvas of Labels",
rectangle: {
coordinates: Cesium.Rectangle.fromRadians(
lng + offsetX,
lat + offsetY,
lng + offsetX + 0.00001,
lat + offsetY + 0.000002,
),
height: 100 + 0.01 * i,
material: material
},
});
Is it possible to live text black color if text upper the semi-transparent white rectangle?
Only transparent and semi-transparent colors in materials canvas have to be blended with primitives/entities under it. Is it possible ?
You can see difference in text black color in next photos:
Not transparent background becomes a semitransparent too.
I need that only transparent and semitransparent canvas color will have a transparency.
Not transparent color will not have transparency. Is it possible?
Example (that non transparent colors become a transparent):
Screenshot:
I have found a solution using billboard with BillboardCollection, like this:
const billboard = this.billboardCollection.add({
id: id,
position: position,
image: canvas,
width: bilboardSize.x,
height: bilboardSize.y,
sizeInMeters: this.isSizeInMeters, // size in meters
eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -100),
verticalOrigin : Cesium.VerticalOrigin.CENTER,
heightReference: this.isSizeInMeters ? Cesium.HeightReference.NONE : Cesium.HeightReference.RELATIVE_TO_GROUND
});
Is it possible to have the same effect using entities/primitives with material
e.g. rectangle
?
Thanks!
I have tried to combine materials, to have effect like with billbords
const material = new Cesium.Material({
translucent: true,
fabric: {
materials: {
alphaMaterial: {
type: "AlphaMap",
uniforms: {
image: icon,
channel: "a",
},
},
diffuseMaterial: {
type: "Image",
uniforms: {
image: icon,
},
},
},
components: {
diffuse: "diffuseMaterial.diffuse",
alpha: "alphaMaterial.alpha",
},
},
});
but result the same as in my first example from March 24
Maybe it possible somehove to combine material to have effect the same as with billboards?
Thanks!
Maybe try to experiment with datasources.
Not sure, I’m not looking inside - how Cesium works, As for me it seems related to the render ordering.
I’ve found the way with datasources - if you place your items in datasources and take care of the order in which they added to the viewer
You can experiment here - if you just place polygons to viewer entities seems that you can’t control the order of rendering even if you change their height (like polygon2.polygon.height = 10)
But when you change the order of adding datasources into the viewer you can achieve desired ordering
Yes, it work without height, but when you add height is become working like in second example