# Using wallpaper material with primitive collection?

**URL:** <https://community.cesium.com/t/using-wallpaper-material-with-primitive-collection/2657>\
**Category:** CesiumJS\
**Created:** [June 18, 2015, 8:18pm UTC](https://community.cesium.com/t/using-wallpaper-material-with-primitive-collection/2657 "2015-06-18T20:18:16Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![gonen\_jerbi](https://avatars.discourse-cdn.com/v4/letter/g/919ad9/32.png) [@gonen\_jerbi](https://community.cesium.com/u/gonen_jerbi)\
**Post date:** [June 18, 2015, 8:18pm UTC](https://community.cesium.com/t/using-wallpaper-material-with-primitive-collection/2657/1 "2015-06-18T20:18:16Z")

</div>

Hi,  
can someone explain me why this code doesn't works with primitive collection under scene but works just fine with viewer.entities?

//Call this once at application startup  
Cesium.Material.\_materialCache.addMaterial('Wallpaper', {  
&nbsp;&nbsp;&nbsp;&nbsp;fabric : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type : 'Wallpaper',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uniforms : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image : Cesium.Material.DefaultImageId,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;anchor : new Cesium.Cartesian2(0, 0)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;components : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;diffuse : 'texture2D(image, fract((gl\_FragCoord.xy - anchor.xy) / vec2(imageDimensions.xy))).rgb',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alpha : 'texture2D(image, fract((gl\_FragCoord.xy - anchor.xy) / vec2(imageDimensions.xy))).a'  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;},  
&nbsp;&nbsp;&nbsp;&nbsp;translucent : false  
});

//Create an instance and assign to anything that has a material property.  
//scene - the scene  
//image - the image (I think both a url or Image object are supported)  
//anchor - A Cartesian3 that is the most southern and westard point of the geometry  
var WallPaperMaterialProperty = function(scene, image, anchor) {  
&nbsp;&nbsp;&nbsp;&nbsp;this.\_scene = scene;  
&nbsp;&nbsp;&nbsp;&nbsp;this.\_image = image;  
&nbsp;&nbsp;&nbsp;&nbsp;this.\_anchor = anchor;  
&nbsp;&nbsp;&nbsp;&nbsp;this.definitionChanged = new Cesium.Event();  
&nbsp;&nbsp;&nbsp;&nbsp;this.isConstant = true;  
};

WallPaperMaterialProperty.prototype.getType = function(time) {  
&nbsp;&nbsp;&nbsp;&nbsp;return 'Wallpaper';  
};

WallPaperMaterialProperty.prototype.getValue = function(time, result) {  
&nbsp;&nbsp;&nbsp;&nbsp;if (!Cesium.defined(result)) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result = {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;image : undefined,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;anchor : undefined  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};  
&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;result.image = this.\_image;  
&nbsp;&nbsp;&nbsp;&nbsp;result.anchor = Cesium.SceneTransforms.wgs84ToDrawingBufferCoordinates(this.\_scene, this.\_anchor, result.anchor);  
&nbsp;&nbsp;&nbsp;&nbsp;if(Cesium.defined(result.anchor)){  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result.anchor.x = Math.floor(result.anchor.x);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result.anchor.y = Math.floor(result.anchor.y);  
&nbsp;&nbsp;&nbsp;&nbsp;} else {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result.anchor = new Cesium.Cartesian2(0, 0);  
&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;return result;  
};

WallPaperMaterialProperty.prototype.equals = function(other) {  
&nbsp;&nbsp;&nbsp;&nbsp;return this === other || //  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(other instanceof WallPaperMaterialProperty && //  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.\_image === other.\_image);  
};

//Here's a working example.  
var viewer = new Cesium.Viewer('cesiumContainer');

viewer.entities.add({  
&nbsp;&nbsp;&nbsp;&nbsp;polygon : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-115.0, 32.0,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-107.0, 33.0,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-102.0, 31.0,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-102.0, 35.0]),  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;material : new WallPaperMaterialProperty(viewer.scene, '../images/checkerboard.png', Cesium.Cartesian3.fromDegrees(-115.0, 31))  
&nbsp;&nbsp;&nbsp;&nbsp;}  
});

