mirror of
https://github.com/lubosz/overte.git
synced 2025-04-05 18:28:49 +02:00
Merge pull request #1091 from AleziaKurdis/createApp_MatAssistant2.0
Create App: Material Assistant: Add Mtoon, Shader_simple, missing PBR properties and bug fixes.
This commit is contained in:
Dale Glass
GitHub
commit
cc8e14ada7
4 changed files with 2081 additions and 245 deletions
|
|
@ -5,7 +5,7 @@
|
|||
// Created by Ryan Huffman on 13 Nov 2014
|
||||
// Copyright 2014 High Fidelity, Inc.
|
||||
// Copyright 2020 Vircadia contributors.
|
||||
// Copyright 2022 Overte e.V.
|
||||
// Copyright 2022-2024 Overte e.V.
|
||||
//
|
||||
// Distributed under the Apache License, Version 2.0.
|
||||
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||
|
|
@ -63,131 +63,298 @@
|
|||
</table>
|
||||
</div>
|
||||
<div id="uiMaterialAssistant" style="display: none;">
|
||||
<div id="uiMaterialAssistant-sidewalk">
|
||||
|
||||
<div id="uiMaterialAssistant-formContainer">
|
||||
<div id="uiMaterialAssistant-headerContainer">
|
||||
<div style="width: 85%; text-align: left;"><font class="uiMaterialAssistant-title">MATERIAL DATA</font></div>
|
||||
<div style="width: 15%; text-align: right;"><span id="uiMaterialAssistant-closeButton">✖</span></div>
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<font class="uiMaterialAssistant-label">Name: </font>
|
||||
<input name = "ma-name" id = "ma-name" type = "text" class="uiMaterialAssistant-input" style= "width: 90%;">
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<button class="uiMaterialAssistant-active" id="ma-albedo-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Albedo (Color): </font>
|
||||
<div id="ma-albedo-colorPicker" class="uiMaterialAssistant-color-picker"></div>
|
||||
<br><br>
|
||||
<button class="uiMaterialAssistant-active" id="ma-albedoMap-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Albedo Map (RGB) URL: </font>
|
||||
<input name = "ma-albedoMap" id = "ma-albedoMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;"><br>
|
||||
<font class="uiMaterialAssistant-Explain">The Albedo (Color) can be used to tint the texture of the Albedo Map.</font>
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<button class="uiMaterialAssistant-active" id="ma-metallic-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Metallic: </font>
|
||||
<input class="uiMaterialAssistant-input" name = "ma-metallic" id = "ma-metallic" readonly type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="1" max="1000" value="1" class="uiMaterialAssistant-slider" name = "ma-metallic-slider" id = "ma-metallic-slider"><br>
|
||||
<div style="width: 100%; display: flex;">
|
||||
<div style="width: 15%; text-align: left;"><font class = "uiMaterialAssistant-Explain">|< Nonmetal</font></div>
|
||||
<div style="width: 15%; text-align: left;"><font class = "uiMaterialAssistant-Explain">| Hair</font></div>
|
||||
<div style="width: 60%; text-align: left;"><font class = "uiMaterialAssistant-Explain">| Chitin</font></div>
|
||||
<div style="width: 10%; text-align: right;"><font class = "uiMaterialAssistant-Explain">Metal >|</font></div>
|
||||
</div><br>
|
||||
<font class="uiMaterialAssistant-label">Metallic Map (Grayscale) URL: </font>
|
||||
<input name = "ma-metallicMap" id = "ma-metallicMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;">
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<button class="uiMaterialAssistant-active" id="ma-roughness-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Roughness:</font>
|
||||
<input name = "ma-roughness" id = "ma-roughness" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="0" max="1000" value="0" class="uiMaterialAssistant-slider" name = "ma-roughness-slider" id = "ma-roughness-slider"><br>
|
||||
<div style="width: 100%; display: flex;">
|
||||
<div style="width: 50%; text-align: left;"><font class = "uiMaterialAssistant-Explain">|< Glossy, polished, lustrous</font></div>
|
||||
<div style="width: 50%; text-align: right;"><font class = "uiMaterialAssistant-Explain">Unpolished, mat, rough >|</font></div>
|
||||
</div><br>
|
||||
<font class="uiMaterialAssistant-label">Roughness Map (Grayscale) URL: </font>
|
||||
<input name = "ma-roughnessMap" id = "ma-roughnessMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;">
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<button class="uiMaterialAssistant-active" id="ma-normalMap-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Normal Map URL: </font>
|
||||
<input name = "ma-normalMap" id = "ma-normalMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;">
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<button class="uiMaterialAssistant-active" id="ma-opacity-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Opacity: </font>
|
||||
<input name = "ma-opacity" id = "ma-opacity" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="0" max="1000" value="0" class="uiMaterialAssistant-slider" name = "ma-opacity-slider" id = "ma-opacity-slider"><br>
|
||||
<div style="width: 100%; display: flex;">
|
||||
<div style="width: 50%; text-align: left;"><font class = "uiMaterialAssistant-Explain">|< Transparent</font></div>
|
||||
<div style="width: 50%; text-align: right;"><font class = "uiMaterialAssistant-Explain">Opaque >|</font></div>
|
||||
<div id="uiMaterialAssistant-headerContainer">
|
||||
<div style="width: 85%; text-align: left;"><font class="uiMaterialAssistant-title">MATERIAL DATA</font></div>
|
||||
<div style="width: 15%; text-align: right;"><span id="uiMaterialAssistant-closeButton">✖ </span></div>
|
||||
</div>
|
||||
<div id="uiMaterialAssistant-scrollable">
|
||||
<div id="uiMaterialAssistant-sidewalk">
|
||||
<div id="uiMaterialAssistant-formContainer">
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<font class="uiMaterialAssistant-label">Name: </font>
|
||||
<input name = "ma-name" id = "ma-name" type = "text" class="uiMaterialAssistant-input" style= "width: 90%;">
|
||||
</div>
|
||||
<br>
|
||||
<font class="uiMaterialAssistant-label">Opacity Map Mode:</font><br><br>
|
||||
<input type="radio" class="uiMaterialAssistant-radio" checked name = "ma-opacityMapMode" id = "ma-opacityMapMode-dont" value = "OPACITY_MAP_OPAQUE"> Do not used
|
||||
<input type="radio" class="uiMaterialAssistant-radio" name = "ma-opacityMapMode" id = "ma-opacityMapMode-mask" value = "OPACITY_MAP_MASK"> Cut off mask
|
||||
<input type="radio" class="uiMaterialAssistant-radio" name = "ma-opacityMapMode" id = "ma-opacityMapMode-blend" value = "OPACITY_MAP_BLEND"> Blend<br>
|
||||
<font class="uiMaterialAssistant-Explain"><br>Note: For an opacity map, the alpha layer of the Albedo Map will be used.<br>
|
||||
'Blend' mode will used the alpha value to determine the opacity of a pixel.<br>
|
||||
'Cut off mask' mode will use the 'Cut off threshold' to determine if a pixel will be opaque or transparent, based on the alpha value from the map.</font><br><br>
|
||||
<font class="uiMaterialAssistant-label">Cut Off Threshold: </font>
|
||||
<input name = "ma-opacityCutoff" id = "ma-opacityCutoff" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="0" max="1000" value="0" class="uiMaterialAssistant-slider" name = "ma-opacityCutoff-slider" id = "ma-opacityCutoff-slider"><br>
|
||||
<div style="width: 100%; display: flex;">
|
||||
<div style="width: 50%; text-align: left;"><font class = "uiMaterialAssistant-Explain">|< Transparent</font></div>
|
||||
<div style="width: 50%; text-align: right;"><font class = "uiMaterialAssistant-Explain">Opaque >|</font></div>
|
||||
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<font class="uiMaterialAssistant-label">Model: </font><br><br>
|
||||
<input type="radio" class="uiMaterialAssistant-radio" checked name = "ma-Model" id = "ma-Model-hifi_pbr" value = "hifi_pbr"> PBR
|
||||
<input type="radio" class="uiMaterialAssistant-radio" name = "ma-Model" id = "ma-Model-vrm_mtoon" value = "vrm_mtoon"> MToon
|
||||
<input type="radio" class="uiMaterialAssistant-radio" name = "ma-Model" id = "ma-Model-hifi_shader_simple" value = "hifi_shader_simple"> Shader (Simple)<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<div style="width: 100%; display: flex;">
|
||||
<div style="width: 70%; text-align: left;">
|
||||
<button class="uiMaterialAssistant-active" id="ma-emissive-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Emissive: </font>
|
||||
<div id="ma-emissive-colorPicker" class="uiMaterialAssistant-color-picker"></div>
|
||||
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<div id="maContainerAlbedo">
|
||||
<button class="uiMaterialAssistant-active" id="ma-albedo-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Albedo (Color): </font>
|
||||
<div id="ma-albedo-colorPicker" class="uiMaterialAssistant-color-picker"></div>
|
||||
</div>
|
||||
<div style="width: 30%; text-align: left;">
|
||||
<input type="checkbox" class="uiMaterialAssistant-checkbox" name = "ma-unlit" id = "ma-unlit">
|
||||
<font class="uiMaterialAssistant-label">Unlit</font>
|
||||
<br><br>
|
||||
<div id="maContainerAlbedoMap">
|
||||
<button class="uiMaterialAssistant-active" id="ma-albedoMap-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Albedo Map (RGB) URL: </font>
|
||||
<input name = "ma-albedoMap" id = "ma-albedoMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;"><br>
|
||||
<font class="uiMaterialAssistant-Explain">The Albedo (Color) can be used to tint the texture of the Albedo Map.</font>
|
||||
</div>
|
||||
</div>
|
||||
<font class="uiMaterialAssistant-label">Bloom Factor:</font>
|
||||
<input name = "ma-bloom" id = "ma-bloom" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="100" max="900" value="100" class="uiMaterialAssistant-slider" name = "ma-bloom-slider" id = "ma-bloom-slider"><br>
|
||||
<font class="uiMaterialAssistant-label">Emissive Map (RGB) URL:</font>
|
||||
<input name = "ma-emissiveMap" id = "ma-emissiveMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;">
|
||||
|
||||
<div class="uiMaterialAssistant-group" id="maContainerMetallic">
|
||||
<button class="uiMaterialAssistant-active" id="ma-metallic-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Metallic: </font>
|
||||
<input class="uiMaterialAssistant-input" name = "ma-metallic" id = "ma-metallic" readonly type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="1" max="1000" value="1" class="uiMaterialAssistant-slider" name = "ma-metallic-slider" id = "ma-metallic-slider"><br>
|
||||
<div style="width: 100%; display: flex;">
|
||||
<div style="width: 15%; text-align: left;"><font class = "uiMaterialAssistant-Explain">|< Nonmetal</font></div>
|
||||
<div style="width: 15%; text-align: left;"><font class = "uiMaterialAssistant-Explain">| Hair</font></div>
|
||||
<div style="width: 60%; text-align: left;"><font class = "uiMaterialAssistant-Explain">| Chitin</font></div>
|
||||
<div style="width: 10%; text-align: right;"><font class = "uiMaterialAssistant-Explain">Metal >|</font></div>
|
||||
</div><br>
|
||||
<font class="uiMaterialAssistant-label">Metallic Map (Red channel) URL: </font>
|
||||
<input name = "ma-metallicMap" id = "ma-metallicMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;">
|
||||
<div style="display: flex;">
|
||||
<div style="text-align: left;"><input type="checkbox" class="uiMaterialAssistant-checkbox" name = "ma-useSpecular" id = "ma-useSpecular"></div>
|
||||
<div style="text-align: left; padding: 3px;"><font class="uiMaterialAssistant-label"> Instead, use Specular Map </font></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group" id="maContainerRoughness">
|
||||
<button class="uiMaterialAssistant-active" id="ma-roughness-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Roughness:</font>
|
||||
<input name = "ma-roughness" id = "ma-roughness" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="0" max="1000" value="0" class="uiMaterialAssistant-slider" name = "ma-roughness-slider" id = "ma-roughness-slider"><br>
|
||||
<div style="width: 100%; display: flex;">
|
||||
<div style="width: 50%; text-align: left;"><font class = "uiMaterialAssistant-Explain">|< Glossy, polished, lustrous</font></div>
|
||||
<div style="width: 50%; text-align: right;"><font class = "uiMaterialAssistant-Explain">Unpolished, mat, rough >|</font></div>
|
||||
</div><br>
|
||||
<font class="uiMaterialAssistant-label">Roughness Map (Red channel) URL: </font>
|
||||
<input name = "ma-roughnessMap" id = "ma-roughnessMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;">
|
||||
<div style="display: flex;">
|
||||
<div style="text-align: left;"><input type="checkbox" class="uiMaterialAssistant-checkbox" name = "ma-useGloss" id = "ma-useGloss"></div>
|
||||
<div style="text-align: left; padding: 3px;"><font class="uiMaterialAssistant-label"> Instead, use Gloss Map </font></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group" id="maContainerNormalMap">
|
||||
<button class="uiMaterialAssistant-active" id="ma-normalMap-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Normal Map URL: </font>
|
||||
<input name = "ma-normalMap" id = "ma-normalMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;">
|
||||
<div style="display: flex;">
|
||||
<div style="text-align: left;"><input type="checkbox" class="uiMaterialAssistant-checkbox" name = "ma-useBump" id = "ma-useBump"></div>
|
||||
<div style="text-align: left; padding: 3px;"><font class="uiMaterialAssistant-label"> Instead, use Bump Map </font></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<div id="maContainerOpacity">
|
||||
<button class="uiMaterialAssistant-active" id="ma-opacity-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Opacity: </font>
|
||||
<input name = "ma-opacity" id = "ma-opacity" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="0" max="1000" value="0" class="uiMaterialAssistant-slider" name = "ma-opacity-slider" id = "ma-opacity-slider"><br>
|
||||
<div style="width: 100%; display: flex;">
|
||||
<div style="width: 50%; text-align: left;"><font class = "uiMaterialAssistant-Explain">|< Transparent</font></div>
|
||||
<div style="width: 50%; text-align: right;"><font class = "uiMaterialAssistant-Explain">Opaque >|</font></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div id="maContainerOpacityMap">
|
||||
<font class="uiMaterialAssistant-label">Opacity Map Mode:</font><br><br>
|
||||
<input type="radio" class="uiMaterialAssistant-radio" checked name = "ma-opacityMapMode" id = "ma-opacityMapMode-dont" value = "OPACITY_MAP_OPAQUE"> Not used
|
||||
<input type="radio" class="uiMaterialAssistant-radio" name = "ma-opacityMapMode" id = "ma-opacityMapMode-mask" value = "OPACITY_MAP_MASK"> Cut off mask
|
||||
<input type="radio" class="uiMaterialAssistant-radio" name = "ma-opacityMapMode" id = "ma-opacityMapMode-blend" value = "OPACITY_MAP_BLEND"> Blend<br>
|
||||
<font class="uiMaterialAssistant-Explain"><br>Note: For an opacity map, the alpha layer of the Albedo Map will be used.<br>
|
||||
'Blend' mode will used the alpha value to determine the opacity of a pixel.<br>
|
||||
'Cut off mask' mode will use the 'Cut off threshold' to determine if a pixel will be opaque or transparent, based on the alpha value from the map.</font><br><br>
|
||||
<font class="uiMaterialAssistant-label">Cut Off Threshold: </font>
|
||||
<input name = "ma-opacityCutoff" id = "ma-opacityCutoff" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="0" max="1000" value="0" class="uiMaterialAssistant-slider" name = "ma-opacityCutoff-slider" id = "ma-opacityCutoff-slider"><br>
|
||||
<div style="width: 100%; display: flex;">
|
||||
<div style="width: 50%; text-align: left;"><font class = "uiMaterialAssistant-Explain">|< Transparent</font></div>
|
||||
<div style="width: 50%; text-align: right;"><font class = "uiMaterialAssistant-Explain">Opaque >|</font></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group" id = "maContainerEmissive">
|
||||
<div style="width: 100%; display: flex;">
|
||||
<div style="width: 65%; text-align: left;">
|
||||
<button class="uiMaterialAssistant-active" id="ma-emissive-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Emissive: </font>
|
||||
<div id="ma-emissive-colorPicker" class="uiMaterialAssistant-color-picker"></div>
|
||||
</div>
|
||||
<div style="width: 35%; text-align: left;">
|
||||
<div id = "maContainerUnlit">
|
||||
<div style="display: flex;">
|
||||
<div style="text-align: left;"><input type="checkbox" class="uiMaterialAssistant-checkbox" name = "ma-unlit" id = "ma-unlit"></div>
|
||||
<div style="text-align: left; padding: 3px;"><font class="uiMaterialAssistant-label"> Unlit</font></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<font class="uiMaterialAssistant-label">Bloom Factor:</font>
|
||||
<input name = "ma-bloom" id = "ma-bloom" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="100" max="900" value="100" class="uiMaterialAssistant-slider" name = "ma-bloom-slider" id = "ma-bloom-slider"><br>
|
||||
<div id = "maContainerEmissiveMap">
|
||||
<font class="uiMaterialAssistant-label">Emissive Map (RGB) URL:</font>
|
||||
<input name = "ma-emissiveMap" id = "ma-emissiveMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group" id="maContainerScattering">
|
||||
<button class="uiMaterialAssistant-active" id="ma-scattering-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Scattering: </font>
|
||||
<input name = "ma-scattering" id = "ma-scattering" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="0" max="1000" value="0" class="uiMaterialAssistant-slider" name = "ma-scattering-slider" id = "ma-scattering-slider"><br>
|
||||
<font class="uiMaterialAssistant-label">Scattering Map (Red channel) URL: </font>
|
||||
<input name = "ma-scatteringMap" id = "ma-scatteringMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;">
|
||||
<font class="uiMaterialAssistant-Explain">Scattering or Scattering Map won't be effective without the presence of a Normal/Bump Map.</font>
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group" id="maContainerOcclusionMap">
|
||||
<button class="uiMaterialAssistant-active" id="ma-occlusionMap-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Occlusion Map (Red channel) URL: </font>
|
||||
<input name = "ma-occlusionMap" id = "ma-occlusionMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;">
|
||||
<font class="uiMaterialAssistant-Explain">Note: 'Occlusion Map' and 'Light Map' are using a separated UV Map.</font>
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group" id="maContainerLightMap">
|
||||
<button class="uiMaterialAssistant-active" id="ma-lightMap-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Light Map (Red channel) URL: </font>
|
||||
<input name = "ma-lightMap" id = "ma-lightMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;">
|
||||
<font class="uiMaterialAssistant-Explain">Note: 'Light Map' and 'Occlusion Map' are using a separated UV Map.</font>
|
||||
</div>
|
||||
|
||||
<div id="maContainerMtoon">
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<button class="uiMaterialAssistant-active" id="ma-shade-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Shade (Color): </font>
|
||||
<div id="ma-shade-colorPicker" class="uiMaterialAssistant-color-picker"></div>
|
||||
<br><br>
|
||||
<button class="uiMaterialAssistant-active" id="ma-shadeMap-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Shade Map (RGB) URL: </font>
|
||||
<input name = "ma-shadeMap" id = "ma-shadeMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;"><br>
|
||||
<font class="uiMaterialAssistant-Explain">The Shade (Color) can be used to tint the texture of the Shade Map.</font>
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<button class="uiMaterialAssistant-active" id="ma-matcap-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Matcap (Color): </font>
|
||||
<div id="ma-matcap-colorPicker" class="uiMaterialAssistant-color-picker"></div>
|
||||
<br><br>
|
||||
<button class="uiMaterialAssistant-active" id="ma-matcapMap-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Matcap Map (RGB) URL: </font>
|
||||
<input name = "ma-matcapMap" id = "ma-matcapMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;"><br>
|
||||
<font class="uiMaterialAssistant-Explain">The Matcap (Color) can be used to tint the texture of the Matcap Map.</font>
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<button class="uiMaterialAssistant-active" id="ma-shadingShift-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Shading Shift: </font>
|
||||
<input name = "ma-shadingShift" id = "ma-shadingShift" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="0" max="1000" value="0" class="uiMaterialAssistant-slider" name = "ma-shadingShift-slider" id = "ma-shadingShift-slider">
|
||||
<br><br>
|
||||
<button class="uiMaterialAssistant-active" id="ma-shadingShiftMap-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Shading Shift Map (Red Channel) URL: </font>
|
||||
<input name = "ma-shadingShiftMap" id = "ma-shadingShiftMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;"><br>
|
||||
<font class="uiMaterialAssistant-Explain">The Shading Shift value can be used to multiply the effect of the Shading Shift Map. Shading Shift Map can be RGB texture, but it will only used the "red" channel.</font>
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<button class="uiMaterialAssistant-active" id="ma-shadingToony-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Shading Toony: </font>
|
||||
<input name = "ma-shadingToony" id = "ma-shadingToony" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="0" max="1000" value="0" class="uiMaterialAssistant-slider" name = "ma-shadingToony-slider" id = "ma-shadingToony-slider">
|
||||
<font class="uiMaterialAssistant-Explain"> </font>
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<button class="uiMaterialAssistant-active" id="ma-parametricRim-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Parametric Rim (Color): </font>
|
||||
<div id="ma-parametricRim-colorPicker" class="uiMaterialAssistant-color-picker"></div>
|
||||
<br><br>
|
||||
<button class="uiMaterialAssistant-active" id="ma-parametricRimFresnelPower-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Parametric Rim Fresnel Power: </font>
|
||||
<input name = "ma-parametricRimFresnelPower" id = "ma-parametricRimFresnelPower" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="0" max="20000" value="0" class="uiMaterialAssistant-slider" name = "ma-parametricRimFresnelPower-slider" id = "ma-parametricRimFresnelPower-slider">
|
||||
<font class="uiMaterialAssistant-Explain"> </font>
|
||||
<br><br>
|
||||
<button class="uiMaterialAssistant-active" id="ma-parametricRimLift-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Parametric Rim Lift Factor: </font>
|
||||
<input name = "ma-parametricRimLift" id = "ma-parametricRimLift" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="-10000" max="10000" value="0" class="uiMaterialAssistant-slider" name = "ma-parametricRimLift-slider" id = "ma-parametricRimLift-slider">
|
||||
<font class="uiMaterialAssistant-Explain"> </font>
|
||||
<br><br>
|
||||
<button class="uiMaterialAssistant-active" id="ma-rimMap-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Rim Map (RGB) URL: </font>
|
||||
<input name = "ma-rimMap" id = "ma-rimMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;"><br>
|
||||
<font class="uiMaterialAssistant-Explain"> </font>
|
||||
<br><br>
|
||||
<button class="uiMaterialAssistant-active" id="ma-rimLightingMix-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Rim Lighting Mix: </font>
|
||||
<input name = "ma-rimLightingMix" id = "ma-rimLightingMix" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="0" max="1000" value="0" class="uiMaterialAssistant-slider" name = "ma-rimLightingMix-slider" id = "ma-rimLightingMix-slider">
|
||||
<font class="uiMaterialAssistant-Explain">How much to mix between the rim color and normal lighting.</font>
|
||||
</div>
|
||||
<!-- ############ Not supported yet, but the code is ready (commented) ##########################################################
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<button class="uiMaterialAssistant-active" id="ma-outlineWidthMode-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Outline Width Mode : </font><br><br>
|
||||
<input type="radio" class="uiMaterialAssistant-radio" checked name = "ma-outlineWidthMode" id = "ma-outlineWidthMode-none" value = "none"> None
|
||||
<input type="radio" class="uiMaterialAssistant-radio" name = "ma-outlineWidthMode" id = "ma-outlineWidthMode-world" value = "worldCoordinates"> World Coordinates
|
||||
<input type="radio" class="uiMaterialAssistant-radio" name = "ma-outlineWidthMode" id = "ma-outlineWidthMode-screen" value = "screenCoordinates"> Screen Coordinates<br>
|
||||
<font class="uiMaterialAssistant-Explain">'World Coordinates' will render an outline with a constant world size, i.e. its apparent size depends on distance.
|
||||
'Screen Coordinates' will render an outline with a constant screen size, i.e. its apparent size remains constant.</font>
|
||||
<br><br>
|
||||
<button class="uiMaterialAssistant-active" id="ma-outlineWidth-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Outline Width: </font>
|
||||
<input name = "ma-outlineWidth" id = "ma-outlineWidth" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="0" max="1000" value="0" class="uiMaterialAssistant-slider" name = "ma-outlineWidth-slider" id = "ma-outlineWidth-slider">
|
||||
<font class="uiMaterialAssistant-Explain">The width of the outline, in meters if the mode is 'World Coordinates', or a ratio of the screen height if the Mode is 'Screen Coordinates'.</font>
|
||||
<br><br>
|
||||
<button class="uiMaterialAssistant-active" id="ma-outline-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Outline (Color): </font>
|
||||
<div id="ma-outline-colorPicker" class="uiMaterialAssistant-color-picker"></div>
|
||||
</div>
|
||||
############################################################################################################ -->
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<button class="uiMaterialAssistant-active" id="ma-uvAnimationMaskMap-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">UV Animation Mask Map (Blue Channel) URL: </font>
|
||||
<input name = "ma-uvAnimationMaskMap" id = "ma-uvAnimationMaskMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;"><br>
|
||||
<font class="uiMaterialAssistant-Explain">UV Animation Mask Map can be RGB texture, but it will only used the "blue" channel.</font>
|
||||
<br><br>
|
||||
<button class="uiMaterialAssistant-active" id="ma-uvAnimationScrollXSpeed-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">UV Animation Scroll X Speed: </font>
|
||||
<input name = "ma-uvAnimationScrollXSpeed" id = "ma-uvAnimationScrollXSpeed" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="-3000" max="3000" value="0" class="uiMaterialAssistant-slider" name = "ma-uvAnimationScrollXSpeed-slider" id = "ma-uvAnimationScrollXSpeed-slider">
|
||||
<font class="uiMaterialAssistant-Explain">The speed of the UV scrolling animation in the X dimension, in UV units per second.</font>
|
||||
<br><br>
|
||||
<button class="uiMaterialAssistant-active" id="ma-uvAnimationScrollYSpeed-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">UV Animation Scroll Y Speed: </font>
|
||||
<input name = "ma-uvAnimationScrollYSpeed" id = "ma-uvAnimationScrollYSpeed" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="-3000" max="3000" value="0" class="uiMaterialAssistant-slider" name = "ma-uvAnimationScrollYSpeed-slider" id = "ma-uvAnimationScrollYSpeed-slider">
|
||||
<font class="uiMaterialAssistant-Explain">The speed of the UV scrolling animation in the Y dimension, in UV units per second.</font>
|
||||
<br><br>
|
||||
<button class="uiMaterialAssistant-active" id="ma-uvAnimationRotationSpeed-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">UV Animation Rotation Speed: </font>
|
||||
<input name = "ma-uvAnimationRotationSpeed" id = "ma-uvAnimationRotationSpeed" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="-10000" max="10000" value="0" class="uiMaterialAssistant-slider" name = "ma-uvAnimationRotationSpeed-slider" id = "ma-uvAnimationRotationSpeed-slider">
|
||||
<font class="uiMaterialAssistant-Explain">The speed of the UV scrolling rotation around the center (0.5 UV, 0.5 UV), in radians per second.</font>
|
||||
</div>
|
||||
</div>
|
||||
<div id="maContainerShaderSimple">
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<font class="uiMaterialAssistant-label">Procedural (json): </font>
|
||||
<button class="uiMaterialAssistant-smallButton" id= "ma-addProceduralTemplate">Use Basic Template</button>
|
||||
<textarea name = "ma-procedural" id = "ma-procedural" class="uiMaterialAssistant-textarea"></textarea><br>
|
||||
<font class="uiMaterialAssistant-Explain"> </font>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<font class="uiMaterialAssistant-label">Material displayed on surface: </font><br><br>
|
||||
<input type="radio" class="uiMaterialAssistant-radio" checked name = "ma-cullFaceMode" id = "ma-cullFaceMode-back" value = "CULL_BACK"> Outside
|
||||
<input type="radio" class="uiMaterialAssistant-radio" name = "ma-cullFaceMode" id = "ma-cullFaceMode-front" value = "CULL_FRONT"> Inside
|
||||
<input type="radio" class="uiMaterialAssistant-radio" name = "ma-cullFaceMode" id = "ma-cullFaceMode-none" value = "CULL_NONE"> Both<br>
|
||||
</div>
|
||||
<br><br><br><br><br>
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<button class="uiMaterialAssistant-active" id="ma-scattering-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Scattering: </font>
|
||||
<input name = "ma-scattering" id = "ma-scattering" readonly class="uiMaterialAssistant-input" type = "text" size = "5"><br>
|
||||
<input type="range" style="width:100%;" min="0" max="1000" value="0" class="uiMaterialAssistant-slider" name = "ma-scattering-slider" id = "ma-scattering-slider"><br>
|
||||
<font class="uiMaterialAssistant-label">Scattering Map (Grayscale) URL: </font>
|
||||
<input name = "ma-scatteringMap" id = "ma-scatteringMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;">
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<button class="uiMaterialAssistant-active" id="ma-occlusionMap-isActive"></button>
|
||||
<font class="uiMaterialAssistant-label">Occlusion Map (Grayscale) URL: </font>
|
||||
<input name = "ma-occlusionMap" id = "ma-occlusionMap" class="uiMaterialAssistant-input" type = "text" style= "width:100%;">
|
||||
</div>
|
||||
|
||||
<div class="uiMaterialAssistant-group">
|
||||
<font class="uiMaterialAssistant-label">Material displayed on surface: </font><br><br>
|
||||
<input type="radio" class="uiMaterialAssistant-radio" checked name = "ma-cullFaceMode" id = "ma-cullFaceMode-back" value = "CULL_BACK"> Outside
|
||||
<input type="radio" class="uiMaterialAssistant-radio" name = "ma-cullFaceMode" id = "ma-cullFaceMode-front" value = "CULL_FRONT"> Inside
|
||||
<input type="radio" class="uiMaterialAssistant-radio" name = "ma-cullFaceMode" id = "ma-cullFaceMode-none" value = "CULL_NONE"> Both<br>
|
||||
</div>
|
||||
<br><br><br><br><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1841,6 +1841,7 @@ let createAppTooltip = new CreateAppTooltip();
|
|||
let currentSpaceMode = PROPERTY_SPACE_MODE.LOCAL;
|
||||
let zonesList = [];
|
||||
let canViewAssetURLs = false;
|
||||
let maSelectedId;
|
||||
|
||||
function createElementFromHTML(htmlString) {
|
||||
let elTemplate = document.createElement('template');
|
||||
|
|
@ -3613,10 +3614,9 @@ function saveMaterialData() {
|
|||
|
||||
function openMaterialAssistant() {
|
||||
if (materialEditor === null) {
|
||||
loadDataInMaUi({});
|
||||
} else {
|
||||
loadDataInMaUi(materialEditor.getText());
|
||||
newJSONMaterialEditor();
|
||||
}
|
||||
loadDataInMaUi(materialEditor.getText());
|
||||
$('#uiMaterialAssistant').show();
|
||||
$('#properties-list').hide();
|
||||
}
|
||||
|
|
@ -4177,7 +4177,16 @@ function handleEntitySelectionUpdate(selections, isPropertiesToolUpdate) {
|
|||
const multipleSelections = currentSelections.length > 1;
|
||||
const hasSelectedEntityChanged = !areSetsEqual(selectedEntityIDs, previouslySelectedEntityIDs);
|
||||
|
||||
closeMaterialAssistant();
|
||||
if (selections.length === 1) {
|
||||
if (maSelectedId !== selections[0].id) {
|
||||
closeMaterialAssistant();
|
||||
}
|
||||
maSelectedId = selections[0].id;
|
||||
} else {
|
||||
closeMaterialAssistant();
|
||||
maSelectedId = "";
|
||||
}
|
||||
|
||||
requestZoneList();
|
||||
|
||||
if (selections.length === 0) {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -3,7 +3,7 @@
|
|||
//
|
||||
// Created by Alezia Kurdis on May 17th, 2022.
|
||||
// Copyright 2022 Vircadia contributors.
|
||||
// Copyright 2022 Overte e.V.
|
||||
// Copyright 2022-2024 Overte e.V.
|
||||
//
|
||||
// Distributed under the Apache License, Version 2.0.
|
||||
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||
|
|
@ -22,7 +22,12 @@
|
|||
background-color: #404040;
|
||||
z-index: 2;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#uiMaterialAssistant-scrollable {
|
||||
border-collapse: collapse;
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#uiMaterialAssistant-headerContainer {
|
||||
|
|
@ -80,12 +85,21 @@ font.uiMaterialAssistant-label{
|
|||
color: #D2D2D2;
|
||||
}
|
||||
|
||||
label.uiMaterialAssistant-label{
|
||||
background-color: #2E2E2E;
|
||||
font-family: Raleway-SemiBold;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
color: #D2D2D2;
|
||||
}
|
||||
|
||||
font.uiMaterialAssistant-title{
|
||||
background-color: #404040;
|
||||
font-family: Raleway-Bold;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
color: #F2F2F2;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
input[type=range].uiMaterialAssistant-slider {
|
||||
|
|
@ -151,6 +165,18 @@ input[type=text].uiMaterialAssistant-input {
|
|||
color: #000000;
|
||||
}
|
||||
|
||||
textarea.uiMaterialAssistant-textarea {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #000000;
|
||||
font-family: FiraSans-SemiBold;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
padding: 3px;
|
||||
margin: 3px 0px 3px 0px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
input[type=text].uiMaterialAssistant-input:disabled {
|
||||
background-color: #555555;
|
||||
color: #888888;
|
||||
|
|
@ -171,8 +197,8 @@ input[type=checkbox].uiMaterialAssistant-checkbox {
|
|||
height: 16px;
|
||||
margin: 2px;
|
||||
padding: 3px;
|
||||
display: block;
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=checkbox].uiMaterialAssistant-checkbox:focus {
|
||||
|
|
@ -221,3 +247,30 @@ div.uiMaterialAssistant-color-picker {
|
|||
width: 120px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
button.uiMaterialAssistant-smallButton {
|
||||
font-family: Raleway-Regular;
|
||||
font-size: 12px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
color: #cccccc;
|
||||
background-color: #000000;
|
||||
background: linear-gradient(#575757 20%, #000000 100%);
|
||||
cursor: pointer;
|
||||
padding: 3px 10px 3px 10px;
|
||||
}
|
||||
|
||||
button.uiMaterialAssistant-smallButton:hover {
|
||||
background: linear-gradient(#383838, #000000);
|
||||
color: #eeeeee;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button.uiMaterialAssistant-smallButton:disabled {
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
button.uiMaterialAssistant-smallButton:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue