From 61c98e6f2e5cde86aa40ba72b77bacafb708297c Mon Sep 17 00:00:00 2001 From: kovacsv Date: Sat, 4 Jun 2022 14:32:50 +0200 Subject: [PATCH] Environment and background improvements. --- source/engine/viewer/viewer.js | 11 +- source/website/sidebar.js | 2 +- source/website/sidebarsettingspanel.js | 158 +++++++++++++++++++------ website/assets/envmaps/noimage.jpg | Bin 0 -> 5130 bytes website/css/sidebar.css | 26 +++- 5 files changed, 152 insertions(+), 45 deletions(-) create mode 100644 website/assets/envmaps/noimage.jpg 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 0000000000000000000000000000000000000000..fee9a9d185b39b67083fb1026a56bb232e3ed6e5 GIT binary patch literal 5130 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