Adjust network shader color and resolution

Mansive · Jan 27, 2024 · c10493f · c10493f
1 parent 9bd2ad4
commit c10493f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 21 deletions.
diff --git 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
@@ -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>