Cesium Sandcastle Polygon Materials

[Tester]

Hello,

I'm very new to Cesium development.  I'm trying to understand Materials in regards to Polygons.  I see there is the default type of assigning color.  But I would like to change the look of polygons using the code syntax in the polygon demo.  To help with debugging I erased all other polygons and created my own.  What I would like is to customize the look of a polygon.  I know there is a tutorial on this but I was hoping to customize the stripe effect without the use of buttons first.  Also, the tutorial that does the striping effect seems to just do default values if I am not mistaken.  My example below is after looking at the API for Material and the fabric wiki.  Can anyone help me understand why this only produces a polygon that is white and not the desired effect of blue and yellow stripes?  Thank you so much for any help.

My current code looks like such:

var viewer = new Cesium.Viewer('cesiumContainer');

var blankPolygon = new Cesium.Polygon();

var stripe = new Cesium.Material({

      fabric : {

            type : 'Stripe',

            uniforms : {

            horizontal : true,

            evenColor : Cesium.Color.YELLOW,

            oddColor : Cesium.Color.BLUE,

            offset : 0.0,

            number : 30

            }

      }

});

blankPolygon = viewer.entities.add({

      name : 'Testable polygon',

      polygon : {

             hierarchy : Cesium.Cartesian3.fromDegreesArray([-119.0, 40.0,

                                                                                              -110.0, 44.0,

                                                                                              -107.0, 55.0,

                                                                                              -119.0, 55.0]),

             fabric : stripe

      }

});

viewer.zoomTo(viewer.entitites);

[DB]

Hello, I think the first problem here might be the fact that you're using a property called "fabric" in the polygon, but I think you might be looking for the "material" property instead? 

[Matthew Amato]

If you haven't already, I would recommend checking out the Visualizing Spatial Data tutorial, which should give you a good overview of everything.  To answer your exact question, you want to use the StripeMaterialProperty and then assign that to the material property of the entity polygon.

Here's the working version:

var viewer = new Cesium.Viewer('cesiumContainer');

var stripe = new Cesium.StripeMaterialProperty({

    orientation : Cesium.StripeOrientation.HORIZONTAL,

    evenColor : Cesium.Color.YELLOW,

    oddColor : Cesium.Color.BLUE,

    offset : 0.0,

    repeat : 30

});

var polygon = viewer.entities.add({

    name : 'Testable polygon',

    polygon : {

        hierarchy : Cesium.Cartesian3.fromDegreesArray([-119.0, 40.0,

                                                        -110.0, 44.0,

                                                        -107.0, 55.0,

                                                        -119.0, 55.0]),

        material : stripe

    }

});

viewer.zoomTo(viewer.entities);

--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Tester]

No, that actually causes even more trouble.  If I use material in the place of fabric in the polygon, I receive the error, "Uncaught DeveloperError: Unable to infer material type: [object Object]."  I've tried several different combinations of that.  I'm beginning to wonder if doing it in this way isn't possible.

[Tester]

Oh, thank you Matthew.  I will look at that immediately!

[Tester]

Hey, just wanted to say thank you for your previous post.  I read up on the tutorial you also gave me.  But it seems I've found a couple issues.  First, if I want to have even and odd colors with one of the colors being either clear or translucent, it doesn't seem possible to specify the alpha values on the even/odd color.  I tried creating a new color, using var tblue = Cesium.Color.BLUE.withAlpha(0.5);

Then writing in your code, oddColor : tblue.  However, it still appears as solid blue.  Is this a limitation? 

Also, if you wanted to create stripes in a diagonal manner, how would you go about this? I see two orientations vertical and horizontal. Does the textureRotationAngle property have anything to do with achieving this?  So far I don't see any change when I add this property and set the value.

On Thursday, April 23, 2015 at 9:33:50 AM UTC-5, Matthew Amato wrote:

[Tester]

I have solved the transparency issue.  It seems the code takes values for transparency on even from 1 to 0 and odd below 0.  A little strange but I solved this.

However, I'm still looking at the orientation of the stripes.  It seems the code takes 1 as Vertical and 0 as Horizontal.  Is there another way to slant the stripes?