@liveroom-tech/react-immersive 1.3.2 → 1.3.3

package/dist/index.d.mts

@@ -275,6 +275,7 @@ type ScenePostProcessingConfig = {
         rampEnd: [number, number];
         startColor: string;
         endColor: string;
+        opacity?: number;
         rampBias: number;
         rampGain: number;
         rampMask: boolean;

package/dist/index.d.ts

@@ -275,6 +275,7 @@ type ScenePostProcessingConfig = {
         rampEnd: [number, number];
         startColor: string;
         endColor: string;
+        opacity?: number;
         rampBias: number;
         rampGain: number;
         rampMask: boolean;

package/dist/index.js

@@ -637,6 +637,7 @@ var DEFAULT_SCENE_POST_PROCESSING_CONFIG = {
     rampEnd: [1, 1],
     startColor: "#000000",
     endColor: "#ffffff",
+    opacity: 0.5,
     rampBias: 0.5,
     rampGain: 0.5,
     rampMask: false,
@@ -1474,7 +1475,10 @@ function PostProcessingEffects({
             }
           ),
           pp.pixelation.enabled === true && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_postprocessing5.Pixelation, { granularity: pp.pixelation.granularity }),
-          pp.ramp.enabled === true && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          pp.ramp.enabled === true && // Ramp's non-mask shader emits an opaque full-screen gradient.
+          // Blend it with the scene by default instead of replacing the
+          // model completely; mask mode already performs its own mix.
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             import_postprocessing5.Ramp,
             {
               rampType: rampTypeFromName(pp.ramp.rampType),
@@ -1482,6 +1486,7 @@ function PostProcessingEffects({
               rampEnd: pp.ramp.rampEnd,
               startColor: rampStartColor,
               endColor: rampEndColor,
+              opacity: pp.ramp.rampMask ? 1 : pp.ramp.opacity ?? 0.5,
               rampBias: pp.ramp.rampBias,
               rampGain: pp.ramp.rampGain,
               rampMask: pp.ramp.rampMask,
@@ -10315,7 +10320,7 @@ function RampSection({
     PPSection,
     {
       title: "Ramp",
-      tooltip: "Maps shading through a custom color ramp or gradient.",
+      tooltip: "Adds a screen-space color gradient, or masks effects earlier in the stack.",
       open: open.ramp,
       onToggle: () => toggle("ramp"),
       disabled: !ramp.enabled,
@@ -10375,6 +10380,17 @@ function RampSection({
             onChange: (v) => set("ramp", { ...ramp, endColor: v })
           }
         ),
+        !ramp.rampMask && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          SliderRow,
+          {
+            label: "Gradient Opacity",
+            value: ramp.opacity ?? 0.5,
+            min: 0,
+            max: 1,
+            step: 0.01,
+            onChange: (v) => set("ramp", { ...ramp, opacity: v })
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           SliderRow,
           {
@@ -10400,7 +10416,7 @@ function RampSection({
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           ToggleRow,
           {
-            label: "Mask",
+            label: "Mask Earlier Effects",
             checked: ramp.rampMask,
             onChange: (v) => set("ramp", { ...ramp, rampMask: v })
           }

package/dist/index.mjs

@@ -600,6 +600,7 @@ var DEFAULT_SCENE_POST_PROCESSING_CONFIG = {
     rampEnd: [1, 1],
     startColor: "#000000",
     endColor: "#ffffff",
+    opacity: 0.5,
     rampBias: 0.5,
     rampGain: 0.5,
     rampMask: false,
@@ -1467,7 +1468,10 @@ function PostProcessingEffects({
             }
           ),
           pp.pixelation.enabled === true && /* @__PURE__ */ jsx4(Pixelation, { granularity: pp.pixelation.granularity }),
-          pp.ramp.enabled === true && /* @__PURE__ */ jsx4(
+          pp.ramp.enabled === true && // Ramp's non-mask shader emits an opaque full-screen gradient.
+          // Blend it with the scene by default instead of replacing the
+          // model completely; mask mode already performs its own mix.
+          /* @__PURE__ */ jsx4(
             Ramp,
             {
               rampType: rampTypeFromName(pp.ramp.rampType),
@@ -1475,6 +1479,7 @@ function PostProcessingEffects({
               rampEnd: pp.ramp.rampEnd,
               startColor: rampStartColor,
               endColor: rampEndColor,
+              opacity: pp.ramp.rampMask ? 1 : pp.ramp.opacity ?? 0.5,
               rampBias: pp.ramp.rampBias,
               rampGain: pp.ramp.rampGain,
               rampMask: pp.ramp.rampMask,
@@ -10386,7 +10391,7 @@ function RampSection({
     PPSection,
     {
       title: "Ramp",
-      tooltip: "Maps shading through a custom color ramp or gradient.",
+      tooltip: "Adds a screen-space color gradient, or masks effects earlier in the stack.",
       open: open.ramp,
       onToggle: () => toggle("ramp"),
       disabled: !ramp.enabled,
@@ -10446,6 +10451,17 @@ function RampSection({
             onChange: (v) => set("ramp", { ...ramp, endColor: v })
           }
         ),
+        !ramp.rampMask && /* @__PURE__ */ jsx25(
+          SliderRow,
+          {
+            label: "Gradient Opacity",
+            value: ramp.opacity ?? 0.5,
+            min: 0,
+            max: 1,
+            step: 0.01,
+            onChange: (v) => set("ramp", { ...ramp, opacity: v })
+          }
+        ),
         /* @__PURE__ */ jsx25(
           SliderRow,
           {
@@ -10471,7 +10487,7 @@ function RampSection({
         /* @__PURE__ */ jsx25(
           ToggleRow,
           {
-            label: "Mask",
+            label: "Mask Earlier Effects",
             checked: ramp.rampMask,
             onChange: (v) => set("ramp", { ...ramp, rampMask: v })
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveroom-tech/react-immersive",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",