procedurally generated ring mostly done, needs radius tweaked

src/components/GrayRing.tsx

@@ -34,6 +34,7 @@ const GrayRing = memo((props: GrayRingProps) => {
     }
   `;
 
+
   const fragmentShader = `
     varying vec2 vUv;
     uniform sampler2D lof;
@@ -63,6 +64,7 @@ const GrayRing = memo((props: GrayRingProps) => {
         return vec4(0.259,0.259,0.322, 1);
       } else if (quadnum % 2 == 1) {
         return texture2D(hole, vec2(tolocal(vUv.x, quadlen-thinperiod, step), vUv.y));
+          // return vec4(tolocal(vUv.x, quadlen-thinperiod, step), 0, 0, 1);
       } else if (quadnum == 0) {
         return texture2D(lof, vec2(tolocal(vUv.x, quadlen-thinperiod, step), vUv.y));
       } else {
@@ -73,6 +75,8 @@ const GrayRing = memo((props: GrayRingProps) => {
     void main() {
       // number of segments
       float step = 64.0;
+      
+      // thin line height
       float thin = 0.3;
       
       // segment within circle
@@ -87,7 +91,7 @@ const GrayRing = memo((props: GrayRingProps) => {
       int quadnum = int(segment) / quadlen;
      
      // how big thin part is
-     int thinperiod = 12;
+     int thinperiod = 8;
      
       if (quadel < thinperiod && isheight(vUv.y, thin)) {
           // thin line
@@ -117,15 +121,16 @@ const GrayRing = memo((props: GrayRingProps) => {
   }
     `;
 
+
   return (
     <mesh
       position={[0, props.grayRingPosY, 0]}
-      rotation={[0, 3.7, 0]}
+      rotation={[0, 3.95, 0]}
       renderOrder={1}
-      scale={[5, 2.5, 5]}
+      scale={[25,25,25]}
     >
       <cylinderBufferGeometry
-        args={[0.25, 0.25, 0.027, 64, 64, true]}
+        args={[0.05, 0.05, 0.003, 64, 64, true]}
         attach="geometry"
       />
       <shaderMaterial

src/components/Hub.tsx

@@ -14,28 +14,28 @@ const Hub = memo(() => {
       <Suspense fallback={<>loading...</>}>
         {/* average distance between rings from my CALCULATIONS is 1.87 in  our case */}
         <PurpleRing purpleRingPosY={2.27} />
-        <GrayRing grayRingPosY={1.6} />
+        <GrayRing grayRingPosY={1.59} />
         <PurpleRing purpleRingPosY={0.4} />
-        <GrayRing grayRingPosY={-0.27} />
+        <GrayRing grayRingPosY={-0.28} />
-        {/*{Object.values(level_sprites).map((sprite) => {*/}
+        {Object.values(level_sprites).map((sprite) => {
-        {/*  return (*/}
+          return (
-        {/*    <LevelSprite*/}
+            <LevelSprite
-        {/*      position={sprite.position as [number, number, number]}*/}
+              position={sprite.position as [number, number, number]}
-        {/*      scale={sprite.scale as [number, number, number]}*/}
+              scale={sprite.scale as [number, number, number]}
-        {/*      rotation={*/}
+              rotation={
-        {/*        sprite.rotation as [*/}
+                sprite.rotation as [
-        {/*          number,*/}
+                  number,
-        {/*          number,*/}
+                  number,
-        {/*          number,*/}
+                  number,
-        {/*          (string | undefined)?*/}
+                  (string | undefined)?
-        {/*        ]*/}
+                ]
-        {/*      }*/}
+              }
-        {/*      sprite={sprite.sprite}*/}
+              sprite={sprite.sprite}
-        {/*      key={sprite.id}*/}
+              key={sprite.id}
-        {/*      active={sprite.id === currentSprite}*/}
+              active={sprite.id === currentSprite}
-        {/*    />*/}
+            />
-        {/*  );*/}
+          );
-        {/*})}*/}
+        })}
       </Suspense>
     </>
   );

src/components/MainScene/CameraAtom.tsx

@@ -2,11 +2,12 @@ import { atom } from "recoil";
 
 export const camPosYAtom = atom({
   key: "camPosYAtom",
+  // default: -1.87,
   default: 0,
 });
 
 export const camRotYAtom = atom({
   key: "camRotYAtom",
+  // default: 0.45,
   default: 0,
 });
-