emackey/1MPointPrimitives.html

## 1MPointPrimitives.html
<!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>
	<!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>