From c10493f40a909b067f1258e7c0f545439828659e Mon Sep 17 00:00:00 2001
From: Mansive <xmansive@gmail.com>
Date: Fri, 26 Jan 2024 21:47:59 -0600
Subject: [PATCH] Adjust network shader color and resolution

---
 .../NetworkShader/NetworkMaterial.ts          |  2 +-
 .../NetworkShader/NetworkShader.tsx           | 37 +++++++++----------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/components/NetworkShader/NetworkMaterial.ts b/src/components/NetworkShader/NetworkMaterial.ts
index 578703c..1372901 100644
--- a/src/components/NetworkShader/NetworkMaterial.ts
+++ b/src/components/NetworkShader/NetworkMaterial.ts
@@ -77,7 +77,7 @@ const fragmentShader = `
       m += line(gUv, p[4], p[i]);
 
       vec2 v = (p[i] - gUv) * 20.0;
-      float sparkle = 1.0 / dot(v, v);
+      float sparkle = 0.5 / dot(v, v);
 
       m += sparkle;
     }
diff --git a/src/components/NetworkShader/NetworkShader.tsx b/src/components/NetworkShader/NetworkShader.tsx
index 72be082..50b3c79 100644
--- a/src/components/NetworkShader/NetworkShader.tsx
+++ b/src/components/NetworkShader/NetworkShader.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { OrthographicCamera, useFBO } from "@react-three/drei";
+import { OrthographicCamera, useFBO, Stats } from "@react-three/drei";
 import { Canvas, createPortal, extend, useFrame } from "@react-three/fiber";
 import { Suspense, useEffect, useRef } from "react";
 import * as THREE from "three";
@@ -25,13 +25,13 @@ const getFullScreenTriangle = () => {
 
 const NetworkShader = () => {
   // Improve performance by reducing width and height
-  const width = window.innerWidth / 2;
-  const height = window.innerHeight / 2;
+  const width = window.innerWidth / 3;
+  const height = window.innerHeight / 3;
 
   const cameraRef = useRef<THREE.OrthographicCamera>(null!);
   const screenMeshRef = useRef<THREE.Mesh>(null!);
   const networkMaterialRef = useRef<NetworkMaterial>(null!);
-  
+
   const scene = new THREE.Scene();
   const renderTarget = useFBO(width, height, {
     minFilter: THREE.NearestFilter,
@@ -40,7 +40,7 @@ const NetworkShader = () => {
     stencilBuffer: false,
     type: THREE.FloatType,
   });
-  
+
   useEffect(() => {
     const onWindowResize = () => {
       networkMaterialRef.current.uniforms.uResolution.value = new THREE.Vector2(
@@ -66,21 +66,20 @@ const NetworkShader = () => {
 
     gl.render(scene, cameraRef.current);
 
-    (screenMeshRef.current.material as THREE.MeshBasicMaterial).map = renderTarget.texture;
+    (screenMeshRef.current.material as THREE.MeshBasicMaterial).map =
+      renderTarget.texture;
 
     gl.setRenderTarget(null);
   });
 
   return (
     <>
-    {createPortal(
-      <mesh
-        geometry={getFullScreenTriangle()}
-      >
-        <networkMaterial ref={networkMaterialRef} />
-      </mesh>,
-      scene
-    )}
+      {createPortal(
+        <mesh geometry={getFullScreenTriangle()}>
+          <networkMaterial ref={networkMaterialRef} />
+        </mesh>,
+        scene
+      )}
       <OrthographicCamera
         ref={cameraRef}
         makeDefault
@@ -92,10 +91,7 @@ const NetworkShader = () => {
         near={0}
         far={1}
       />
-      <mesh
-        ref={screenMeshRef}
-        geometry={getFullScreenTriangle()}
-      />
+      <mesh ref={screenMeshRef} geometry={getFullScreenTriangle()} />
     </>
   );
 };
@@ -104,13 +100,14 @@ function Scene() {
   return (
     <Canvas
       style={{
-        width: "100vw",
-        height: "100vh",
+        width: "100dvw",
+        height: "100dvh",
         filter: "blur(0.8rem)",
         mixBlendMode: "hard-light",
       }}
     >
       <Suspense>
+        <Stats />
         <NetworkShader />
       </Suspense>
     </Canvas>