optimized prism

One-Click-Auth · Sep 29, 2023 · 5d5a04c · 5d5a04c
1 parent c9baeaf
commit 5d5a04c
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 37 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -6,6 +6,7 @@ import GradientPlatform from "../components/GradientPlatform";
 import LandingHero from "../components/LandingHero";
 import AiInCLI from "../components/AiInCLI";
 import Navbar from "../components/Navbar";
+import Customize from "../components/Customize";
 
 export default function LandingPage() {
   // const isMobile = useMediaQuery("(max-width: 768px)");
@@ -16,10 +17,9 @@ export default function LandingPage() {
       <LandingHero />
       <AiInCLI />
       <GradientPlatform />
-      {/*{!isMobile ? <Timeline /> : null}*/}
+      {/* {!isMobile ? <Timeline /> : null} */}
       <Authlite />
       <Showcase />
-      {/* <Customize /> */}
       <Footer />
     </>
   );

diff --git a/src/components/interactivePrism/Flare.tsx b/src/components/interactivePrism/Flare.tsx
@@ -23,6 +23,7 @@ export const Flare = forwardRef(
     };
 
     useFrame((state) => {
+      if (visible) {
       ref.current.children.forEach((instance) => {
         instance.position.x =
           (Math[instance.scale.x > 1 ? "sin" : "cos"](
@@ -36,23 +37,26 @@ export const Flare = forwardRef(
           ) *
             instance.scale.x) /
           5;
-      });
+      })};
     });
 
+
+
+
     return (
       <group ref={fRef} {...props} visible={visible} dispose={null}>
         <Instances frames={visible ? Infinity : 1}>
           <planeGeometry />
           <meshBasicMaterial map={dotTexture} {...config} />
           <group ref={ref}>
             <Instance scale={0.5} />
-            <Instance scale={1.25} />
-            <Instance scale={0.75} />
-            <Instance scale={1.5} />
-            <Instance scale={2} position={[0, 0, -0.7]} />
+            <Instance scale={0.5} />
+            <Instance scale={0.5} />
+            <Instance scale={0.5} />
+            <Instance scale={0.5} position={[0, 0, -0.7]} />
           </group>
         </Instances>
-        <mesh scale={1}>
+        <mesh scale={0.5}>
           <planeGeometry />
           <meshBasicMaterial map={glowTexture} {...config} opacity={1} />
         </mesh>

diff --git a/src/components/interactivePrism/Prism.tsx b/src/components/interactivePrism/Prism.tsx
@@ -11,10 +11,10 @@ export function Prism({ onRayOver, onRayOut, onRayMove, ...props }) {
   );
   return (
     <group {...props}>
-      {/* A low-res, invisible representation of the prism that gets hit by the raycaster */}
+      {/ A low-res, invisible representation of the prism that gets hit by the raycaster /}
       <mesh
         visible={false}
-        scale={1.9}
+        scale={5.9}
         rotation={[Math.PI / 2, Math.PI, 0]}
         onRayOver={onRayOver}
         onRayOut={onRayOut}
@@ -25,7 +25,7 @@ export function Prism({ onRayOver, onRayOut, onRayMove, ...props }) {
       {/* The visible hi-res prism */}
       <mesh
         position={[0, 0, 0.6]}
-        renderOrder={10}
+        renderOrder={1}
         scale={6}
         dispose={null}
         geometry={nodes.Cone.geometry}
@@ -43,4 +43,4 @@ export function Prism({ onRayOver, onRayOut, onRayMove, ...props }) {
       </mesh>
     </group>
   );
-}
+}
diff --git a/src/components/interactivePrism/Rainbow.tsx b/src/components/interactivePrism/Rainbow.tsx
@@ -119,12 +119,15 @@ export const Rainbow = forwardRef(
   ) => {
     const material = useRef(null);
     const { width, height } = useThree((state) => state.viewport);
-    // calculate the maximum length the rainbow has to have to reach all screen corners
-    const length = Math.hypot(width, height) + 2.5; // add 1.5 to due motion of the rainbow
-    useFrame(
-      (state, delta) =>
-        (material.current.time += delta * material.current.speed),
-    );
+    const length = Math.hypot(width, height) + 2.5;
+
+    useFrame((state, delta) => {
+      // Only update if material.current.speed is not zero
+      if (material.current.speed !== 0) {
+        material.current.time += delta * material.current.speed;
+      }
+    });
+
     return (
       <mesh ref={fRef} scale={[length, length, 1]} {...props}>
         <planeGeometry />

diff --git a/src/components/interactivePrism/index.tsx b/src/components/interactivePrism/index.tsx
@@ -36,15 +36,15 @@ export function calculateRefractionAngle(
 function Effects() {
   const [hasEffects, setHasEffects] = useState(true);
 
-  // usePerformanceMonitor({
-  //   onChange: ({ factor }) => {
-  //     if (hasEffects && factor > 0.5) {
-  //       // Decrease the qualityScale of your effects.
-  //       effect.qualityScale = round(0.5 + 0.5 * factor, 1);
-  //     }
-  //     // Handle other conditions for declining or inclining quality
-  //   },
-  // });
+  usePerformanceMonitor({
+    onChange: ({ factor }) => {
+      if (hasEffects && factor > 0.5) {
+        // Decrease the qualityScale of your effects.
+        effect.qualityScale = round(0.5 + 0.5 * factor, 1);
+      }
+      // Handle other conditions for declining or inclining quality
+    },
+  });
 
   return (
     <EffectComposer>{/* Your post-processing effects here */}</EffectComposer>
@@ -136,15 +136,24 @@ function Scene({ isMobile }: { isMobile: boolean }) {
       [0, 0, 0],
     );
 
-    lerp(
-      rainbow.current.material,
-      "emissiveIntensity",
-      isPrismHit ? 2.5 : 0,
-      0.1,
-    );
-    spot.current.intensity = rainbow.current.material.emissiveIntensity;
-
-    lerp(ambient.current, "intensity", 0, 0.25);
+    // Only update if isPrismHit has changed
+    if (
+      rainbow.current.material.emissiveIntensity !==
+      (isPrismHit ? 2.5 : 0)
+    ) {
+      lerp(
+        rainbow.current.material,
+        "emissiveIntensity",
+        isPrismHit ? 2.5 : 0,
+        0.1,
+      );
+      spot.current.intensity = rainbow.current.material.emissiveIntensity;
+    }
+
+    // Only update if ambient intensity is not zero
+    if (ambient.current.intensity !== 0) {
+      lerp(ambient.current, "intensity", 0, 0.25);
+    }
   });
 
   return (
@@ -189,4 +198,4 @@ function Scene({ isMobile }: { isMobile: boolean }) {
       />
     </>
   );
-}
+}