mramato/GeometryPerformance.html

## GeometryPerformance.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, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="description"
    content="Construct and apply materials to rectangular and custom sensors.">
<meta name="cesium-sandcastle-labels" content="Showcases, STK Cesium">
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script type="text/javascript">
    var dojoConfig = {
        baseUrl : '../../../Source',
        packages : [{
            name : 'dojo',
            location : '../ThirdParty/dojo-release-1.9.1/dojo'
        }, {
            name : 'dijit',
            location : '../ThirdParty/dojo-release-1.9.1/dijit'
        }]
    };
</script>
<script data-dojo-config="async: 1, tlmSiblingOfDojo: 0"
    src="../../../ThirdParty/dojo-release-1.9.1/dojo/dojo.js"></script>
<link rel="stylesheet"
    href="../../../ThirdParty/dojo-release-1.9.1/dijit/themes/claro/claro.css"
    type="text/css">
</head>
<body class="claro sandcastle-loading"
    data-sandcastle-bucket="bucket-dojo.html"
    data-sandcastle-title="Cesium + Dojo">
    <style>
@import url(../templates/bucket.css);

.sandcastle-loading #toolbar {
    display: none;
}
</style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay">
        <h1>Loading...</h1>
    </div>
    <div id="toolbar"></div>
    <script id="cesium_sandcastle_script">
