Add opacityMapMode and opacityCutOff

This support now:

 opacityMapMode and opacityCutOff
This commit is contained in:
Alezia Kurdis 2021-03-10 00:23:22 -05:00 committed by GitHub
parent 4dbf9779e9
commit 15a6bf00b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -129,6 +129,7 @@
"roughnessMap": "",
"normalMap": "",
"opacityMap": "DO NOT USE",
"opacityCutoff": 0.5,
"emissiveMap": "",
"scatteringMap": "",
"occlusionMap": "",
@ -152,6 +153,7 @@
"roughnessMap": "",
"normalMap": "",
"opacityMap": "DO NOT USE",
"opacityCutoff": 0.5,
"emissiveMap": "",
"scatteringMap": "",
"occlusionMap": "",
@ -178,6 +180,7 @@
document.materialEditor.roughnessMap.value = "";
document.materialEditor.normalMap.value = "";
document.materialEditor.opacityMap.value = "DO NOT USE";
document.materialEditor.opacityCutoff.value = 0.5;
document.materialEditor.emissiveMap.value = "";
document.materialEditor.scatteringMap.value = "";
document.materialEditor.occlusionMap.value = "";
@ -210,6 +213,8 @@
document.materialEditor.roughnessMap.value = material.roughnessMap;
document.materialEditor.normalMap.value = material.normalMap;
document.materialEditor.opacityMap.value = material.opacityMap;
document.materialEditor.opacityCutoff.value = material.opacityCutoff * 1000;
document.materialEditor.opacityCutoff_value.value = material.opacityCutoff;
document.materialEditor.emissiveMap.value = material.emissiveMap;
document.materialEditor.scatteringMap.value = material.scatteringMap;
document.materialEditor.occlusionMap.value = material.occlusionMap;
@ -218,7 +223,7 @@
}
function save( attribute, valueContainer) {
if (attribute === "metallic" || attribute === "roughness" || attribute === "opacity" || attribute === "scattering" ) {
if (attribute === "metallic" || attribute === "roughness" || attribute === "opacity" || attribute === "opacityCutoff" || attribute === "scattering" ) {
material[attribute] = valueContainer.value/1000;
} else {
if (attribute === "bloom") {
@ -235,6 +240,7 @@
document.materialEditor.metallic_value.value = (document.materialEditor.metallic.value/1000);
document.materialEditor.roughness_value.value = (document.materialEditor.roughness.value/1000);
document.materialEditor.opacity_value.value = (document.materialEditor.opacity.value/1000);
document.materialEditor.opacityCutoff_value.value = (document.materialEditor.opacityCutoff.value/1000);
document.materialEditor.bloom_value.value = (document.materialEditor.bloom.value/100);
document.materialEditor.scattering_value.value = (document.materialEditor.scattering.value/1000);
@ -277,7 +283,7 @@
if (material.roughnessMap === "") {
materialData += ' "roughness": ' + material.roughness + ',' + "\n";
}
if (material.opacityMap !== "USE") {
if (material.opacityMap === "DO NOT USE") {
materialData += ' "opacity": ' + material.opacity + ',' + "\n";
}
materialData += ' "emissive": ' + hexToRgb(material.emissive, material.bloom) + ',' + "\n";
@ -297,8 +303,12 @@
if (material.roughnessMap !== "") {
materialData += ' "roughnessMap": "' + material.roughnessMap.escapeJSON() + '",' + "\n";
}
if (material.opacityMap === "USE") {
if (material.opacityMap === "OPACITY_MAP_MASK" || material.opacityMap === "OPACITY_MAP_BLEND") {
materialData += ' "opacityMap": "' + material.albedoMap.escapeJSON() + '",' + "\n";
materialData += ' "opacityMapMode": "' + material.opacityMap + '",' + "\n";
if (material.opacityMap === "OPACITY_MAP_MASK") {
materialData += ' "opacityCutoff": ' + material.opacityCutoff + ',' + "\n";
}
}
if (material.emissiveMap !== "") {
materialData += ' "emissiveMap": "' + material.emissiveMap.escapeJSON() + '",' + "\n";
@ -471,9 +481,16 @@
<font class='label'>Opacity:</font> <input name = 'opacity_value' readonly type = 'text' size = '5'><br>
<input type="range" style="width:100%;" min="0" max="1000" value="0" class="slider" name = 'opacity' id = 'opacity' oninput="save('opacity', this); document.materialEditor.opacity_value.value = (document.materialEditor.opacity.value/1000);"><br>
<table style='width:100%'><tr><td style='width: 50%; text-align: left;'><font class = 'Explain'>|&lt; Transparent</font></td><td style='width: 50%; text-align: right;'><font class = 'Explain'>Opaque &gt;|</font></td></tr></table>
<font class='label'>Opacity Map: </font> <input type="radio" checked name = 'opacityMap' value = 'DO NOT USE' oninput="save('opacityMap', this);">Do not used&nbsp;&nbsp;&nbsp;
<input type="radio" name = 'opacityMap' value = 'USE' oninput="save('opacityMap', this);">Use<br>
<font class='Explain'>Note: For an opacity map, the alpha layer of the Albedo Map must be used. ( &lt; 2% and > 98% are supported, otherwise the average will be applied to all the surface. )</font>
<br>
<font class='label'>Opacity Map Mode:</font><br>
<input type="radio" checked name = 'opacityMap' value = 'DO NOT USE' oninput="save('opacityMap', this);">Do not used&nbsp;&nbsp;&nbsp;
<input type="radio" name = 'opacityMap' value = 'OPACITY_MAP_MASK' oninput="save('opacityMap', this);">Cut off mask&nbsp;&nbsp;&nbsp;
<input type="radio" name = 'opacityMap' value = 'OPACITY_MAP_BLEND' oninput="save('opacityMap', this);">Blend<br>
<font class='Explain'>Note: For an opacity map, the alpha layer of the Albedo Map will be used. 'Blend' mode will used the alpha value to determine the opacity of a pixel. 'Cut off mask' mode will use the 'Cut off threshold' to determine if a pixel from will be opaque or transparent, based on the alpha value from the map.</font><br><br>
<font class='label'>Cut Off Threshold:</font> <input name = 'opacityCutoff_value' readonly type = 'text' size = '5'><br>
<input type="range" style="width:100%;" min="0" max="1000" value="0" class="slider" name = 'opacityCutoff' id = 'opacityCutoff' oninput="save('opacityCutoff', this); document.materialEditor.opacityCutoff_value.value = (document.materialEditor.opacityCutoff.value/1000);"><br>
<table style='width:100%'><tr><td style='width: 50%; text-align: left;'><font class = 'Explain'>|&lt; Transparent</font></td><td style='width: 50%; text-align: right;'><font class = 'Explain'>Opaque &gt;|</font></td></tr></table>
</div>
<div class='group'>
@ -499,7 +516,7 @@
<div class='group'>
<font class='label'>Material displayed on surface: </font><br>
<input type="radio" checked name = 'cullFaceMode' value = 'CULL_BACK' oninput="save('cullFaceMode', this);">Outside&nbsp;&nbsp;&nbsp;
<input type="radio" checked name = 'cullFaceMode' value = 'CULL_FRONT' oninput="save('cullFaceMode', this);">Inside&nbsp;&nbsp;&nbsp;
<input type="radio" name = 'cullFaceMode' value = 'CULL_FRONT' oninput="save('cullFaceMode', this);">Inside&nbsp;&nbsp;&nbsp;
<input type="radio" name = 'cullFaceMode' value = 'CULL_NONE' oninput="save('cullFaceMode', this);">Both<br>
</div>