Skip to content

Instantly share code, notes, and snippets.

@emackey
Created April 14, 2015 15:42
Show Gist options
  • Save emackey/79c78149b812a1918273 to your computer and use it in GitHub Desktop.
Save emackey/79c78149b812a1918273 to your computer and use it in GitHub Desktop.
One million PointPrimitives in Cesium.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!-- Use Chrome Frame in IE -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="description" content="Use Viewer to start building new applications or easily embed Cesium into existing applications.">
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases">
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.9/require.js"></script>
<script type="text/javascript">
require.config({
baseUrl : '../../../Source',
waitSeconds : 60
});
</script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
// One million pointPrimitives in Cesium
var canvas = document.createElement('canvas');
canvas.className = "fullSize";
document.getElementById('cesiumContainer').appendChild(canvas);
var scene = new Cesium.Scene({
canvas : canvas,
mapProjection : new Cesium.GeographicProjection(new Cesium.Ellipsoid(1,1,1))
});
scene.screenSpaceCameraController.minimumTrackBallHeight = 1;
var points = scene.primitives.add(new Cesium.PointPrimitiveCollection());
//var imageSubRegion = new Cesium.BoundingRectangle(82, 10, 8, 8);
var scaleByDistance = new Cesium.NearFarScalar(1, 4.0, 2000, 1);
var groupNum = 0;
var maxGroups = 5;
var oneOverMaxGroups = 1 / maxGroups;
var totalPoints = 0;
function animate() {
if (groupNum < maxGroups) {
var color = new Cesium.Color(
groupNum * oneOverMaxGroups,
1.0 - groupNum * 0.5 * oneOverMaxGroups,
1.0 - groupNum * oneOverMaxGroups, 1.0);
for (var j = 0; j < 200000; ++j) {
points.add({
//image : '../images/whiteShapes.png',
//imageSubRegion : imageSubRegion,
pixelSize : 2,
scaleByDistance : scaleByDistance,
color : color,
position : new Cesium.Cartesian3(
400 * Math.random() - 200,
800 * Math.random() - 400,
200 * (groupNum - (maxGroups * 0.5) + Math.random()))
});
++totalPoints;
}
++groupNum;
console.log('Added group ' + groupNum + ' Total points: ' +
totalPoints.toLocaleString());
}
}
function tick() {
scene.initializeFrame();
animate();
scene.render();
Cesium.requestAnimationFrame(tick);
}
tick();
// Prevent right-click from opening a context menu.
canvas.oncontextmenu = function () {
return false;
};
// Resize handler
var onResize = function () {
var width = canvas.clientWidth;
var height = canvas.clientHeight;
if (canvas.width === width && canvas.height === height) {
return;
}
canvas.width = width;
canvas.height = height;
scene.camera.frustum.aspectRatio = width / height;
};
window.addEventListener('resize', onResize, false);
onResize();
window.scene = scene;
window.Cesium = Cesium;
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
startup(Cesium);
} else if (typeof require === "function") {
require(["Cesium"], startup);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment