CesiumGS / CesiumGS/cesium

Billboard clipped on right side

Open
#5,154 10 comments 0 reactions 0 assignees View on GitHub
category - billboards type - bug
Dominant language
JavaScript
Stars
15.7k
Forks
3.9k
Avg merge
4d 6h
Merged PRs (30d)
34

Description

In Cesium 1.31

I have a large number (500+) of quite large (200x100pixel) billboards on my map, and this problem only occurs when the number of billboards is large. The billboard image are canvases that I draw with javascript within the application.

For some reason, the billboards are clipped on the right hand side:
screen shot 2017-03-27 at 19 33 00

This can be compared to using the same canvas images as icons in Open Layers:
screen shot 2017-03-27 at 19 43 17

What is really strange, is that I can almost solve the problem if I set the imageSubRegion to be bigger than the canvas itself.

```js
var entity = {
position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1]),
billboard: {
horizontalOrigin : Cesium.HorizontalOrigin.LEFT,
verticalOrigin : Cesium.VerticalOrigin.TOP,
image: ctx,
imageSubRegion: new Cesium.BoundingRectangle(0, 0, ctx.width+2, ctx.height+2),
height: milsymbol.getSize().height,
width: milsymbol.getSize().width,
pixelOffset : new Cesium.Cartesian2(-milsymbol.getAnchor().x, -milsymbol.getAnchor().y)
}
}
```
Now this will be displayed:
screen shot 2017-03-27 at 19 34 51
*Better but not perfect*

If we zoom out a lot, we can also see that some of the missing lines from the right hand side is rendered on the left hand side of some symbols:
screen shot 2017-03-27 at 19 52 39
*Notice the vertical lines that shouldn't be there*

I figured out that Cesium stores the images in some kind of atlas, but I couldn't find where in the code this was done, and what could be the reason for this error. Please let me know if you need more information about this.

Added:
*I tried to revert to Cesium 1.27 to see if #4675 introduced in 1.28 messed anything up, but the result in 1.27 was almost the same as in 1.31.*

Contributor guide

Open the contributing guide

Research direction

Reproduce the report with 500+ large canvas billboards using the shown imageSubRegion, horizontalOrigin, verticalOrigin, and pixelOffset settings in Cesium 1.31. Start by tracing how billboard canvas images enter the image atlas; done means the full right side renders without clipped or duplicated lines, including when zoomed out.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
computer-graphics, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.