toggle css class fix / pbrmaterial double sided

cables-gl · Sep 5, 2024 · b59b5d2 · b59b5d2
1 parent c410ed4
commit b59b5d2
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 22 deletions.
diff --git a/src/ops/base/Ops.Gl.Pbr.PbrMaterial/Ops.Gl.Pbr.PbrMaterial.js b/src/ops/base/Ops.Gl.Pbr.PbrMaterial/Ops.Gl.Pbr.PbrMaterial.js
@@ -38,6 +38,7 @@ const inUseVertexColours = op.inValueBool("Use Vertex Colours", false);
 const inVertexColourMode = op.inSwitch("Vertex Colour Mode", ["colour", "AORM", "AO", "R", "M", "lightmap"], "colour");
 const inHeightDepth = op.inFloat("Height Intensity", 1.0);
 const inUseOptimizedHeight = op.inValueBool("Faster heightmapping", false);
+const inDoubleSided = op.inValueBool("Double Sided", false);
 
 // texture inputs
 const inTexIBLLUT = op.inTexture("IBL LUT");
@@ -70,7 +71,7 @@ op.toWorkShouldNotBeChild("Ops.Gl.TextureEffects.ImageCompose", CABLES.OP_PORT_T
 
 inDiffuseR.setUiAttribs({ "colorPick": true });
 op.setPortGroup("Shader Parameters", [inRoughness, inMetalness, inAlphaMode]);
-op.setPortGroup("Advanced Shader Parameters", [inEmissionIntensity, inToggleGR, inToggleNMGR, inUseVertexColours, inVertexColourMode, inHeightDepth, inUseOptimizedHeight]);
+op.setPortGroup("Advanced Shader Parameters", [inEmissionIntensity, inToggleGR, inToggleNMGR, inUseVertexColours, inVertexColourMode, inHeightDepth, inUseOptimizedHeight, inDoubleSided]);
 op.setPortGroup("Textures", [inTexAlbedo, inTexAORM, inTexNormal, inTexEmission, inTexHeight, inLightmap, inTexThinFilm]);
 op.setPortGroup("Lighting", [inDiffuseIntensity, inSpecularIntensity, inLightmapIntensity, inLightmapRGBE, inTexIBLLUT, inTexIrradiance, inTexPrefiltered, inMipLevels]);
 op.setPortGroup("Tonemapping", [inTonemapping, inTonemappingExposure]);
@@ -180,6 +181,7 @@ PBRShader.uniformPbrRoughness = inRoughnessUniform;
 inTexPrefiltered.onChange = updateIBLTexDefines;
 
 inTexAORM.onChange =
+    inDoubleSided.onChange =
     inLightmapRGBE.onChange =
     inUseNormalMapForCC.onChange =
     inUseClearCoat.onChange =
@@ -201,6 +203,7 @@ inTexAORM.onChange =
 
 function updateDefines()
 {
+    PBRShader.toggleDefine("DOUBLE_SIDED", inDoubleSided.get());
     PBRShader.toggleDefine("USE_OPTIMIZED_HEIGHT", inUseOptimizedHeight.get());
     PBRShader.toggleDefine("USE_CLEAR_COAT", inUseClearCoat.get());
     PBRShader.toggleDefine("USE_NORMAL_MAP_FOR_CC", inUseNormalMapForCC.get());

diff --git a/src/ops/base/Ops.Gl.Pbr.PbrMaterial/Ops.Gl.Pbr.PbrMaterial.json b/src/ops/base/Ops.Gl.Pbr.PbrMaterial/Ops.Gl.Pbr.PbrMaterial.json
@@ -4,12 +4,14 @@
         {
             "message": "created op",
             "author": "amajesticseaflapflap",
-            "date": 1642599258807
+            "date": 1642599258807,
+            "type": "new"
         },
         {
-            "message": "Ops.Dev.PbrMaterial renamed to Ops.Gl.Pbr.PbrMaterial",
+            "message": "Added toggle for double sided, which will flip normals when the face is not front-facing ",
+            "type": "feature",
             "author": "pandur",
-            "date": 1644228803318
+            "date": 1725553568070
         }
     ],
     "layout": {
@@ -199,6 +201,12 @@
                 "group": "Advanced Shader Parameters",
                 "subType": "boolean"
             },
+            {
+                "type": 0,
+                "name": "Double Sided",
+                "group": "Advanced Shader Parameters",
+                "subType": "boolean"
+            },
             {
                 "type": 2,
                 "name": "IBL LUT",

diff --git a/src/ops/base/Ops.Gl.Pbr.PbrMaterial/att_BasicPBR.frag b/src/ops/base/Ops.Gl.Pbr.PbrMaterial/att_BasicPBR.frag
@@ -429,6 +429,11 @@ void main()
         internalNormals      = normalize(TBN * internalNormals);
     #else
         vec3 internalNormals = normM;
+
+        #ifdef DOUBLE_SIDED
+            if(!gl_FrontFacing) internalNormals = internalNormals*-1.0;
+        #endif
+
     #endif
 	#ifdef USE_LIGHTMAP
     	#ifndef VERTEX_COLORS

diff --git a/src/ops/base/Ops.Sidebar.Toggle_v4/Ops.Sidebar.Toggle_v4.js b/src/ops/base/Ops.Sidebar.Toggle_v4/Ops.Sidebar.Toggle_v4.js
@@ -29,16 +29,6 @@ label.appendChild(labelText);
 
 const icon = document.createElement("div");
 
-if (defaultValuePort.get())
-{
-    icon.classList.remove("icon_toggle_false");
-    icon.classList.add("icon_toggle_true");
-}
-else
-{
-    icon.classList.remove("icon_toggle_true");
-    icon.classList.add("icon_toggle_false");
-}
 valuePort.set(defaultValuePort.get());
 
 icon.classList.add("icon_toggle");
@@ -53,7 +43,11 @@ el.appendChild(icon);
 el.appendChild(label);
 el.addEventListener("dblclick", reset);
 
-op.init = reset;
+op.init = () =>
+{
+    reset();
+    updateClass();
+};
 op.onDelete = onDelete;
 parentPort.onChange = onParentChanged;
 labelPort.onChange = onLabelTextChanged;
@@ -77,14 +71,9 @@ function storeDefaultValue()
     op.refreshParams();
 }
 
-function onInputClick()
+function updateClass()
 {
-    el.classList.toggle(classNameActive);
-
-    const isActive = el.classList.contains(classNameActive);
-    valuePort.set(isActive);
-    inputValue.set(isActive);
-
+    const isActive = valuePort.get();
     if (isActive)
     {
         icon.classList.add("icon_toggle_true");
@@ -95,7 +84,17 @@ function onInputClick()
         icon.classList.remove("icon_toggle_true");
         icon.classList.add("icon_toggle_false");
     }
+}
+
+function onInputClick()
+{
+    el.classList.toggle(classNameActive);
+
+    const isActive = el.classList.contains(classNameActive);
+    valuePort.set(isActive);
+    inputValue.set(isActive);
 
+    updateClass();
     outToggled.trigger();
     op.refreshParams();
 }

diff --git a/src/ops/base/Ops.Sidebar.Toggle_v4/Ops.Sidebar.Toggle_v4.json b/src/ops/base/Ops.Sidebar.Toggle_v4/Ops.Sidebar.Toggle_v4.json
@@ -75,6 +75,12 @@
             "type": "improvement",
             "author": "pandur",
             "date": 1715693416129
+        },
+        {
+            "message": "CSS classes are applied correctly now on init",
+            "type": "improvement",
+            "author": "pandur",
+            "date": 1725551784635
         }
     ],
     "license": "MIT",