require(['Cesium', 'dijit/form/DropDownButton', 'dijit/DropDownMenu', 'dijit/MenuItem', 'dijit/form/HorizontalSlider', 'dijit/TitlePane'], function(Cesium, DropDownButton, DropDownMenu, MenuItem, HorizontalSlider, TitlePane) {
    "use strict";

    var viewer = new Cesium.Viewer('cesiumContainer');
    var scene = viewer.scene;

    var instances = [];
    var outlineInstances = [];

    Cesium.Math.setRandomNumberSeed(0);

    var granularity = 1;
    var i = 0;
    for (var lon = -180.0; lon < 180.0; lon += granularity) {
        for (var lat = -90.0; lat < 90.0; lat += granularity) {
            i++;

            var rectangle = Cesium.Rectangle.fromDegrees(lon, lat, lon + granularity, lat + granularity);
            var extrudedHeight = 100000 + (Cesium.Math.nextRandomNumber() * 1000000);
            var color = Cesium.Color.fromRandom({
                alpha : 0.5
            });

            instances.push(new Cesium.GeometryInstance({
                geometry : new Cesium.RectangleGeometry({
                    rectangle : rectangle,
                    extrudedHeight: extrudedHeight
                }),
                attributes : {
                    color : Cesium.ColorGeometryInstanceAttribute.fromColor(color)
                }
            }));

            color.alpha = 1.0;
            outlineInstances.push(new Cesium.GeometryInstance({
                geometry : new Cesium.RectangleOutlineGeometry({
                    rectangle : rectangle,
                    extrudedHeight: extrudedHeight
                }),
                attributes : {
                    color : Cesium.ColorGeometryInstanceAttribute.fromColor(color)
                }
            }));
        }
    }

    var primitive;
    var primitive2;
    var start = performance.now();
    var done = false;

    viewer.clock.onTick.addEventListener(function() {
        if (!done
            && (Cesium.defined(primitive) && primitive._state === Cesium.PrimitiveState.COMPLETE)
            && (Cesium.defined(primitive2) && primitive2._state === Cesium.PrimitiveState.COMPLETE)) {
            console.log("Created " + i + " rectangles in " + ((performance.now() - start) / 1000.0).toFixed(3) + " seconds");
            done = true;
        }
    });

    function generateRectangles(asynchronous) {
        start = performance.now();
        if (Cesium.defined(primitive)) {
            done = false;
            scene.primitives.remove(primitive);
            scene.primitives.remove(primitive2);
        }

        primitive = new Cesium.Primitive({
            geometryInstances : instances,
            appearance : new Cesium.PerInstanceColorAppearance({
                translucent : true
            }),
            asynchronous : asynchronous
        });

        scene.primitives.add(primitive);

        primitive2 = new Cesium.Primitive({
            geometryInstances : outlineInstances,
            appearance : new Cesium.PerInstanceColorAppearance({
                flat : true,
                translucent : false
            }),
            asynchronous : asynchronous
        });

        scene.primitives.add(primitive2);
    }

    Sandcastle.addToolbarButton('Synchronous', function() {
            generateRectangles(false);
        });

    Sandcastle.addToolbarButton('Asynchronous', function() {
        generateRectangles(true);
    });

    Sandcastle.finishedLoading();
});
</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, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta name="description"
	content="Construct and apply materials to rectangular and custom sensors.">
	<meta name="cesium-sandcastle-labels" content="Showcases, STK Cesium">
	<title>Cesium Demo</title>
	<script type="text/javascript" src="../Sandcastle-header.js"></script>
	<script type="text/javascript">
	var dojoConfig = {
	baseUrl : '../../../Source',
	packages : [{
	name : 'dojo',
	location : '../ThirdParty/dojo-release-1.9.1/dojo'
	}, {
	name : 'dijit',
	location : '../ThirdParty/dojo-release-1.9.1/dijit'
	}]
	};
	</script>
	<script data-dojo-config="async: 1, tlmSiblingOfDojo: 0"
	src="../../../ThirdParty/dojo-release-1.9.1/dojo/dojo.js"></script>
	<link rel="stylesheet"
	href="../../../ThirdParty/dojo-release-1.9.1/dijit/themes/claro/claro.css"
	type="text/css">
	</head>
	<body class="claro sandcastle-loading"
	data-sandcastle-bucket="bucket-dojo.html"
	data-sandcastle-title="Cesium + Dojo">
	<style>
	@import url(../templates/bucket.css);

	.sandcastle-loading #toolbar {
	display: none;
	}
	</style>
	<div id="cesiumContainer" class="fullSize"></div>
	<div id="loadingOverlay">
	<h1>Loading...</h1>
	</div>
	<div id="toolbar"></div>
	<script id="cesium_sandcastle_script">
	require(['Cesium', 'dijit/form/DropDownButton', 'dijit/DropDownMenu', 'dijit/MenuItem', 'dijit/form/HorizontalSlider', 'dijit/TitlePane'], function(Cesium, DropDownButton, DropDownMenu, MenuItem, HorizontalSlider, TitlePane) {
	"use strict";

	var viewer = new Cesium.Viewer('cesiumContainer');
	var scene = viewer.scene;

	var instances = [];
	var outlineInstances = [];

	Cesium.Math.setRandomNumberSeed(0);

	var granularity = 1;
	var i = 0;
	for (var lon = -180.0; lon < 180.0; lon += granularity) {
	for (var lat = -90.0; lat < 90.0; lat += granularity) {
	i++;

	var rectangle = Cesium.Rectangle.fromDegrees(lon, lat, lon + granularity, lat + granularity);
	var extrudedHeight = 100000 + (Cesium.Math.nextRandomNumber() * 1000000);
	var color = Cesium.Color.fromRandom({
	alpha : 0.5
	});

	instances.push(new Cesium.GeometryInstance({
	geometry : new Cesium.RectangleGeometry({
	rectangle : rectangle,
	extrudedHeight: extrudedHeight
	}),
	attributes : {
	color : Cesium.ColorGeometryInstanceAttribute.fromColor(color)
	}
	}));

	color.alpha = 1.0;
	outlineInstances.push(new Cesium.GeometryInstance({
	geometry : new Cesium.RectangleOutlineGeometry({
	rectangle : rectangle,
	extrudedHeight: extrudedHeight
	}),
	attributes : {
	color : Cesium.ColorGeometryInstanceAttribute.fromColor(color)
	}
	}));
	}
	}

	var primitive;
	var primitive2;
	var start = performance.now();
	var done = false;

	viewer.clock.onTick.addEventListener(function() {
	if (!done
	&& (Cesium.defined(primitive) && primitive._state === Cesium.PrimitiveState.COMPLETE)
	&& (Cesium.defined(primitive2) && primitive2._state === Cesium.PrimitiveState.COMPLETE)) {
	console.log("Created " + i + " rectangles in " + ((performance.now() - start) / 1000.0).toFixed(3) + " seconds");
	done = true;
	}
	});

	function generateRectangles(asynchronous) {
	start = performance.now();
	if (Cesium.defined(primitive)) {
	done = false;
	scene.primitives.remove(primitive);
	scene.primitives.remove(primitive2);
	}

	primitive = new Cesium.Primitive({
	geometryInstances : instances,
	appearance : new Cesium.PerInstanceColorAppearance({
	translucent : true
	}),
	asynchronous : asynchronous
	});

	scene.primitives.add(primitive);

	primitive2 = new Cesium.Primitive({
	geometryInstances : outlineInstances,
	appearance : new Cesium.PerInstanceColorAppearance({
	flat : true,
	translucent : false
	}),
	asynchronous : asynchronous
	});

	scene.primitives.add(primitive2);
	}

	Sandcastle.addToolbarButton('Synchronous', function() {
	generateRectangles(false);
	});

	Sandcastle.addToolbarButton('Asynchronous', function() {
	generateRectangles(true);
	});

	Sandcastle.finishedLoading();
	});
	</script>
	</body>
	</html>