We are displaying a graphic object using a fill material comprised of a pattern from a .svg file. At whole world the display is correct. However if you zoom in enough, the fill is no longer displayed. On a 2d map, the fill is always displayed. Can you point me to the reason for this and/or a solution? The geometric object points are all at the same altitude.
Regards,
Lori
Hello Lori,
Do you have some sample code you can share that recreates the problem? I’m not sure what would be causing this issue.
Thanks!
Hannah
Its based upon sample code provided on this forum.
Here is a Sandcastle example that illustrates the issue ( Thanks Diana! ):
This
goes into the HTML/CSS tab:
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);
Let me know if you need anything else.
Thanks,
Lori
There was some extra code that I have cleaned up. Click on Test1 to display the graphic.
This
goes into the HTML/CSS tab:
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’);
viewer.zoomTo(viewer.entities);
Lori
Thanks Lori, this seems to be a clear cut bug and I’ve submitted the issue here: https://github.com/AnalyticalGraphicsInc/cesium/issues/2946 It happens with all polygon materials. It may be specific to large polygons, but I’m not sure. This may already be fixed in Dan’s polygons on terrain branch, but I’m not sure. I’ll follow up with him and see what he thinks, so just keep an eye on that issue. Thanks again.