Update various settings + add vercel

.gitignore

@@ -17,7 +17,9 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.npmrc
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.vercel

src/App.jsx

@@ -1,38 +1,12 @@
 import { Canvas } from '@react-three/fiber';
-import { Texture } from 'three';
 import * as DREI from '@react-three/drei';
 import { Perf } from 'r3f-perf';
 import { isMobile } from 'react-device-detect';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect } from 'react';
 import World from './World';
 import Interface, { Crosshair } from './Interface';
 
 const App = () => {
-  const gradientTexture = useMemo(() => {
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d');
-
-    // Set the canvas size
-    canvas.width = 2;
-    canvas.height = 2;
-
-    // Create a gradient fill
-    const gradient = context.createLinearGradient(0, 0, 1, 1);
-    gradient.addColorStop(0, '#00bfff');
-    gradient.addColorStop(0.5, '#add8e6');
-    gradient.addColorStop(0.5, '#4b0082');
-    gradient.addColorStop(1, '#9400d3');
-    context.fillStyle = gradient;
-    context.fillRect(0, 0, 2, 2);
-
-    // Create a three.js texture from the canvas
-    const texture = new Texture(canvas);
-    texture.wrapS = Texture.RepeatWrapping;
-    texture.wrapT = Texture.RepeatWrapping;
-
-    return texture;
-  }, []);
-
   useEffect(() => {
     if (isMobile) {
       screen.orientation.lock('landscape');
@@ -53,14 +27,16 @@ const App = () => {
         ]}
       >
         <Canvas
-          background={gradientTexture}
           shadows
           camera={{
             fov: 75,
             near: 0.1,
             far: 1000,
             position: [-4, 2, -4],
           }}
+          onCreated={({ gl }) => {
+            gl.setClearColor(0x131313, 0);
+          }}
         >
           <Perf position='top-left' />
           <World />

src/World/Environment/Environment.jsx

@@ -22,3 +22,6 @@ const Environment = () => {
 };
 
 export default Environment;
+
+// ! Particles background apparent
+// ! High quality (SSR) producing artifacts

src/World/Environment/components/Particles.jsx

@@ -1,15 +1,18 @@
+import * as THREE from 'three';
+import { useFrame } from '@react-three/fiber';
 import * as DREI from '@react-three/drei';
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef } from 'react';
 import useWorld from '../../../stores/World';
+import '../shaders/ParticleMaterial';
 
 const Particles = ({ count = 1000 }) => {
   const { scale } = useWorld();
   const sparkles = useMemo(
     () => (
       <DREI.Sparkles
-        size={4}
-        scale={[scale.x, scale.y, scale.z]}
-        position-y={scale.y / 2}
+        size={6}
+        // scale={[scale.x, scale.y, scale.z]}
+        // position-y={scale.y / 2}
         speed={0.2}
         count={count}
       />
@@ -18,6 +21,41 @@ const Particles = ({ count = 1000 }) => {
   );
 
   return <>{sparkles}</>;
+
+  // const shader = useRef();
+  // const [positionArray, scaleArray] = useMemo(() => {
+  //   const positionArray = new Float32Array(count * 3);
+  //   const scaleArray = new Float32Array(count);
+  //   for (let i = 0; i < count; i++) {
+  //     new THREE.Vector3(
+  //       (Math.random() - 0.5) * 4,
+  //       Math.random() * 1.5,
+  //       (Math.random() - 0.5) * 4,
+  //     ).toArray(positionArray, i * 3);
+  //     scaleArray[i] = Math.random();
+  //   }
+  //   return [positionArray, scaleArray];
+  // }, [count]);
+  // useFrame((state, delta) => (shader.current.time += delta / 2));
+  // return (
+  //   <points key={count}>
+  //     <bufferGeometry>
+  //       <bufferAttribute
+  //         attach='attributes-position'
+  //         count={count}
+  //         array={positionArray}
+  //         itemSize={3}
+  //       />
+  //       <bufferAttribute
+  //         attach='attributes-aScale'
+  //         count={count}
+  //         array={scaleArray}
+  //         itemSize={1}
+  //       />
+  //     </bufferGeometry>
+  //     <particleMaterial ref={shader} transparent depthWrite={false} />
+  //   </points>
+  // );
 };
 
 export default Particles;

src/World/Environment/components/Structure.jsx

@@ -1,17 +1,19 @@
 import * as THREE from 'three';
+import * as DREI from '@react-three/drei';
 import { CuboidCollider, RigidBody } from '@react-three/rapier';
 import React from 'react';
 import useWorld from '../../../stores/World';
 
 const geometry = new THREE.BoxGeometry(1, 1, 1);
 
 const Structure = () => {
-  const { scale, colors } = useWorld();
+  const { scale } = useWorld();
 
   const material = new THREE.MeshBasicMaterial({
-    color: 0x00bfff,
+    color: 0x131313,
     transparent: true,
     opacity: 0,
+    depthWrite: true,
   });
 
   return (

src/World/Environment/shaders/ParticleMaterial.js

@@ -0,0 +1,46 @@
+import * as THREE from 'three';
+import { extend } from '@react-three/fiber';
+
+export default class ParticleMaterial extends THREE.ShaderMaterial {
+  constructor() {
+    super({
+      uniforms: {
+        uTime: { value: 0 },
+        uPixelRatio: { value: Math.min(window.devicePixelRatio, 2) },
+        uSize: { value: 150 },
+      },
+      vertexShader: `
+      uniform float uPixelRatio;
+      uniform float uSize;
+      uniform float uTime;
+      attribute float aScale;    
+      void main() {
+        vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+        modelPosition.y += sin(uTime + modelPosition.x * 100.0) * aScale * 0.2;
+        modelPosition.z += cos(uTime + modelPosition.x * 100.0) * aScale * 0.2;
+        modelPosition.x += cos(uTime + modelPosition.x * 100.0) * aScale * 0.2;
+        vec4 viewPosition = viewMatrix * modelPosition;
+        vec4 projectionPostion = projectionMatrix * viewPosition;    
+        gl_Position = projectionPostion;
+        gl_PointSize = uSize * aScale * uPixelRatio;
+        gl_PointSize *= (1.0 / - viewPosition.z);
+      }`,
+      fragmentShader: `
+      void main() {
+        float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
+        float strength = 0.05 / distanceToCenter - 0.1;
+        gl_FragColor = vec4(1.0, 1.0, 1.0, strength);
+      }`,
+    });
+  }
+
+  get time() {
+    return this.uniforms.uTime.value;
+  }
+
+  set time(v) {
+    this.uniforms.uTime.value = v;
+  }
+}
+
+extend({ ParticleMaterial });

src/stores/World.js

@@ -21,13 +21,13 @@ export default create((set) => ({
     // d1: '#339933',
     // d2: '#90EE90',
     a1: '#FEC8D8',
-    a2: '#FFE1E6',
+    a2: '#FFE6EA',
     b1: '#C5B0D5',
-    b2: '#E0D1E9',
+    b2: '#E4D6EC',
     c1: '#AED6F1',
-    c2: '#D5E8F4',
+    c2: '#D9EAF6',
     d1: '#A9DFBF',
-    d2: '#D5E9D9',
+    d2: '#DDEFD9',
   },
   setColor: (key, value) =>
     set((state) => ({ colors: { ...state.colors, [key]: value } })),

src/styles/globals.css

@@ -18,8 +18,7 @@ body {
   position: fixed;
   overflow: hidden;
   overscroll-behavior-y: none;
-  background: #131313;
-  /* background: linear-gradient(to right, #00bfff, #add8e6, #4b0082, #9400d3); */
+  /* background: #131313; */
 }
 
 canvas {