285 lines
14 KiB
JavaScript
285 lines
14 KiB
JavaScript
|
define([
|
||
|
|
'../../Core/Check',
|
||
|
|
'../../Core/defaultValue',
|
||
|
|
'../../Core/defined',
|
||
|
|
'../../Core/defineProperties',
|
||
|
|
'../../Core/destroyObject',
|
||
|
|
'../../ThirdParty/knockout',
|
||
|
|
'../getElement',
|
||
|
|
'./Cesium3DTilesInspectorViewModel'
|
||
|
|
], function(
|
||
|
|
Check,
|
||
|
|
defaultValue,
|
||
|
|
defined,
|
||
|
|
defineProperties,
|
||
|
|
destroyObject,
|
||
|
|
knockout,
|
||
|
|
getElement,
|
||
|
|
Cesium3DTilesInspectorViewModel) {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 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', 'css: {"cesium-cesiumInspector-show" : performance, "cesium-cesiumInspector-hide" : !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 tilesetPanelContents = document.createElement('div');
|
||
|
|
var displayPanelContents = document.createElement('div');
|
||
|
|
var updatePanelContents = document.createElement('div');
|
||
|
|
var loggingPanelContents = document.createElement('div');
|
||
|
|
var tileDebugLabelsPanelContents = document.createElement('div');
|
||
|
|
var stylePanelContents = document.createElement('div');
|
||
|
|
var optimizationPanelContents = document.createElement('div');
|
||
|
|
|
||
|
|
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(makeCheckbox('picking', 'Enable Picking'));
|
||
|
|
|
||
|
|
displayPanelContents.appendChild(makeCheckbox('colorize', 'Colorize'));
|
||
|
|
displayPanelContents.appendChild(makeCheckbox('wireframe', 'Wireframe'));
|
||
|
|
displayPanelContents.appendChild(makeCheckbox('showBoundingVolumes', 'Bounding Volumes'));
|
||
|
|
displayPanelContents.appendChild(makeCheckbox('showContentBoundingVolumes', 'Content Volumes'));
|
||
|
|
displayPanelContents.appendChild(makeCheckbox('showRequestVolumes', 'Request Volumes'));
|
||
|
|
|
||
|
|
updatePanelContents.appendChild(makeCheckbox('freezeFrame', 'Freeze Frame'));
|
||
|
|
updatePanelContents.appendChild(makeCheckbox('dynamicScreenSpaceError', 'Dynamic Screen Space Error'));
|
||
|
|
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', 'css: {"cesium-cesiumInspector-show" : dynamicScreenSpaceError, "cesium-cesiumInspector-hide" : !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(makeCheckbox('performance', 'Performance'));
|
||
|
|
loggingPanelContents.appendChild(performanceContainer);
|
||
|
|
loggingPanelContents.appendChild(makeCheckbox('showStatistics', 'Statistics'));
|
||
|
|
var statistics = document.createElement('div');
|
||
|
|
statistics.className = 'cesium-3dTilesInspector-statistics';
|
||
|
|
statistics.setAttribute('data-bind', 'html: statisticsText, visible: showStatistics');
|
||
|
|
loggingPanelContents.appendChild(statistics);
|
||
|
|
loggingPanelContents.appendChild(makeCheckbox('showPickStatistics', 'Pick Statistics'));
|
||
|
|
var pickStatistics = document.createElement('div');
|
||
|
|
pickStatistics.className = 'cesium-3dTilesInspector-statistics';
|
||
|
|
pickStatistics.setAttribute('data-bind', 'html: pickStatisticsText, visible: showPickStatistics');
|
||
|
|
loggingPanelContents.appendChild(pickStatistics);
|
||
|
|
|
||
|
|
stylePanelContents.appendChild(document.createTextNode('Color Blend Mode: '));
|
||
|
|
var blendDropdown = document.createElement('select');
|
||
|
|
blendDropdown.setAttribute('data-bind', 'options: colorBlendModes, ' +
|
||
|
|
'optionsText: "text", ' +
|
||
|
|
'optionsValue: "value", ' +
|
||
|
|
'value: colorBlendMode');
|
||
|
|
stylePanelContents.appendChild(blendDropdown);
|
||
|
|
var styleEditor = document.createElement('textarea');
|
||
|
|
styleEditor.setAttribute('data-bind', 'textInput: styleString, event: { keydown: styleEditorKeyPress }');
|
||
|
|
stylePanelContents.className = 'cesium-cesiumInspector-styleEditor';
|
||
|
|
stylePanelContents.appendChild(styleEditor);
|
||
|
|
var closeStylesBtn = makeButton('compileStyle', 'Compile (Ctrl+Enter)');
|
||
|
|
stylePanelContents.appendChild(closeStylesBtn);
|
||
|
|
var errorBox = document.createElement('div');
|
||
|
|
errorBox.className = 'cesium-cesiumInspector-error';
|
||
|
|
errorBox.setAttribute('data-bind', 'text: editorError');
|
||
|
|
stylePanelContents.appendChild(errorBox);
|
||
|
|
|
||
|
|
tileDebugLabelsPanelContents.appendChild(makeCheckbox('showOnlyPickedTileDebugLabel', 'Show Picked Only'));
|
||
|
|
tileDebugLabelsPanelContents.appendChild(makeCheckbox('showGeometricError', 'Geometric Error'));
|
||
|
|
tileDebugLabelsPanelContents.appendChild(makeCheckbox('showRenderingStatistics', 'Rendering Statistics'));
|
||
|
|
tileDebugLabelsPanelContents.appendChild(makeCheckbox('showMemoryUsage', 'Memory Usage (MB)'));
|
||
|
|
tileDebugLabelsPanelContents.appendChild(makeCheckbox('showUrl', 'Url'));
|
||
|
|
|
||
|
|
optimizationPanelContents.appendChild(makeCheckbox('skipLevelOfDetail', 'Skip Tile LODs'));
|
||
|
|
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(makeCheckbox('immediatelyLoadDesiredLevelOfDetail', 'Load only tiles that meet the max. SSE.'));
|
||
|
|
optimizationPanelContents.appendChild(makeCheckbox('loadSiblings', 'Load siblings of visible tiles.'));
|
||
|
|
|
||
|
|
var tilesetPanel = makeSection('Tileset', 'tilesetVisible', 'toggleTileset', tilesetPanelContents);
|
||
|
|
var displayPanel = makeSection('Display', 'displayVisible', 'toggleDisplay', displayPanelContents);
|
||
|
|
var updatePanel = makeSection('Update', 'updateVisible', 'toggleUpdate', updatePanelContents);
|
||
|
|
var loggingPanel = makeSection('Logging', 'loggingVisible', 'toggleLogging', loggingPanelContents);
|
||
|
|
var tileDebugLabelsPanel = makeSection('Tile Debug Labels', 'tileDebugLabelsVisible', 'toggleTileDebugLabels', tileDebugLabelsPanelContents);
|
||
|
|
var stylePanel = makeSection('Style', 'styleVisible', 'toggleStyle', stylePanelContents);
|
||
|
|
var optimizationPanel = makeSection('Optimization', 'optimizationVisible', 'toggleOptimization', optimizationPanelContents);
|
||
|
|
|
||
|
|
// first add and bind all the toggleable panels
|
||
|
|
element.appendChild(tilesetPanel);
|
||
|
|
element.appendChild(displayPanel);
|
||
|
|
element.appendChild(updatePanel);
|
||
|
|
element.appendChild(loggingPanel);
|
||
|
|
element.appendChild(tileDebugLabelsPanel);
|
||
|
|
element.appendChild(stylePanel);
|
||
|
|
element.appendChild(optimizationPanel);
|
||
|
|
|
||
|
|
knockout.applyBindings(viewModel, element);
|
||
|
|
}
|
||
|
|
|
||
|
|
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 makeSection(name, visibleProp, toggleProp, contents) {
|
||
|
|
var toggle = document.createElement('span');
|
||
|
|
toggle.className = 'cesium-cesiumInspector-toggleSwitch';
|
||
|
|
toggle.setAttribute('data-bind', 'text: ' + visibleProp + ' ? "-" : "+", click: ' + toggleProp);
|
||
|
|
|
||
|
|
var header = document.createElement('div');
|
||
|
|
header.className = 'cesium-cesiumInspector-sectionHeader';
|
||
|
|
header.appendChild(toggle);
|
||
|
|
header.appendChild(document.createTextNode(name));
|
||
|
|
|
||
|
|
var section = document.createElement('div');
|
||
|
|
section.className = 'cesium-cesiumInspector-section';
|
||
|
|
section.setAttribute('data-bind', 'css: {"cesium-cesiumInspector-show" : ' + visibleProp + ', "cesium-cesiumInspector-hide" : !' + visibleProp + '}');
|
||
|
|
section.appendChild(contents);
|
||
|
|
|
||
|
|
var panel = document.createElement('div');
|
||
|
|
panel.className = 'cesium-cesiumInspector-dropDown';
|
||
|
|
panel.appendChild(header);
|
||
|
|
panel.appendChild(section);
|
||
|
|
|
||
|
|
return panel;
|
||
|
|
}
|
||
|
|
|
||
|
|
function makeCheckbox(property, text) {
|
||
|
|
var checkbox = document.createElement('input');
|
||
|
|
checkbox.type = 'checkbox';
|
||
|
|
checkbox.setAttribute('data-bind', 'checked: ' + property);
|
||
|
|
|
||
|
|
var container = document.createElement('div');
|
||
|
|
container.appendChild(checkbox);
|
||
|
|
container.appendChild(document.createTextNode(text));
|
||
|
|
|
||
|
|
return container;
|
||
|
|
}
|
||
|
|
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
return Cesium3DTilesInspector;
|
||
|
|
});
|