mirror of
https://github.com/OpenSpace/OpenSpace.git
synced 2026-02-26 14:58:51 -06:00
Add D3 javascript visualization of chunk statistics generated by StatsCollector
This commit is contained in:
@@ -43,6 +43,8 @@
|
||||
#define _USE_MATH_DEFINES
|
||||
#include <math.h>
|
||||
|
||||
#include <ctime>
|
||||
|
||||
namespace {
|
||||
const std::string _loggerCat = "ChunkLodGlobe";
|
||||
}
|
||||
@@ -66,6 +68,7 @@ namespace openspace {
|
||||
, maxSplitDepth(22)
|
||||
, _savedCamera(nullptr)
|
||||
, _tileProviderManager(tileProviderManager)
|
||||
, stats(StatsCollector(absPath("test_stats")))
|
||||
{
|
||||
|
||||
auto geometry = std::make_shared<SkirtedGrid>(
|
||||
@@ -84,6 +87,7 @@ namespace openspace {
|
||||
_chunkEvaluatorByDistance = std::make_unique<EvaluateChunkLevelByDistance>();
|
||||
|
||||
_renderer = std::make_unique<ChunkRenderer>(geometry, tileProviderManager);
|
||||
|
||||
}
|
||||
|
||||
ChunkedLodGlobe::~ChunkedLodGlobe() {
|
||||
@@ -146,9 +150,23 @@ namespace openspace {
|
||||
desiredLevel = glm::clamp(desiredLevel, minSplitDepth, maxSplitDepth);
|
||||
return desiredLevel;
|
||||
}
|
||||
|
||||
|
||||
void ChunkedLodGlobe::render(const RenderData& data){
|
||||
|
||||
stats.startNewRecord();
|
||||
|
||||
|
||||
int j2000s = Time::now().unsyncedJ2000Seconds();
|
||||
int lastJ2000s = stats.i.previous("time");
|
||||
if (j2000s == lastJ2000s) {
|
||||
stats.disable();
|
||||
}
|
||||
else {
|
||||
stats.enable();
|
||||
}
|
||||
|
||||
stats.i["time"] = j2000s;
|
||||
|
||||
minDistToCamera = INFINITY;
|
||||
|
||||
_leftRoot->updateChunkTree(data);
|
||||
@@ -162,10 +180,16 @@ namespace openspace {
|
||||
|
||||
// Render function
|
||||
std::function<void(const ChunkNode&)> renderJob = [this, &data, &mvp](const ChunkNode& chunkNode) {
|
||||
stats.i["chunks"]++;
|
||||
const Chunk& chunk = chunkNode.getChunk();
|
||||
if (chunkNode.isLeaf() && chunk.isVisible()) {
|
||||
_renderer->renderChunk(chunkNode.getChunk(), data);
|
||||
debugRenderChunk(chunk, mvp);
|
||||
if (chunkNode.isLeaf()){
|
||||
stats.i["chunks leafs"]++;
|
||||
if (chunk.isVisible()) {
|
||||
stats.i["rendered chunks"]++;
|
||||
double t0 = Time::now().unsyncedJ2000Seconds();
|
||||
_renderer->renderChunk(chunkNode.getChunk(), data);
|
||||
debugRenderChunk(chunk, mvp);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -117,6 +117,7 @@ namespace openspace {
|
||||
bool levelByProjAreaElseDistance = true;
|
||||
} debugOptions;
|
||||
|
||||
StatsCollector stats;
|
||||
|
||||
private:
|
||||
|
||||
@@ -149,8 +150,6 @@ namespace openspace {
|
||||
|
||||
std::shared_ptr<TileProviderManager> _tileProviderManager;
|
||||
|
||||
//std::shared_ptr<StatsTracker<double>> _stats;
|
||||
//StatsTracker<double> stats;
|
||||
};
|
||||
|
||||
} // namespace openspace
|
||||
|
||||
114
monitor/index.html
Normal file
114
monitor/index.html
Normal file
@@ -0,0 +1,114 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="http://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
<svg></svg>
|
||||
</body>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function doVis(){
|
||||
var filename = "../data/scene/debugglobe/test_stats";
|
||||
|
||||
var margin = {top: 20, right: 80, bottom: 30, left: 50},
|
||||
width = 960 - margin.left - margin.right,
|
||||
height = 500 - margin.top - margin.bottom;
|
||||
|
||||
var parseDate = d3.time.format("%Y%m").parse;
|
||||
|
||||
var x = d3.time.scale()
|
||||
.range([0, width]);
|
||||
|
||||
var y = d3.scale.linear()
|
||||
.range([height, 0]);
|
||||
|
||||
var color = d3.scale.category10();
|
||||
|
||||
var xAxis = d3.svg.axis()
|
||||
.scale(x)
|
||||
.orient("bottom");
|
||||
|
||||
var yAxis = d3.svg.axis()
|
||||
.scale(y)
|
||||
.orient("left");
|
||||
|
||||
var line = d3.svg.line()
|
||||
//.interpolate("basis")
|
||||
.x(function(d) { return x(d.time); })
|
||||
.y(function(d) { return y(d.value); });
|
||||
|
||||
d3.select("svg").remove();
|
||||
var svg = d3.select("body").append('svg')
|
||||
.attr("width", width + margin.left + margin.right)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
d3.csv(filename, function(error, data) {
|
||||
if (error) throw error;
|
||||
|
||||
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "time"; }));
|
||||
|
||||
data.forEach(function(d) {
|
||||
d.time = new Date(+d.time);
|
||||
});
|
||||
|
||||
var cities = color.domain().map(function(name) {
|
||||
return {
|
||||
name: name,
|
||||
values: data.map(function(d) {
|
||||
return {time: d.time, value: +d[name]};
|
||||
})
|
||||
};
|
||||
});
|
||||
|
||||
x.domain(d3.extent(data, function(d) { return d.time; }));
|
||||
|
||||
y.domain([
|
||||
d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.value; }); }),
|
||||
d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.value; }); })
|
||||
]);
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + height + ")")
|
||||
.call(xAxis);
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
.call(yAxis)
|
||||
.append("text")
|
||||
.attr("transform", "rotate(-90)")
|
||||
.attr("y", 6)
|
||||
.attr("dy", ".71em")
|
||||
.style("text-anchor", "end")
|
||||
.text("");
|
||||
|
||||
var city = svg.selectAll(".city")
|
||||
.data(cities)
|
||||
.enter().append("g")
|
||||
.attr("class", "city");
|
||||
|
||||
city.append("path")
|
||||
.attr("class", "line")
|
||||
.attr("d", function(d) { return line(d.values); })
|
||||
.style("stroke", function(d) { return color(d.name); });
|
||||
|
||||
city.append("text")
|
||||
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
|
||||
.attr("transform", function(d) { return "translate(" + x(d.value.time) + "," + y(d.value.value) + ")"; })
|
||||
.attr("x", 3)
|
||||
.attr("dy", ".35em")
|
||||
.text(function(d) { return d.name; });
|
||||
});
|
||||
}
|
||||
doVis();
|
||||
//setInterval(doVis, 1000);
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
20
monitor/style.css
Normal file
20
monitor/style.css
Normal file
@@ -0,0 +1,20 @@
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
}
|
||||
|
||||
.axis path,
|
||||
.axis line {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.x.axis path {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.line {
|
||||
fill: none;
|
||||
stroke: steelblue;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
Reference in New Issue
Block a user