viewer.zoomTo(viewer.entities);

---

<div class="post-metadata">

**Author:** ![Michael\_Lodge-Paoli1](https://avatars.discourse-cdn.com/v4/letter/m/e47774/32.png) [@Michael\_Lodge-Paoli1](https://community.cesium.com/u/Michael_Lodge-Paoli1)\
**Post date:** [June 21, 2015, 6:59pm UTC](https://community.cesium.com/t/using-wallpaper-material-with-primitive-collection/2657/2 "2015-06-21T18:59:02Z")

</div>

can you post a sample of how you’re generating your primitive

---

<div class="post-metadata">

**Author:** ![gonen\_jerbi](https://avatars.discourse-cdn.com/v4/letter/g/919ad9/32.png) [@gonen\_jerbi](https://community.cesium.com/u/gonen_jerbi)\
**Post date:** [June 21, 2015, 7:22pm UTC](https://community.cesium.com/t/using-wallpaper-material-with-primitive-collection/2657/3 "2015-06-21T19:22:41Z")

</div>

Sure,  
I don't remember the syntax but I am just adding it to scene.primitives.add.

---

<div class="post-metadata">

**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\
**Post date:** [June 22, 2015, 2:05pm UTC](https://community.cesium.com/t/using-wallpaper-material-with-primitive-collection/2657/4 "2015-06-22T14:05:01Z")

</div>

The WallPaperMaterialProperty object is specific to the Entity API, so to use it with the underlying primitive system requires a slightly different approach. The actual material is the same, but you need to manually update the anchor position each frame in order to maintain the desired effect. Here’s a complete example that works with the Primitive API.

//Call this once at application startup

Cesium.Material.\_materialCache.addMaterial(‘Wallpaper’, {

```
fabric : {

    type : 'Wallpaper',

    uniforms : {

        image : Cesium.Material.DefaultImageId,

        anchor : new Cesium.Cartesian2(0, 0)

    },

    components : {

        diffuse : 'texture2D(image, fract((gl_FragCoord.xy - anchor.xy) / vec2(imageDimensions.xy))).rgb',

        alpha : 'texture2D(image, fract((gl_FragCoord.xy - anchor.xy) / vec2(imageDimensions.xy))).a'

    }

},

translucent : false

```

});

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var scene = viewer.scene;

//Create the material and assign the image

var material = Cesium.Material.fromType(‘Wallpaper’);

var uniforms = material.uniforms;

uniforms.image = ‘…/images/checkerboard.png’;

//Create a geometry with the material

scene.primitives.add(new Cesium.Primitive({

```
geometryInstances : new Cesium.GeometryInstance({

    geometry : new Cesium.RectangleGeometry({

        rectangle : Cesium.Rectangle.fromDegrees(-120.0, 30.0, -110.0, 40.0),

        vertexFormat : Cesium.MaterialAppearance.MaterialSupport.TEXTURED.vertexFormat

    })

}),

appearance : new Cesium.MaterialAppearance({

    material : material,

    materialSupport : Cesium.MaterialAppearance.MaterialSupport.TEXTURED

})

```

}));

scene.preRender.addEventListener(function(){

```
//Each frame, the material's anchor needs to be updated with the

//screen space position of the anchor point.

var anchor = Cesium.Cartesian3.fromDegrees(-115.0, 35.0);

var result = Cesium.SceneTransforms.wgs84ToDrawingBufferCoordinates(scene, anchor, uniforms.anchor);

if(!Cesium.defined(result)){

    Cesium.Cartesian2.ZERO.clone(uniforms.anchor);

}

```

});

---

<div class="post-metadata">

**Author:** ![gonen\_jerbi](https://avatars.discourse-cdn.com/v4/letter/g/919ad9/32.png) [@gonen\_jerbi](https://community.cesium.com/u/gonen_jerbi)\
**Post date:** [June 23, 2015, 9:01am UTC](https://community.cesium.com/t/using-wallpaper-material-with-primitive-collection/2657/5 "2015-06-23T09:01:24Z")

</div>

First of all - thanks a lot.

Another question - as i'm not familiar with custom materials I find it difficult to add the following:  
Is there a way that when the map moves horizontally - the material won't move?

For instance - In case I have the following material(arrows material):  
^  
^  
^  
^  
^

I don't want to be able to move it on the x axis but to move it on the y axis only.  
Even more - I want the zoom to affect the way the material looks which means - as the zoom is closer you shall see more arrows(which happens with the current wallpaper material version).

Thanks a lot.

---

<div class="post-metadata">

**Author:** ![dotansimha](https://avatars.discourse-cdn.com/v4/letter/d/d2c977/32.png) [@dotansimha](https://community.cesium.com/u/dotansimha)\
**Post date:** [June 23, 2015, 4:30pm UTC](https://community.cesium.com/t/using-wallpaper-material-with-primitive-collection/2657/6 "2015-06-23T16:30:12Z")

</div>

I have the same need... is it possible? (Just like Billboard does not change it's size when zooming...)

Thanks

---

<div class="post-metadata">

**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\
**Post date:** [June 29, 2015, 8:40pm UTC](https://community.cesium.com/t/using-wallpaper-material-with-primitive-collection/2657/7 "2015-06-29T20:40:36Z")

</div>

gonengar, what you want is trival, just take my example and change

if(!Cesium.defined(result)){

Cesium.Cartesian2.ZERO.clone(uniforms.anchor);

}

to

if(!Cesium.defined(result)){

Cesium.Cartesian2.ZERO.clone(uniforms.anchor);

} else{

result.y = 0;

}

And it will behave as you describe.

---

<div class="post-metadata">

**Author:** ![gonen\_jerbi](https://avatars.discourse-cdn.com/v4/letter/g/919ad9/32.png) [@gonen\_jerbi](https://community.cesium.com/u/gonen_jerbi)\
**Post date:** [July 6, 2015, 8:56pm UTC](https://community.cesium.com/t/using-wallpaper-material-with-primitive-collection/2657/8 "2015-07-06T20:56:30Z")

</div>

Thanks.  
Is there a way to rotate the material too?

---

<div class="post-metadata">

**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\
**Post date:** [July 7, 2015, 1:45am UTC](https://community.cesium.com/t/using-wallpaper-material-with-primitive-collection/2657/9 "2015-07-07T01:45:12Z")

</div>

I’m not sure how easy/hard it would be to add rotation in at the shader label, but depending on why type of shape you are using the material with, you can set the stRotation property. I believe Ellipse/Polygon/Rectangle all of it.

---

<div class="post-metadata">

**Author:** ![gonen\_jerbi](https://avatars.discourse-cdn.com/v4/letter/g/919ad9/32.png) [@gonen\_jerbi](https://community.cesium.com/u/gonen_jerbi)\
**Post date:** [July 7, 2015, 5:30am UTC](https://community.cesium.com/t/using-wallpaper-material-with-primitive-collection/2657/10 "2015-07-07T05:30:22Z")

</div>

Am I doing something wrong?  
I have added stRotation but it doesnt seem to rotate:  
scene.primitives.add(new Cesium.Primitive({  
&nbsp;&nbsp;&nbsp;&nbsp;geometryInstances : new Cesium.GeometryInstance({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;geometry : new Cesium.RectangleGeometry({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rectangle : Cesium.Rectangle.fromDegrees(-120.0, 30.0, -110.0, 40.0),  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vertexFormat : Cesium.MaterialAppearance.MaterialSupport.TEXTURED.vertexFormat,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stRotation: Math.PI/8  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})  
&nbsp;&nbsp;&nbsp;&nbsp;}),  
&nbsp;&nbsp;&nbsp;&nbsp;appearance : new Cesium.MaterialAppearance({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;material : material,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;materialSupport : Cesium.MaterialAppearance.MaterialSupport.TEXTURED  
&nbsp;&nbsp;&nbsp;&nbsp;})  
}));