import Check from "../../Core/Check.js";
|
import defaultValue from "../../Core/defaultValue.js";
|
import defined from "../../Core/defined.js";
|
import destroyObject from "../../Core/destroyObject.js";
|
import knockout from "../../ThirdParty/knockout.js";
|
import getElement from "../getElement.js";
|
import InspectorShared from "../InspectorShared.js";
|
import Cesium3DTilesInspectorViewModel from "./Cesium3DTilesInspectorViewModel.js";
|
|
/**
|
* Inspector widget to aid in debugging 3D Tiles
|
*
|
* @alias Cesium3DTilesInspector
|
* @constructor
|
*
|
* @param {Element|String} container The DOM element or ID that will contain the widget.
|
* @param {Scene} scene the Scene instance to use.
|
*/
|
function Cesium3DTilesInspector(container, scene) {
|
//>>includeStart('debug', pragmas.debug);
|
Check.defined("container", container);
|
Check.typeOf.object("scene", scene);
|
//>>includeEnd('debug');
|
|
container = getElement(container);
|
var element = document.createElement("div");
|
var performanceContainer = document.createElement("div");
|
performanceContainer.setAttribute("data-bind", "visible: performance");
|
var viewModel = new Cesium3DTilesInspectorViewModel(
|
scene,
|
performanceContainer
|
);
|
|
this._viewModel = viewModel;
|
this._container = container;
|
this._element = element;
|
|
var text = document.createElement("div");
|
text.textContent = "3D Tiles Inspector";
|
text.className = "cesium-cesiumInspector-button";
|
text.setAttribute("data-bind", "click: toggleInspector");
|
element.appendChild(text);
|
element.className = "cesium-cesiumInspector cesium-3DTilesInspector";
|
element.setAttribute(
|
"data-bind",
|
'css: { "cesium-cesiumInspector-visible" : inspectorVisible, "cesium-cesiumInspector-hidden" : !inspectorVisible}'
|
);
|
container.appendChild(element);
|
|
var panel = document.createElement("div");
|
this._panel = panel;
|
panel.className = "cesium-cesiumInspector-dropDown";
|
element.appendChild(panel);
|
|
var createSection = InspectorShared.createSection;
|
var createCheckbox = InspectorShared.createCheckbox;
|
|
var tilesetPanelContents = createSection(
|
panel,
|
"Tileset",
|
"tilesetVisible",
|
"toggleTileset"
|
);
|
var displayPanelContents = createSection(
|
panel,
|
"Display",
|
"displayVisible",
|
"toggleDisplay"
|
);
|
var updatePanelContents = createSection(
|
panel,
|
"Update",
|
"updateVisible",
|
"toggleUpdate"
|
);
|
var loggingPanelContents = createSection(
|
panel,
|
"Logging",
|
"loggingVisible",
|
"toggleLogging"
|
);
|
var tileDebugLabelsPanelContents = createSection(
|
panel,
|
"Tile Debug Labels",
|
"tileDebugLabelsVisible",
|
"toggleTileDebugLabels"
|
);
|
var stylePanelContents = createSection(
|
panel,
|
"Style",
|
"styleVisible",
|
"toggleStyle"
|
);
|
var optimizationPanelContents = createSection(
|
panel,
|
"Optimization",
|
"optimizationVisible",
|
"toggleOptimization"
|
);
|
|
var properties = document.createElement("div");
|
properties.className = "field-group";
|
var propertiesLabel = document.createElement("label");
|
propertiesLabel.className = "field-label";
|
propertiesLabel.appendChild(document.createTextNode("Properties: "));
|
var propertiesField = document.createElement("div");
|
propertiesField.setAttribute("data-bind", "text: properties");
|
properties.appendChild(propertiesLabel);
|
properties.appendChild(propertiesField);
|
tilesetPanelContents.appendChild(properties);
|
tilesetPanelContents.appendChild(
|
makeButton("togglePickTileset", "Pick Tileset", "pickActive")
|
);
|
tilesetPanelContents.appendChild(
|
makeButton("trimTilesCache", "Trim Tiles Cache")
|
);
|
tilesetPanelContents.appendChild(createCheckbox("Enable Picking", "picking"));
|
|
displayPanelContents.appendChild(createCheckbox("Colorize", "colorize"));
|
displayPanelContents.appendChild(createCheckbox("Wireframe", "wireframe"));
|
displayPanelContents.appendChild(
|
createCheckbox("Bounding Volumes", "showBoundingVolumes")
|
);
|
displayPanelContents.appendChild(
|
createCheckbox("Content Volumes", "showContentBoundingVolumes")
|
);
|
displayPanelContents.appendChild(
|
createCheckbox("Request Volumes", "showRequestVolumes")
|
);
|
|
displayPanelContents.appendChild(
|
createCheckbox("Point Cloud Shading", "pointCloudShading")
|
);
|
var pointCloudShadingContainer = document.createElement("div");
|
pointCloudShadingContainer.setAttribute(
|
"data-bind",
|
"visible: pointCloudShading"
|
);
|
pointCloudShadingContainer.appendChild(
|
makeRangeInput("geometricErrorScale", 0, 2, 0.01, "Geometric Error Scale")
|
);
|
pointCloudShadingContainer.appendChild(
|
makeRangeInput("maximumAttenuation", 0, 32, 1, "Maximum Attenuation")
|
);
|
pointCloudShadingContainer.appendChild(
|
makeRangeInput("baseResolution", 0, 1, 0.01, "Base Resolution")
|
);
|
pointCloudShadingContainer.appendChild(
|
createCheckbox("Eye Dome Lighting (EDL)", "eyeDomeLighting")
|
);
|
displayPanelContents.appendChild(pointCloudShadingContainer);
|
|
var edlContainer = document.createElement("div");
|
edlContainer.setAttribute("data-bind", "visible: eyeDomeLighting");
|
edlContainer.appendChild(
|
makeRangeInput("eyeDomeLightingStrength", 0, 2.0, 0.1, "EDL Strength")
|
);
|
edlContainer.appendChild(
|
makeRangeInput("eyeDomeLightingRadius", 0, 4.0, 0.1, "EDL Radius")
|
);
|
pointCloudShadingContainer.appendChild(edlContainer);
|
|
updatePanelContents.appendChild(
|
createCheckbox("Freeze Frame", "freezeFrame")
|
);
|
updatePanelContents.appendChild(
|
createCheckbox("Dynamic Screen Space Error", "dynamicScreenSpaceError")
|
);
|
var sseContainer = document.createElement("div");
|
sseContainer.appendChild(
|
makeRangeInput(
|
"maximumScreenSpaceError",
|
0,
|
128,
|
1,
|
"Maximum Screen Space Error"
|
)
|
);
|
updatePanelContents.appendChild(sseContainer);
|
var dynamicScreenSpaceErrorContainer = document.createElement("div");
|
dynamicScreenSpaceErrorContainer.setAttribute(
|
"data-bind",
|
"visible: dynamicScreenSpaceError"
|
);
|
dynamicScreenSpaceErrorContainer.appendChild(
|
makeRangeInput(
|
"dynamicScreenSpaceErrorDensitySliderValue",
|
0,
|
1,
|
0.005,
|
"Screen Space Error Density",
|
"dynamicScreenSpaceErrorDensity"
|
)
|
);
|
dynamicScreenSpaceErrorContainer.appendChild(
|
makeRangeInput(
|
"dynamicScreenSpaceErrorFactor",
|
1,
|
10,
|
0.1,
|
"Screen Space Error Factor"
|
)
|
);
|
updatePanelContents.appendChild(dynamicScreenSpaceErrorContainer);
|
|
loggingPanelContents.appendChild(
|
createCheckbox("Performance", "performance")
|
);
|
loggingPanelContents.appendChild(performanceContainer);
|
loggingPanelContents.appendChild(
|
createCheckbox("Statistics", "showStatistics")
|
);
|
var statistics = document.createElement("div");
|
statistics.className = "cesium-3dTilesInspector-statistics";
|
statistics.setAttribute(
|
"data-bind",
|
"html: statisticsText, visible: showStatistics"
|
);
|
loggingPanelContents.appendChild(statistics);
|
loggingPanelContents.appendChild(
|
createCheckbox("Pick Statistics", "showPickStatistics")
|
);
|
var pickStatistics = document.createElement("div");
|
pickStatistics.className = "cesium-3dTilesInspector-statistics";
|
pickStatistics.setAttribute(
|
"data-bind",
|
"html: pickStatisticsText, visible: showPickStatistics"
|
);
|
loggingPanelContents.appendChild(pickStatistics);
|
|
var stylePanelEditor = document.createElement("div");
|
stylePanelContents.appendChild(stylePanelEditor);
|
stylePanelEditor.appendChild(document.createTextNode("Color Blend Mode: "));
|
var blendDropdown = document.createElement("select");
|
blendDropdown.setAttribute(
|
"data-bind",
|
"options: colorBlendModes, " +
|
'optionsText: "text", ' +
|
'optionsValue: "value", ' +
|
"value: colorBlendMode"
|
);
|
stylePanelEditor.appendChild(blendDropdown);
|
var styleEditor = document.createElement("textarea");
|
styleEditor.setAttribute(
|
"data-bind",
|
"textInput: styleString, event: { keydown: styleEditorKeyPress }"
|
);
|
stylePanelEditor.className = "cesium-cesiumInspector-styleEditor";
|
stylePanelEditor.appendChild(styleEditor);
|
var closeStylesBtn = makeButton("compileStyle", "Compile (Ctrl+Enter)");
|
stylePanelEditor.appendChild(closeStylesBtn);
|
var errorBox = document.createElement("div");
|
errorBox.className = "cesium-cesiumInspector-error";
|
errorBox.setAttribute("data-bind", "text: editorError");
|
stylePanelEditor.appendChild(errorBox);
|
|
tileDebugLabelsPanelContents.appendChild(
|
createCheckbox("Show Picked Only", "showOnlyPickedTileDebugLabel")
|
);
|
tileDebugLabelsPanelContents.appendChild(
|
createCheckbox("Geometric Error", "showGeometricError")
|
);
|
tileDebugLabelsPanelContents.appendChild(
|
createCheckbox("Rendering Statistics", "showRenderingStatistics")
|
);
|
tileDebugLabelsPanelContents.appendChild(
|
createCheckbox("Memory Usage (MB)", "showMemoryUsage")
|
);
|
tileDebugLabelsPanelContents.appendChild(createCheckbox("Url", "showUrl"));
|
|
optimizationPanelContents.appendChild(
|
createCheckbox("Skip Tile LODs", "skipLevelOfDetail")
|
);
|
var skipScreenSpaceErrorFactorContainer = document.createElement("div");
|
skipScreenSpaceErrorFactorContainer.appendChild(
|
makeRangeInput("skipScreenSpaceErrorFactor", 1, 50, 1, "Skip SSE Factor")
|
);
|
optimizationPanelContents.appendChild(skipScreenSpaceErrorFactorContainer);
|
var baseScreenSpaceError = document.createElement("div");
|
baseScreenSpaceError.appendChild(
|
makeRangeInput(
|
"baseScreenSpaceError",
|
0,
|
4096,
|
1,
|
"SSE before skipping LOD"
|
)
|
);
|
optimizationPanelContents.appendChild(baseScreenSpaceError);
|
var skipLevelsContainer = document.createElement("div");
|
skipLevelsContainer.appendChild(
|
makeRangeInput("skipLevels", 0, 10, 1, "Min. levels to skip")
|
);
|
optimizationPanelContents.appendChild(skipLevelsContainer);
|
optimizationPanelContents.appendChild(
|
createCheckbox(
|
"Load only tiles that meet the max SSE.",
|
"immediatelyLoadDesiredLevelOfDetail"
|
)
|
);
|
optimizationPanelContents.appendChild(
|
createCheckbox("Load siblings of visible tiles", "loadSiblings")
|
);
|
|
knockout.applyBindings(viewModel, element);
|
}
|
|
Object.defineProperties(Cesium3DTilesInspector.prototype, {
|
/**
|
* Gets the parent container.
|
* @memberof Cesium3DTilesInspector.prototype
|
*
|
* @type {Element}
|
*/
|
container: {
|
get: function () {
|
return this._container;
|
},
|
},
|
|
/**
|
* Gets the view model.
|
* @memberof Cesium3DTilesInspector.prototype
|
*
|
* @type {Cesium3DTilesInspectorViewModel}
|
*/
|
viewModel: {
|
get: function () {
|
return this._viewModel;
|
},
|
},
|
});
|
|
/**
|
* @returns {Boolean} true if the object has been destroyed, false otherwise.
|
*/
|
Cesium3DTilesInspector.prototype.isDestroyed = function () {
|
return false;
|
};
|
|
/**
|
* Destroys the widget. Should be called if permanently
|
* removing the widget from layout.
|
*/
|
Cesium3DTilesInspector.prototype.destroy = function () {
|
knockout.cleanNode(this._element);
|
this._container.removeChild(this._element);
|
this.viewModel.destroy();
|
|
return destroyObject(this);
|
};
|
|
function makeRangeInput(property, min, max, step, text, displayProperty) {
|
displayProperty = defaultValue(displayProperty, property);
|
var input = document.createElement("input");
|
input.setAttribute("data-bind", "value: " + displayProperty);
|
input.type = "number";
|
|
var slider = document.createElement("input");
|
slider.type = "range";
|
slider.min = min;
|
slider.max = max;
|
slider.step = step;
|
slider.setAttribute("data-bind", 'valueUpdate: "input", value: ' + property);
|
|
var wrapper = document.createElement("div");
|
wrapper.appendChild(slider);
|
|
var container = document.createElement("div");
|
container.className = "cesium-cesiumInspector-slider";
|
container.appendChild(document.createTextNode(text));
|
container.appendChild(input);
|
container.appendChild(wrapper);
|
|
return container;
|
}
|
|
function makeButton(action, text, active) {
|
var button = document.createElement("button");
|
button.type = "button";
|
button.textContent = text;
|
button.className = "cesium-cesiumInspector-pickButton";
|
var binding = "click: " + action;
|
if (defined(active)) {
|
binding +=
|
', css: {"cesium-cesiumInspector-pickButtonHighlight" : ' + active + "}";
|
}
|
button.setAttribute("data-bind", binding);
|
|
return button;
|
}
|
export default Cesium3DTilesInspector;
|
