Is it possible to change the length of an existing cylinder?

[m...@pyralis.com]

Removing and adding a new one causes too much flicker.

[Patrick Cozzi]

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

[David Taylor]

any update on this?

[Patrick Cozzi]

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

--
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.

--

twitter.com/pjcozzi

[David Taylor]

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)

[David Taylor]

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);

[Patrick Cozzi]

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

[David]

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.

[David Taylor]

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.

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.

--

twitter.com/pjcozzi

--
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.

[David Taylor]

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?

[Patrick Cozzi]

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

[David Taylor]

here is a sandcastle code example that has 2 problems

1. 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)

2. 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;

    

});

[David Taylor]

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;

}

[David Taylor]

I forgot to add the resumeEvents() to some of those...