Hey Matt, I'm sure I'm doing something stupid here, but I can't seem to get the wallpaper to work across different data sources when clicking a button. The first wallpaper instance will load with no problem, but the second one has an empty fill. Note that if I use viewer.entities for both, it works fine. Also note that if I create both entities right after one another, without the button click involved, it also works fine.
Here is a sandcastle example, it's mostly what you already gave me but with 2 buttons added to illustrate the issue. Click the buttons in any order, the first click will work but the second will fail. Perhaps I'm using CustomDataSource incorrectly?
This goes into the HTML/CSS tab:
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="test1"></div>
<div id="test2"></div>
<div id="toolbar"></div>
This goes into the Javascript tab:
//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
});
//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) {
this._scene = scene;
this._image = image;
this._anchor = anchor;
this.definitionChanged = new Cesium.Event();
this.isConstant = true;
};
WallPaperMaterialProperty.prototype.getType = function(time) {
return 'Wallpaper';
};
WallPaperMaterialProperty.prototype.getValue = function(time, result) {
if (!Cesium.defined(result)) {
result = {
image : undefined,
anchor : undefined
};
}
result.image = this._image;
result.anchor = Cesium.SceneTransforms.wgs84ToDrawingBufferCoordinates(this._scene, this._anchor, result.anchor);
if(Cesium.defined(result.anchor)){
result.anchor.x = Math.floor(result.anchor.x);
result.anchor.y = Math.floor(result.anchor.y);
} else {
result.anchor = new Cesium.Cartesian2(0, 0);
}
return result;
};
WallPaperMaterialProperty.prototype.equals = function(other) {
return this === other || //
(other instanceof WallPaperMaterialProperty && //
this._image === other._image);
};
//Here's a working example.
var viewer = new Cesium.Viewer('cesiumContainer');
Sandcastle.addToolbarButton('Test1', function() {
var customDataSource1 = new Cesium.CustomDataSource("testing");
viewer.dataSources.add(customDataSource1);
var customRectangle = customDataSource1.entities.add({
id : "rect1",
rectangle : {
coordinates : Cesium.Rectangle.fromDegrees(-119, 44, -112, 47),
material : new WallPaperMaterialProperty(viewer.scene, "../images/checkerboard.png", Cesium.Cartesian3.fromDegrees(-119, 44)),
outline : true,
outlineColor : Cesium.Color.RED
}
});
}, 'test1');
Sandcastle.addToolbarButton('Test2', function() {
var customRectangle2 = viewer.entities.add({
id : "rect2",
rectangle : {
coordinates : Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),
material : new WallPaperMaterialProperty(viewer.scene, "../images/checkerboard.png", Cesium.Cartesian3.fromDegrees(-110, 20)),
outline : true,
outlineColor : Cesium.Color.RED
}
});
}, 'test2');
viewer.zoomTo(viewer.entities);
