diff --git a/source/engine/viewer/viewer.js b/source/engine/viewer/viewer.js index 81727ec..1b19dd7 100644 --- a/source/engine/viewer/viewer.js +++ b/source/engine/viewer/viewer.js @@ -145,16 +145,15 @@ export class ShadingModel this.ambientLight.color.set (0x888888); this.directionalLight.color.set (0x888888); this.scene.environment = null; - this.scene.background = null; } else if (this.type === ShadingType.Physical) { this.ambientLight.color.set (0x000000); this.directionalLight.color.set (0x555555); this.scene.environment = this.environment; - if (this.backgroundIsEnvMap) { - this.scene.background = this.environment; - } else { - this.scene.background = null; - } + } + if (this.backgroundIsEnvMap) { + this.scene.background = this.environment; + } else { + this.scene.background = null; } } diff --git a/source/website/sidebar.js b/source/website/sidebar.js index de25e11..6582285 100644 --- a/source/website/sidebar.js +++ b/source/website/sidebar.js @@ -20,7 +20,7 @@ export class Sidebar this.panelSet.ShowPanel (this.detailsPanel); } - IsPanelsVisible () + IsPanelsle () { return this.panelSet.IsPanelsVisible (); } diff --git a/source/website/sidebarsettingspanel.js b/source/website/sidebarsettingspanel.js index c2277ee..4c47be8 100644 --- a/source/website/sidebarsettingspanel.js +++ b/source/website/sidebarsettingspanel.js @@ -6,7 +6,7 @@ import { FeatureSet } from './featureset.js'; import { PopupDialog } from './dialog.js'; import { Settings, Theme } from './settings.js'; import { SidebarPanel } from './sidebarpanel.js'; -import { AddSvgIconElement } from './utils.js'; +import { ShadingType } from '../engine/threejs/threeutils.js'; function AddColorPicker (parentDiv, defaultColor, predefinedColors, onChange) { @@ -52,7 +52,7 @@ class EnvironmentMapPopup extends PopupDialog super (); } - ShowPopup (buttonDiv, settings, callbacks) + ShowPopup (buttonDiv, shadingType, settings, callbacks) { let contentDiv = super.Init (() => { return CalculatePopupPositionToElementTopLeft (buttonDiv, contentDiv); @@ -85,26 +85,61 @@ class EnvironmentMapPopup extends PopupDialog } ]; - for (let envMapImage of envMapImages) { - envMapImage.element = AddDomElement (contentDiv, 'img', 'ov_environment_map_preview'); - envMapImage.element.setAttribute ('src', 'assets/envmaps/' + envMapImage.name + '.jpg'); - if (envMapImage.name === settings.environmentMapName) { - envMapImage.element.classList.add ('selected'); - } - envMapImage.element.addEventListener ('click', () => { - for (let otherImage of envMapImages) { - otherImage.element.classList.remove ('selected'); + if (shadingType === ShadingType.Phong) { + envMapImages.unshift ({ + element : null, + name : 'noimage' + }); + for (let envMapImage of envMapImages) { + envMapImage.element = AddDomElement (contentDiv, 'img', 'ov_environment_map_preview'); + envMapImage.element.setAttribute ('src', 'assets/envmaps/' + envMapImage.name + '.jpg'); + let isSelected = false; + if (settings.backgroundIsEnvMap) { + isSelected = (envMapImage.name === settings.environmentMapName); + } else { + isSelected = (envMapImage.name === 'noimage'); } - envMapImage.element.classList.add ('selected'); - settings.environmentMapName = envMapImage.name; + if (isSelected) { + envMapImage.element.classList.add ('selected'); + } + envMapImage.element.addEventListener ('click', () => { + for (let otherImage of envMapImages) { + otherImage.element.classList.remove ('selected'); + } + envMapImage.element.classList.add ('selected'); + if (envMapImage.name === 'noimage') { + settings.backgroundIsEnvMap = false; + settings.environmentMapName = 'fishermans_bastion'; + } else { + settings.backgroundIsEnvMap = true; + settings.environmentMapName = envMapImage.name; + } + callbacks.onEnvironmentMapChange (); + }); + } + } else if (shadingType === ShadingType.Physical) { + let checkboxDiv = AddDiv (contentDiv, 'ov_environment_map_checkbox'); + let backgroundIsEnvMapCheckbox = AddCheckbox (checkboxDiv, 'use_as_background', 'Use as background', settings.backgroundIsEnvMap, () => { + settings.backgroundIsEnvMap = backgroundIsEnvMapCheckbox.checked; callbacks.onEnvironmentMapChange (); }); - } - let backgroundIsEnvMapCheckbox = AddCheckbox (contentDiv, 'use_as_background', 'Use as background', settings.backgroundIsEnvMap, () => { - settings.backgroundIsEnvMap = backgroundIsEnvMapCheckbox.checked; - callbacks.onEnvironmentMapChange (); - }); + for (let envMapImage of envMapImages) { + envMapImage.element = AddDomElement (contentDiv, 'img', 'ov_environment_map_preview'); + envMapImage.element.setAttribute ('src', 'assets/envmaps/' + envMapImage.name + '.jpg'); + if (envMapImage.name === settings.environmentMapName) { + envMapImage.element.classList.add ('selected'); + } + envMapImage.element.addEventListener ('click', () => { + for (let otherImage of envMapImages) { + otherImage.element.classList.remove ('selected'); + } + envMapImage.element.classList.add ('selected'); + settings.environmentMapName = envMapImage.name; + callbacks.onEnvironmentMapChange (); + }); + } + } contentDiv.classList.add ('sidebar'); this.Open (); @@ -142,11 +177,16 @@ class SettingsModelDisplaySection extends SettingsSection { super (parentDiv, 'Model Display'); - this.environmentMapButton = null; - this.environmentMapPopup = null; - this.backgroundColorPicker = null; + this.environmentMapPhongDiv = null; + this.environmentMapPhongInput = null; + + this.environmentMapPbrDiv = null; + this.environmentMapPbrInput = null; + + this.environmentMapPopup = null; + this.edgeDisplayToggle = null; this.edgeColorPicker = null; this.thresholdSlider = null; @@ -156,20 +196,6 @@ class SettingsModelDisplaySection extends SettingsSection Init (settings, callbacks) { - if (FeatureSet.EnvironmentMap) { - this.environmentMapButton = AddDiv (this.contentDiv, 'ov_panel_button'); - AddSvgIconElement (this.environmentMapButton, 'arrow_left', 'ov_panel_button_left_icon'); - AddDiv (this.environmentMapButton, 'ov_panel_button_text', 'Environment Map'); - this.environmentMapButton.addEventListener ('click', () => { - this.environmentMapPopup = new EnvironmentMapPopup (); - this.environmentMapPopup.ShowPopup (this.environmentMapButton, settings, { - onEnvironmentMapChange : () => { - callbacks.onEnvironmentMapChange (); - } - }); - }); - } - let backgroundColorDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter'); let backgroundColorInput = AddDiv (backgroundColorDiv, 'ov_color_picker'); AddDiv (backgroundColorDiv, null, 'Background Color'); @@ -179,6 +205,36 @@ class SettingsModelDisplaySection extends SettingsSection callbacks.onBackgroundColorChange (); }); + if (FeatureSet.EnvironmentMap) { + this.environmentMapPhongDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter'); + this.environmentMapPhongInput = AddDiv (this.environmentMapPhongDiv, 'ov_sidebar_image_picker'); + AddDiv (this.environmentMapPhongDiv, null, 'Background Image'); + this.environmentMapPhongInput.addEventListener ('click', () => { + this.environmentMapPopup = new EnvironmentMapPopup (); + this.environmentMapPopup.ShowPopup (this.environmentMapPhongInput, ShadingType.Phong, settings, { + onEnvironmentMapChange : () => { + this.UpdateEnvironmentMap (settings); + callbacks.onEnvironmentMapChange (); + } + }); + }); + + this.environmentMapPbrDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter'); + this.environmentMapPbrInput = AddDiv (this.environmentMapPbrDiv, 'ov_sidebar_image_picker'); + AddDiv (this.environmentMapPbrDiv, null, 'Environment'); + this.environmentMapPbrInput.addEventListener ('click', () => { + this.environmentMapPopup = new EnvironmentMapPopup (); + this.environmentMapPopup.ShowPopup (this.environmentMapPbrInput, ShadingType.Physical, settings, { + onEnvironmentMapChange : () => { + this.UpdateEnvironmentMap (settings); + callbacks.onEnvironmentMapChange (); + } + }); + }); + + this.UpdateEnvironmentMap (settings); + } + let edgeParameterDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter'); this.edgeDisplayToggle = AddToggle (edgeParameterDiv, 'ov_sidebar_parameter_toggle'); AddDiv (edgeParameterDiv, 'ov_sidebar_parameter_text', 'Show Edges'); @@ -220,8 +276,32 @@ class SettingsModelDisplaySection extends SettingsSection UpdateVisibility (isPhysicallyBased) { - if (this.environmentMapButton !== null) { - ShowDomElement (this.environmentMapButton, isPhysicallyBased); + if (this.environmentMapPhongDiv !== null) { + ShowDomElement (this.environmentMapPhongDiv, !isPhysicallyBased); + } + if (this.environmentMapPbrDiv !== null) { + ShowDomElement (this.environmentMapPbrDiv, isPhysicallyBased); + } + } + + UpdateEnvironmentMap (settings) + { + function UpdateImage (input, image) + { + input.style.backgroundImage = 'url(\'assets/envmaps/' + image + '.jpg\')'; + } + + if (this.environmentMapPhongDiv !== null) { + if (settings.backgroundIsEnvMap) { + UpdateImage (this.environmentMapPhongInput, settings.environmentMapName); + this.environmentMapPhongInput.classList.remove ('ov_environment_map_preview_no_color'); + } else { + this.environmentMapPhongInput.style.backgroundImage = null; + this.environmentMapPhongInput.classList.add ('ov_environment_map_preview_no_color'); + } + } + if (this.environmentMapPbrDiv !== null) { + UpdateImage (this.environmentMapPbrInput, settings.environmentMapName); } } @@ -231,6 +311,10 @@ class SettingsModelDisplaySection extends SettingsSection this.backgroundColorPicker.setColor ('#' + ColorToHexString (settings.backgroundColor)); } + if (this.environmentMapPbrInput !== null || this.environmentMapPhongDiv !== null) { + this.UpdateEnvironmentMap (settings); + } + if (this.edgeDisplayToggle !== null) { this.edgeDisplayToggle.SetStatus (settings.showEdges); ShowDomElement (this.edgeSettingsDiv, settings.showEdges); diff --git a/website/assets/envmaps/noimage.jpg b/website/assets/envmaps/noimage.jpg new file mode 100644 index 0000000..fee9a9d Binary files /dev/null and b/website/assets/envmaps/noimage.jpg differ diff --git a/website/css/sidebar.css b/website/css/sidebar.css index f55551e..9f565c0 100644 --- a/website/css/sidebar.css +++ b/website/css/sidebar.css @@ -40,6 +40,20 @@ div.ov_sidebar_parameter div.ov_sidebar_parameter_text float: left; } +div.ov_sidebar_image_picker +{ + background-size: cover; + background-position: center center; + width: 28px; + height: 13px; + margin-top: 3px; + margin-right: 10px; + border: 1px solid var(--ov_border_color); + border-radius: 3px; + float: left; + cursor: pointer; +} + div.ov_sidebar_content { overflow: auto; @@ -95,6 +109,11 @@ div.ov_sidebar_content button.pcr-button float: left; } +div.ov_environment_map_checkbox +{ + margin-bottom: 10px; +} + img.ov_environment_map_preview { width: 160px; @@ -102,7 +121,7 @@ img.ov_environment_map_preview display: block; float: left; padding: 1px; - border: 5px solid transparent; + border: 5px solid var(--ov_dialog_background_color); cursor: pointer; } @@ -111,6 +130,11 @@ img.ov_environment_map_preview.selected border: 5px solid var(--ov_button_color); } +div.ov_environment_map_preview_no_color +{ + background: linear-gradient(to top left, var(--ov_background_color) calc(50% - 1px), var(--ov_border_color), var(--ov_background_color) calc(50% + 1px) ) +} + div.ov_popup.sidebar { width: 344px;