I think I mean "translucent"...
I'm trying to put a rectangle with an image material and control the translucency of the image so I can see the background behind it (like we do with ordinary layers).
This is my code:
var redRectangle = viewer.entities.add({
name : 'Red translucent rectangle',
rectangle : {
coordinates : Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),
material : new Cesium.ImageMaterialProperty({
image : '../images/Cesium_Logo_Color.jpg',
transparent: true,
translucent : true,
alpha: 0.2
}),
}
});
I can't get it to work. I already tried every option inside material but with no results.
try it in Sandcastle. My goal is to see a translucid logo.
Solved.
Need to give a color to the image ( what?? ) and apply an alpha to it.
var redRectangle = viewer.entities.add({
name : 'Red translucent rectangle',
rectangle : {
coordinates : Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),
material : new Cesium.ImageMaterialProperty({
image : '../images/Cesium_Logo_Color.jpg',
color: Cesium.Color.WHITE.withAlpha(0.1) <<<< ----- THIS MAKE IT TRANSLUCENT
}),
}
});
Related
I am trying to rotate billboard text. I want the text to be rotated at the origin point I set with verticalOrigin and horizontalOrigin. When I apply a rotation, the rotation is based on the image center, not the origin point I specified.
How do I rotate the billboard at the origin point instead?
map.entities.add({
position : Cesium.Cartesian3.from Degrees(),
billboard : {
image : Cesium.writeTextToCanvas('ANCHOR POINT', {
font : '12pt Arial, sans-serif',
fillColor : Cesium.Color.AQUA
}),
rotation : Cesium.Math.toRadians(0),
alignedAxis : Cesium.Cartesian3.UNIT_Z,
verticalOrigin : Cesium.VerticalOrigin.CENTER,
horizontalOrigin : Cesium.HorizontalOrigin.LEFT
}
})
OP ended up filing an issue and asking a community question about this on the Cesium forums.
The answer is that there isn't a direct way to set the rotation to happen around another point, even though it makes intuitive sense that verticalOrigin and horizontalOrigin should control this. See the source of vert_shader for details.
As a workaround, you can accomplish the same thing by applying the rotation to the center, and then shifting the position of the billboard (using trig to calculate the offsets) so it is placed as if the rotation happened at the edge. The calculated offsets can be passed as an additional property on the billboard:
map.entities.add({
position : Cesium.Cartesian3.from Degrees(),
billboard : {
image : Cesium.writeTextToCanvas('ANCHOR POINT', {
font : '12pt Arial, sans-serif',
fillColor : Cesium.Color.AQUA
}),
rotation : Cesium.Math.toRadians(0),
alignedAxis : Cesium.Cartesian3.UNIT_Z,
position : new Cesium.Cartesian3(x_offset, y_offset, z_offset)
}
})
I've opened a feature request on GitHub to fix this.
I've generated a generated a GLB file using khronos's SharpGLTF libraries and have got the model loading in cesium, the model appears correctly. The problem is the material for the model does not show. I have tested the generated GLB in other viewers and the material does show.
I'm using the following code in cesium:
var entity = viewer.entities.add({
name : 'url_here',
position : center,
orientation : orientation,
model : {
uri : 'url_here',
minimumPixelSize : 128,
maximumScale : 20000,
}
});
also tried
var model = scene.primitives.add(Cesium.Model.fromGltf({
id: 'here',
url: 'url here'
modelMatrix : modelMatrix,
scale : 1.0,
}));
I've tried using the color modifiers for cesium and the only option that responds is "color" which doesn't help as it doesn't apply any lighting to the color.
Below is a picture of what cesium is outputting. However there should be more effects to the material than just red. It seems to respect only KnownChannel.BaseColor and that's it.
Any ideas?
I am trying to create a special material for a Cesium Polygon, which has to incorporate a hatched area with an outline.
Now, from the base materials I can use "Stripe", so i can create my graphic like this:
var viewer = new Cesium.Viewer('cesiumContainer');
var degrees_array = [
92.1470732697006,
21.954465553476467,
99.08781126987297,
32.557089696031916,
68.66765785924682,
24.272023818381587
];
var polygon = viewer.entities.add({
name : 'polygon',
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray(degrees_array),
extrudedHeight: 0,
material : new Cesium.StripeMaterialProperty(
{
evenColor:Cesium.Color.GRAY,
oddColor:Cesium.Color.WHITE,
orientation: Cesium.StripeOrientation.HORIZONTAL,
repeat:100,
offset:0
}
),
//outline is ignored by WebGL
//outline: true,
//outlineColor:Cesium.Color.BLACK,
//outlineWidth:1
}
});
//since designing an outline is not possible with polygon we create a custom polylineGraphics:
var outline_array = degrees_array;
// since loop is not available for polylineGraphics we add the first point positions
outline_array.push(outline_array[0],outline_array[1]);
var outline = viewer.entities.add({
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray(outline_array),
width : 5,
material : Cesium.Color.GRAY,
clampToGround:true,
zIndex:0
}
});
viewer.zoomTo(polygon)
see sandcastle link
My questions:
- is there a way to rotate the stripes, so that they appear as diagonally hatched
- can zoom be omitted for the Stripe material, so that it is always displayed with the same line width?
Thanks a lot!
If you are still wondering. You can rotate the stripes by using stRotation
polygon: {
hierarchy: <posititons>
stRotation: Cesium.Math.toRadians(45),
material: stripeMaterial,
}
I want to display a GPS tracklog in my Cesium application. But I can't get a nice styling for the path working. What I want it to look like:
What it currently looks like:
This is how I style the path currently:
path : {
width : 2,
leadTime : 0,
resolution : 5,
material : {
polylineOutline : {
color : {
rgba : [255, 0, 0, 255]
}
},
},
},
What I want to have:
Thin colored lines without black blurry "outlines" (see second image and compare with first).
A faded area that marks the elevation above ground for the first section of the path.
SOLUTION:
For 1.) I now found a pretty similar solution thanks to emackey:
path : {
show : true,
leadTime : 0,
trailTime : 60,
width : 2.5,
resolution : 1,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 15,
taperPower : 0.0001,
color : Cesium.Color.fromBytes(349, 66, 68, 255)
})
}
For 2.) I still haven't found what I'm looking for.
There isn't a built-in effect exactly like that first screenshot you posted from Ayvri (formerly Doarama), but, the most similar built-in thing could be the "tapered line" effect added earlier this year to Cesium:
Here's a demo. Click in the Cesium window and use the arrow keys to steer the aircraft.
These are the path settings from the demo:
path : {
show : true,
leadTime : 0,
trailTime : 60,
width : 10,
resolution : 1,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.3,
taperPower : 0.3,
color : Cesium.Color.PALEGOLDENROD
})
}
I add the anntation like this
var annot= Map.createAnnotation({
latitude: XXXXXXXXXXX,
longitude: XXXXXXXXXX,
title: 'myPlace',
image: 'myPin.png',
width:'100dp',// doesn't work
height:'100dp'// doesn't work
});
this.mapView.addAnnotation(annot);
}
I would like to change the size of image though,
there seems no way to change.
So I need to edit the file size itself by image editor or something.
Moreover images are show differently in Android or iPhone.
So I need to make two size for each pins.
MapModule.createAnnotation({
latitude : XXXX,
longitude : XXXX,
customView : Ti.UI.createView({
width : widthImg,
height : heightImg * 2,
children : [Ti.UI.createView({
top : 0,
width : width,
height : height,
backgroundImage : "myPin.png"
})]
})
});