Removing and adding a new one causes too much flicker.
If you have a single cylinder in a primitive, you can use the modelMatrix to change the scale, and thus the height, of the cylinder. See Matrix4.fromUniformScale.
If you have several cylinders in a primitive, it is possible to write a custom appearance that allows per-instance cylinder height and applies it in the vertex shader. We may add an example like this to the tutorial since other folks have asked a similar question about changing the height of a polygon.
Patrick
any update on this?
Hi David,
No update on a custom appearance, but this is a reasonable approach if you don’t have 1,000 of cylinders:
If you have a single cylinder in a primitive, you can use the modelMatrix to change the scale, and thus the height, of the cylinder. See Matrix4.fromUniformScale.
Patrick
I don’t exactly understand the documentation.
So this would increase the all around size of the cylinder not just the height right?
I want to be able to adjust the height, and radius seperately (for testing purposes to have height and radius change by a trackbar)
Also I have been attempting to use that function but I’m not sure how.
Here is my sample sandcastle code. https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html
var viewer = new Cesium.Viewer(‘cesiumContainer’, {
sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
//Hide the base layer picker
baseLayerPicker: false,
//Use BingMaps
imageryProvider: new Cesium.BingMapsImageryProvider({
url: ‘//dev.virtualearth.net’,
mapStyle: Cesium.BingMapsStyle.ROAD
}),
fullscreenButton: false,
homeButton: false,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false,
animation: false,
geocoder: false,
infobox: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false
});
Sandcastle.addToolbarButton(‘Matrix4.fromScale(2.0)’, function() {
var CurrentModelMatrix = primitives.get(0).geometryInstances[0].modelMatrix;
CurrentModelMatrix = Cesium.Matrix4.fromScale(2.0);
});
Sandcastle.addToolbarButton(‘Matrix4.fromScale(3.0)’, function() {
var CurrentModelMatrix = primitives.get(0).geometryInstances[0].modelMatrix;
CurrentModelMatrix = Cesium.Matrix4.fromScale(3.0);
});
Sandcastle.addToolbarButton(‘Matrix4.fromScale(4.0)’, function() {
var CurrentModelMatrix = primitives.get(0).geometryInstances[0].modelMatrix;
CurrentModelMatrix = Cesium.Matrix4.fromScale(2.0);
});
var scene = viewer.scene;
var primitives = scene.primitives;
function flyTo(x,y) {
try {
viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(x - .006,y - .015, 2000.0),
up: new Cesium.Cartesian3(0.0, 0.0, 1),
direction: new Cesium.Cartesian3(0.3, 0.5, -.5)
});
}
catch (e) {
alert(e.message);
}
}
var positionOnEllipsoid = Cesium.Cartesian3.fromDegrees(-120.0, 40.0);
var modelMatrix = Cesium.Matrix4.multiplyByTranslation(
Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid),
new Cesium.Cartesian3(0.0, 0.0, length * 0.5), new Cesium.Matrix4()
);
// Create the cylinder geometry.
var cylinderGeometry = new Cesium.CylinderGeometry({
length : 1000.0,
topRadius : 100.0,
bottomRadius : 100.0,
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
});
// Create a geometry instance using the cylinder geometry
// created above. We can also specify a color attribute,
// in this case, we’re creating a solid green color.
var greenCylinder = new Cesium.GeometryInstance({
geometry : cylinderGeometry,
modelMatrix : modelMatrix,
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.GREEN)
}
});
primitives.add(new Cesium.Primitive({
releaseGeometryInstances: false,
geometryInstances : [greenCylinder],
appearance : new Cesium.PerInstanceColorAppearance({
closed : true,
translucent: false
})
}));
flyTo(-120,40);
``
The modelMatrix doesn’t have to change the overall size. Use non-uniform scale (and you’ll probably want a translation too). For example, if Z is up, then we only want to scale in the Z direction. See Matrix4.fromScale. Sorry, I posted the wrong scale function before.
Patrick
That seems like it should do the trick, could you possibly give me a sandcastle example so I could see how it works? my previous example should change the size but it does nothing. Thanks for your help Patrick.
That seems like it should do the trick, could you possibly give me a sandcastle example so I could see how it works? my previous example should change the size but it does nothing. Thanks for your help Patrick.
Patrick
The modelMatrix doesn’t have to change the overall size. Use non-uniform scale (and you’ll probably want a translation too). For example, if Z is up, then we only want to scale in the Z direction. See Matrix4.fromScale. Sorry, I posted the wrong scale function before.
Also I have been attempting to use that function but I’m not sure how.
Here is my sample sandcastle code. https://cesiumjs.org/Cesium/Apps/Sandcastle/index.htmlvar viewer = new Cesium.Viewer(‘cesiumContainer’, {
sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
//Hide the base layer picker
baseLayerPicker: false,
//Use BingMaps
imageryProvider: new Cesium.BingMapsImageryProvider({
url: ‘//dev.virtualearth.net’,
mapStyle: Cesium.BingMapsStyle.ROAD
}),
fullscreenButton: false,
homeButton: false,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false,
animation: false,
geocoder: false,
infobox: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false
});
Sandcastle.addToolbarButton(‘Matrix4.fromScale(2.0)’, function() {
var CurrentModelMatrix = primitives.get(0).geometryInstances[0].modelMatrix;
CurrentModelMatrix = Cesium.Matrix4.fromScale(2.0);
});
Sandcastle.addToolbarButton(‘Matrix4.fromScale(3.0)’, function() {
var CurrentModelMatrix = primitives.get(0).geometryInstances[0].modelMatrix;
CurrentModelMatrix = Cesium.Matrix4.fromScale(3.0);
});
Sandcastle.addToolbarButton(‘Matrix4.fromScale(4.0)’, function() {
var CurrentModelMatrix = primitives.get(0).geometryInstances[0].modelMatrix;
CurrentModelMatrix = Cesium.Matrix4.fromScale(2.0);
});
var scene = viewer.scene;
var primitives = scene.primitives;
function flyTo(x,y) {
try {
viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(x - .006,y - .015, 2000.0),
up: new Cesium.Cartesian3(0.0, 0.0, 1),
direction: new Cesium.Cartesian3(0.3, 0.5, -.5)
});
}
catch (e) {
alert(e.message);
}
}
var positionOnEllipsoid = Cesium.Cartesian3.fromDegrees(-120.0, 40.0);
var modelMatrix = Cesium.Matrix4.multiplyByTranslation(
Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid),
new Cesium.Cartesian3(0.0, 0.0, length * 0.5), new Cesium.Matrix4()
);
// Create the cylinder geometry.
var cylinderGeometry = new Cesium.CylinderGeometry({
length : 1000.0,
topRadius : 100.0,
bottomRadius : 100.0,
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
});
// Create a geometry instance using the cylinder geometry
// created above. We can also specify a color attribute,
// in this case, we’re creating a solid green color.
var greenCylinder = new Cesium.GeometryInstance({
geometry : cylinderGeometry,
modelMatrix : modelMatrix,
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.GREEN)
}
});
primitives.add(new Cesium.Primitive({
releaseGeometryInstances: false,
geometryInstances : [greenCylinder],
appearance : new Cesium.PerInstanceColorAppearance({
closed : true,
translucent: false
})
}));
flyTo(-120,40);
``
I don’t exactly understand the documentation.
So this would increase the all around size of the cylinder not just the height right?
I want to be able to adjust the height, and radius seperately (for testing purposes to have height and radius change by a trackbar)
Hi David,
No update on a custom appearance, but this is a reasonable approach if you don’t have 1,000 of cylinders:
If you have a single cylinder in a primitive, you can use the modelMatrix to change the scale, and thus the height, of the cylinder. See Matrix4.fromUniformScale.
Patrick
any update on this?
If you have a single cylinder in a primitive, you can use the modelMatrix to change the scale, and thus the height, of the cylinder. See Matrix4.fromUniformScale.
If you have several cylinders in a primitive, it is possible to write a custom appearance that allows per-instance cylinder height and applies it in the vertex shader. We may add an example like this to the tutorial since other folks have asked a similar question about changing the height of a polygon.
Patrick
Removing and adding a new one causes too much flicker.
–
You received this message because you are subscribed to a topic in the Google Groups “cesium-dev” group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/cesium-dev/uFjOz5F0uK8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
–
You received this message because you are subscribed to a topic in the Google Groups “cesium-dev” group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/cesium-dev/uFjOz5F0uK8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to cesium-dev+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
–
You received this message because you are subscribed to a topic in the Google Groups “cesium-dev” group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/cesium-dev/uFjOz5F0uK8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to cesium-dev+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
So I ended up creating a custom datasource instead and using that method, only downside is it takes a while to load the json and set all of the sampledpositionproperty, and I still can’t increase the size of the entities once created. My current method is creating an array of Cesium.SampledPositionProperty for each size that I want to be able to increase or decrease to for each entity…and then looping through the entities and setting the positions. So if the method you mentioned Matrix4.fromScale will work please help me understand how! Thank you for your time.
But how can you have the primitive redrawn? when I make a change it isn’t reflected. although if I use the same method before the object is drawn it does reflect the change. So my issues isthat the primitive isn’t redrawn after the change, any ideas?
Can you provide a concise code example? The scene is automatically redrawn unless you explicitly set viewer.useDefaultRenderLoop to false. In Cesium 1.0, in 3D, if a primitive contains a single geometry, we should be able to update its modelMatrix and it should be reflected in the next frame.
Patrick
here is a sandcastle code example that has 2 problems
-
object isn’t redrawn after modelmatrix is changed(to see if the code does anything change addToolbarButton to addDefaultToolbarButton this will process the code before its drawn)
-
Changing the model matrix moves location of the model instead of changing its dimensions, i want to keep its position but change its height or rather make it taller.
var viewer = new Cesium.Viewer(‘cesiumContainer’, {
sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
//Hide the base layer picker
baseLayerPicker: false,
//Use BingMaps
imageryProvider: new Cesium.BingMapsImageryProvider({
url: '//dev.virtualearth.net',
mapStyle: Cesium.BingMapsStyle.ROAD
}),
fullscreenButton: false,
homeButton: false,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false,
animation: false,
geocoder: false,
infobox: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false
});
var scene = viewer.scene;
var toolbar = document.getElementById(‘toolbar’);
var primitives = viewer.scene.primitives;
// Draw a red box and position it on the globe surface.
var dimensions = new Cesium.Cartesian3(50.0, 50.0, 1000.0);
// Box geometries are initially centered on the origin.
// We can use a model matrix to position the box on the
// globe surface.
var positionOnEllipsoid = Cesium.Cartesian3.fromDegrees(-111, 41);
var boxModelMatrix = Cesium.Matrix4.multiplyByTranslation(
Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid),
new Cesium.Cartesian3(0.0, 0.0, dimensions.z * 0.5), new Cesium.Matrix4());
// Create a box geometry.
var boxGeometry = Cesium.BoxGeometry.fromDimensions({
vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
dimensions : dimensions
});
// Create a geometry instance using the geometry
// and model matrix created above.
var boxGeometryInstance = new Cesium.GeometryInstance({
geometry : boxGeometry,
modelMatrix : boxModelMatrix,
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5))
}
});
// Add the geometry instance to primitives.
primitives.add(new Cesium.Primitive({
releaseGeometryInstances : false,
asynchronous : false,
geometryInstances : boxGeometryInstance,
appearance : new Cesium.PerInstanceColorAppearance({
closed: true
})
}));
viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-111 - .006, 41 - .05, 5000.0),
up: new Cesium.Cartesian3(0.0, 0.0, 1),
direction: new Cesium.Cartesian3(0.3, 0.5, -.5)
});
Sandcastle.addToolbarButton(‘Change Model Matrix’, function() {
var prim = viewer.scene.primitives.get(0);
alert(prim);//check to see if primitive object exists
var matrix = prim.geometryInstances.modelMatrix;
alert(matrix);//check to see if the matrix object exists
var newMatrix = Cesium.Matrix4.multiplyByTranslation(
Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid),
new Cesium.Cartesian3(0.0, 0.0, dimensions.z), new Cesium.Matrix4());
prim.geometryInstances.modelMatrix = newMatrix;
});
``
I was able to figure out that it is possible to change the height width color and much more of a polygon contained in a czmldatasource here are the functions i’ve created
function changePolygonHeight(layer, height) {
var datasource = viewer.dataSources.get(layer);
datasource.entities.suspendEvents();
var entities = viewer.dataSources.get(layer).entities.entities
for (var i = 0; i < entities.length; i++) {
var extrudedHeights = source.entities.entities[i]._polygon._extrudedHeight._values;
for (var j = 0; j < extrudedHeights.length; j++) {
var extrudedHeight = source.entities.entities[i]._polygon._extrudedHeight._values[j].data;
extrudedHeight = extrudedHeight * 2;
}
}
datasource.entities.resumeEvents();
}
function changePolygonWidth(layer, width){
var datasource = viewer.dataSources.get(layer);
datasource.entities.suspendEvents();
var entities = viewer.dataSources.get(layer).entities.entities
for (var i = 0; i < entities.length; i++) {
var lat = entities[i].lat;
var long = entities[i].long;
var positions = entities[i]._polygon._positions;
positions.setValue(Cesium.Cartesian3.fromDegreesArray(degreesToFourPoints(lat,long)));
}
}
function changePolygonColor(layer, red, green, blue) {
var datasource = viewer.dataSources.get(layer);
datasource.entities.suspendEvents();
var entities = viewer.dataSources.get(layer).entities.entities
for (var i = 0; i < entities.length; i++) {
entities[i]._polygon._material._color.setValue(Color.fromBytes(red,green,blue,255));
}
}
function degreesToFourPoints(lattitude, longitude) { // generate four points at an equal distance from the center point
var ax,ay,az,bx,by,bz,cx,cy,cz,dx,dy,dz;
ax = longitude+.001;
ay = lattitude+.001;
az = 0.0;
bx = longitude-.001;
by = lattitude+.001;
bz = 0.0;
cx = longitude-.001;
cy = lattitude-.001;
cz = 0.0;
dx = longitude+.001;
dy = lattitude-.001;
dz = 0.0;
var points = [ax,ay,az,bx,by,bz,cx,cy,cz,dx,dy,dz];
return points;
}
``
I forgot to add the resumeEvents() to some of those…