1. A concise explanation of the problem you're experiencing.
When I create billboards, after a certain number of billboards the images on the billboard appear black.
A screenshot can be seen here:
2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.
// Clear all billboards
clearPoints() {
for (let i = this.activePoints.length - 1; i >= 0; i--) {
this.viewer.entities.remove(this.activePoints[i])
}
for (let i = this.pipes.length - 1; i >= 0; i--) {
this.viewer.entities.remove(this.pipes[i])
}
for (let i = this.nearbySnapshotPipes.length - 1; i >= 0; i--) {
this.viewer.entities.remove(this.nearbySnapshotPipes[i])
}
for (let i = this.snapshotBillboards.length - 1; i >= 0; i--) {
this.viewer.entities.remove(this.snapshotBillboards[i])
}
}
// Draw a single billboard
drawBillboard(pos, url, ents, id, selected) {
ents.push(
this.viewer.entities.add({
id: id,
position: pos,
billboard: new Cesium.BillboardGraphics({
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(5),
sizeInMeters: true,
image: url,
width: 15,
height: 10,
scale: 0.1,
color: selected ? airscopeColor : Cesium.Color.WHITE
})
})
)
}
// Draw iterate and draw all billboards
drawBillboards() {
this.props.nearbySnapshots.map(s => {
const bookmark = s.get("data").get("bookmark")
if (bookmark) {
const f = new Cesium.PerspectiveFrustum()
f.aspectRatio = bookmark.get("frustum").get("aspectRatio")
f.fov = bookmark.get("frustum").get("fov")
f.near = bookmark.get("frustum").get("near")
f.far = bookmark.get("frustum").get("far")
const bookmarkPos = bookmark.get("position").toJS()
const bookmarkDir = bookmark.get("direction").toJS()
const bookmarkUp = bookmark.get("up").toJS()
const pos = new Cesium.Cartesian3(bookmarkPos.x, bookmarkPos.y, bookmarkPos.z)
const dir = new Cesium.Cartesian3(bookmarkDir.x, bookmarkDir.y, bookmarkDir.z)
const up = new Cesium.Cartesian3(bookmarkUp.x, bookmarkUp.y, bookmarkUp.z)
const cv = f.computeCullingVolume(pos, dir, up)
if (
cv.computeVisibility(new Cesium.BoundingSphere(this.props.nearbySnapshotPoint.toJS(), 0.1)) ===
Cesium.Intersect.INSIDE
) {
this.drawPipe([pos, this.props.nearbySnapshotPoint.toJS()], airscopeColor, 0.01, this.nearbySnapshotPipes)
const screenshotURL = `/download/snapshots/thumbnails/\{s\.get\("filename"\)\}\`
this\.drawBillboard\(
pos,
screenshotURL,
this\.snapshotBillboards,
\`image:/snapshots/view/{s.get("id")}`,
this.props.selectedSnapshotIDs.includes(s.get("id"))
)
}
}
})
}
3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
When clicking on the point in the world, PostGIS finds all nearby images, then populates the world with billboards of the results.
Clicking on a new position removes current billboards and redraws the new ones.
4. The Cesium version you're using, your operating system and browser.
Cesium 1.36
Mac OS Sierra 10.12.2
Firefox 46.0