mirror of
https://github.com/lubosz/overte.git
synced 2025-04-06 10:22:26 +02:00
448250883a
Ui Adjustment:
- UV Animation scroll speed X and Y is now -3 to 3
- MToon and Shader (Simple) (instead of MTOON and SHARDER (Simple))
- Opacity mode: "Not used" instead of "Do not used" ("Do not use" would be also wrong as it means more "Don't even think to touch it" ranther than "currently not using it")
365 lines
34 KiB
HTML
365 lines
34 KiB
HTML
<!--
|
|
//
|
|
// entityProperties.html
|
|
//
|
|
// Created by Ryan Huffman on 13 Nov 2014
|
|
// Copyright 2014 High Fidelity, Inc.
|
|
// Copyright 2020 Vircadia contributors.
|
|
// 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
|
|
//
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title>Properties</title>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
|
<link rel="stylesheet" type="text/css" href="../../../html/css/edit-style.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../html/css/colpick.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../html/css/jsoneditor.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../html/css/tabs.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../html/css/materialAssistant.css">
|
|
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
|
|
<script src="../../../html/js/jquery-2.1.4.min.js"></script>
|
|
<script type="text/javascript" src="../../../html/js/colpick.js"></script>
|
|
<script type="text/javascript" src="../../../html/js/jsoneditor.min.js"></script>
|
|
<script type="text/javascript" src="../../../html/js/eventBridgeLoader.js"></script>
|
|
<script type="text/javascript" src="../../../html/js/spinButtons.js"></script>
|
|
<script type="text/javascript" src="../../../html/js/utils.js"></script>
|
|
<script type="text/javascript" src="../../../html/js/includes.js"></script>
|
|
<script type="text/javascript" src="js/underscore-min.js"></script>
|
|
<script type="text/javascript" src="js/createAppTooltip.js"></script>
|
|
<script type="text/javascript" src="js/draggableNumber.js"></script>
|
|
<script type="text/javascript" src="js/entityProperties.js"></script>
|
|
<script type="text/javascript" src="js/materialAssistant.js"></script>
|
|
</head>
|
|
<body onload='loaded();'>
|
|
<div id="properties-list">
|
|
<div class='property container'>
|
|
<label id='placeholder-property-type'></label>
|
|
<div class='value'>
|
|
<div class='row flex-center' style='padding-bottom: 8px;'>
|
|
<div id="placeholder-property-name" class="stretch"></div>
|
|
<div id="placeholder-property-locked" class="shrink"></div>
|
|
<div id="placeholder-property-visible" class="shrink"></div>
|
|
</div>
|
|
<div class='row'>
|
|
<div id="placeholder-property-id" class="stretch"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<table class="tabsTableFrame">
|
|
<tr class="tabsTrFrame">
|
|
<td class = "tabsFrame">
|
|
<div id="tabs" class="tabsContainer"></div>
|
|
</td>
|
|
<td class="tabsPropertiesFrame">
|
|
<div class="tabsPropertiesPage" id="properties-pages">
|
|
<!-- each property is added at runtime in entityProperties -->
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id="uiMaterialAssistant" style="display: none;">
|
|
<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>
|
|
|
|
<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 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>
|
|
<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>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
initiateMaUi();
|
|
</script>
|
|
</body>
|
|
</html>
|