@liveroom-tech/react-immersive 1.3.1 → 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,
@@ -4128,12 +4133,16 @@ function CinematicCamera({
   const enterPos = (0, import_react15.useRef)(new import_three18.Vector3());
   const enterTarget = (0, import_react15.useRef)(new import_three18.Vector3());
   const startedRef = (0, import_react15.useRef)(false);
+  const pausedElapsedRef = (0, import_react15.useRef)(0);
   const orbitRef = (0, import_react15.useRef)(null);
   const tmpPos = (0, import_react15.useMemo)(() => new import_three18.Vector3(), []);
   const tmpTarget = (0, import_react15.useMemo)(() => new import_three18.Vector3(), []);
   (0, import_react15.useEffect)(() => {
     if (!playing) {
       startedRef.current = false;
+      if (elapsedRef.current > 0) {
+        pausedElapsedRef.current = elapsedRef.current;
+      }
       return;
     }
     const controls = controlsRef.current;
@@ -4141,7 +4150,7 @@ function CinematicCamera({
       controls.getPosition(enterPos.current);
       controls.getTarget(enterTarget.current);
     }
-    elapsedRef.current = 0;
+    elapsedRef.current = pausedElapsedRef.current || 0;
     enterElapsedRef.current = 0;
     if (!hasPath) {
       const scene = sceneRef.current;
@@ -4205,6 +4214,7 @@ function CinematicCamera({
     );
     if (finished) {
       startedRef.current = false;
+      pausedElapsedRef.current = 0;
       onFinished?.();
       return;
     }
@@ -10310,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,
@@ -10370,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,
           {
@@ -10395,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,
@@ -4167,12 +4172,16 @@ function CinematicCamera({
   const enterPos = useRef8(new Vector36());
   const enterTarget = useRef8(new Vector36());
   const startedRef = useRef8(false);
+  const pausedElapsedRef = useRef8(0);
   const orbitRef = useRef8(null);
   const tmpPos = useMemo11(() => new Vector36(), []);
   const tmpTarget = useMemo11(() => new Vector36(), []);
   useEffect11(() => {
     if (!playing) {
       startedRef.current = false;
+      if (elapsedRef.current > 0) {
+        pausedElapsedRef.current = elapsedRef.current;
+      }
       return;
     }
     const controls = controlsRef.current;
@@ -4180,7 +4189,7 @@ function CinematicCamera({
       controls.getPosition(enterPos.current);
       controls.getTarget(enterTarget.current);
     }
-    elapsedRef.current = 0;
+    elapsedRef.current = pausedElapsedRef.current || 0;
     enterElapsedRef.current = 0;
     if (!hasPath) {
       const scene = sceneRef.current;
@@ -4244,6 +4253,7 @@ function CinematicCamera({
     );
     if (finished) {
       startedRef.current = false;
+      pausedElapsedRef.current = 0;
       onFinished?.();
       return;
     }
@@ -10381,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,
@@ -10441,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,
           {
@@ -10466,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.1",
+  "version": "1.3.3",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",