From 15a6bf00b256314509a383e15b57312d21912c0e Mon Sep 17 00:00:00 2001
From: Alezia Kurdis <60075796+AleziaKurdis@users.noreply.github.com>
Date: Wed, 10 Mar 2021 00:23:22 -0500
Subject: [PATCH] Add opacityMapMode and opacityCutOff

This support now:

 opacityMapMode and opacityCutOff
---
 .../materialDataCreator.html                  | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/applications/materialDataCreator/materialDataCreator.html b/applications/materialDataCreator/materialDataCreator.html
index 5f3b932..e0a9c52 100644
--- a/applications/materialDataCreator/materialDataCreator.html
+++ b/applications/materialDataCreator/materialDataCreator.html
@@ -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>