Refactor wireframe object creation and animation logic in SynthwaveBackground component; implement staggered loading of objects and optimize color update mechanism for improved performance. Adjust WebGLRenderer settings for better rendering quality.

Author: mawburn

app/components/SynthwaveBackground/objects/WireframeObjects.ts

@@ -9,7 +9,7 @@ import {
   LineBasicMaterial,
   Line,
   LineLoop,
-  Scene
+  Scene,
 } from '~/utils/three-lite'
 import { COLORS } from '../config'
 
@@ -182,11 +182,19 @@ export function createWireframeObjects(scene: Scene) {
 
   const objectCount = 15
 
-  for (let i = 0; i < objectCount; i++) {
+  for (let i = 0; i < 5; i++) {
     const lineObject = createLineObject(i)
     objectGroup.add(lineObject)
   }
 
   scene.add(objectGroup)
+
+  setTimeout(() => {
+    for (let i = 5; i < objectCount; i++) {
+      const lineObject = createLineObject(i)
+      objectGroup.add(lineObject)
+    }
+  }, 0)
+
   return objectGroup
 }

app/components/SynthwaveBackground/utils/animate.ts

@@ -7,26 +7,43 @@ import {
   Line,
   LineLoop,
   LineBasicMaterial,
-  Color
+  Color,
 } from '~/utils/three-lite'
-import type { MutableRefObject } from 'react'
 import { COLORS } from '../config'
 
+const PI_2 = Math.PI * 2
+const DELTA_TIME = 0.016
+
 export function animateScene(
   renderer: WebGLRenderer,
   scene: Scene,
   camera: PerspectiveCamera,
   objects: {
     wireframeObjects?: Group
   },
-  animationFrameRef: MutableRefObject<number | null>,
+  animationFrameRef: { current: number | null },
   reducedMotion = false
 ) {
+  // Cache frequently accessed values
+  let frameCount = 0
+
   const animate = () => {
     animationFrameRef.current = requestAnimationFrame(animate)
+    frameCount++
+
+    if (objects.wireframeObjects && objects.wireframeObjects.children.length > 0) {
+      const shouldUpdateColors = frameCount % 2 === 0
+
+      const maxDistance = 200
 
-    if (objects.wireframeObjects) {
       objects.wireframeObjects.children.forEach((object: Object3D) => {
+        const distance = Math.sqrt(
+          object.position.x ** 2 + object.position.y ** 2 + object.position.z ** 2
+        )
+
+        if (distance > maxDistance) {
+          return
+        }
         const { rotationSpeed, scale, movement, color } = object.userData
 
         if (!reducedMotion) {
@@ -43,7 +60,7 @@ export function animateScene(
             Math.abs(object.position.y) > movement.bounds.y ||
             Math.abs(object.position.z) > movement.bounds.z
           ) {
-            const visibleAngle = Math.random() * Math.PI * 2
+            const visibleAngle = Math.random() * PI_2
             const distanceFromCenter = 90 + Math.random() * 40
 
             object.position.x =
@@ -82,11 +99,9 @@ export function animateScene(
           object.scale.set(scale.current, scale.current, scale.current)
         }
 
-        const deltaTime = 0.016
-        const lineObject = object as Line | LineLoop
-
-        if (!reducedMotion) {
-          color.timeElapsed += deltaTime
+        if (!reducedMotion && shouldUpdateColors) {
+          const lineObject = object as Line | LineLoop
+          color.timeElapsed += DELTA_TIME
 
           if (!color.inTransition) {
             if (color.timeElapsed >= color.nextChangeDelay) {

app/components/SynthwaveBackground/utils/useThreeScene.ts

@@ -1,11 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import {
-  Scene,
-  Color,
-  Fog,
-  PerspectiveCamera,
-  WebGLRenderer
-} from '~/utils/three-lite'
+import { Scene, Color, Fog, PerspectiveCamera, WebGLRenderer } from '~/utils/three-lite'
 import { COLORS, SCENE_CONFIG } from '../config'
 import { useResize } from './useResize'
 
@@ -28,12 +22,7 @@ export function useThreeScene() {
 
     scene.fog = new Fog(COLORS.DARK_NAVY, SCENE_CONFIG.FOG_NEAR, SCENE_CONFIG.FOG_FAR)
 
-    const camera = new PerspectiveCamera(
-      75,
-      window.innerWidth / window.innerHeight,
-      0.1,
-      1000
-    )
+    const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
     cameraRef.current = camera
     camera.position.set(
       SCENE_CONFIG.CAMERA_POSITION.x,
@@ -42,9 +31,10 @@ export function useThreeScene() {
     )
 
     const renderer = new WebGLRenderer({
-      antialias: true,
+      antialias: false,
       alpha: true,
       powerPreference: 'high-performance',
+      stencil: false,
     })
     rendererRef.current = renderer
     renderer.setSize(window.innerWidth, window.innerHeight)

app/utils/three-lite.ts

@@ -14,5 +14,5 @@ export {
   Fog,
   PerspectiveCamera,
   WebGLRenderer,
-  Object3D
-} from 'three'
+  Object3D,
+} from 'three'