Doni/ModelHandle
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Environment and background improvements.

Browse Source
This commit is contained in:
kovacsv 2022-06-04 14:32:50 +02:00
parent 16695ab11c
commit 61c98e6f2e
5 changed files with 152 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
source/engine/viewer/viewer.js
View File

@ -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;
}
}

2
source/website/sidebar.js
View File

@ -20,7 +20,7 @@ export class Sidebar
this.panelSet.ShowPanel (this.detailsPanel);
}
IsPanelsVisible ()
IsPanelsle ()
{
return this.panelSet.IsPanelsVisible ();
}

158
source/website/sidebarsettingspanel.js
View File

@ -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);

BIN
website/assets/envmaps/noimage.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

26
website/css/sidebar.css
View File

@ -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;