atmosphere test

RidwanSharkar · Oct 30, 2024 · 9cb6960 · 9cb6960
1 parent 13b4f06
commit 9cb6960
Show file tree

Hide file tree

Showing 8 changed files with 323 additions and 74 deletions.
diff --git a/warpgate/EnhancedPlanet.tsx b/warpgate/EnhancedPlanet.tsx
@@ -1,12 +1,12 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { useFrame, useLoader } from '@react-three/fiber';
+import { useFrame, useLoader, ThreeEvent } from '@react-three/fiber';
+import * as THREE from 'three';
 import { Mesh, Euler, TextureLoader } from 'three';
 import Moon from './Moon';
-import * as THREE from 'three';
 import { CelestialObjectGlow } from './CelestialObjectGlow';
 import { PlanetData } from './EnhancedPlanetGroup';
-import { ThreeEvent } from '@react-three/fiber';
-
+import CloudsLayer from './Planet/CloudsLayer';
+import AtmosphereLayer from './Planet/AtmosphereLayer';
 
 interface EnhancedPlanetProps extends PlanetData {
   index: number;
@@ -17,8 +17,8 @@ interface EnhancedPlanetProps extends PlanetData {
 
 /*=============================================================================================================*/
 
-const EnhancedPlanet: React.FC<EnhancedPlanetProps> = ({ 
-  planetColor, 
+const EnhancedPlanet: React.FC<EnhancedPlanetProps> = ({
+  planetColor,
   size,
   index,
   onCollision,
@@ -35,33 +35,32 @@ const EnhancedPlanet: React.FC<EnhancedPlanetProps> = ({
   logoTexturePath,
 }) => {
   const meshRef = useRef<Mesh>(null);
+  const logoRef = useRef<Mesh>(null);
   const [hovered, setHovered] = useState(false);
 
   const logoTexture = useLoader(
     TextureLoader,
-    logoTexturePath || '/textures/transparent.png'//placeholder
+    logoTexturePath || '/textures/transparent.png' // Placeholder
   );
 
   useFrame(({ clock }) => {
     const elapsed = clock.getElapsedTime();
     if (meshRef.current) {
       meshRef.current.position.x = Math.cos(elapsed * orbitSpeed) * orbitRadius;
       meshRef.current.position.z = Math.sin(elapsed * orbitSpeed) * orbitRadius;
-
-      // Planet rotation
-      meshRef.current.rotation.y += rotationSpeed;
+      meshRef.current.rotation.y += rotationSpeed; // Planet rotation
 
       // Collision detection placeholder logic
       const distance = meshRef.current.position.length();
-      if (distance < 0.1) { 
+      if (distance < 0.1) {
         onCollision(index);
       }
     }
   });
 
   const handleClick = () => {
-    onSelectPlanet(index, { 
-      position: [0, 0, 0], 
+    onSelectPlanet(index, {
+      position: [0, 0, 0],
       link,
       label,
       description,
@@ -76,38 +75,31 @@ const EnhancedPlanet: React.FC<EnhancedPlanetProps> = ({
     });
   };
 
-  const logoRef = useRef<Mesh>(null);
-
   const handlePointerOver = (e: ThreeEvent<PointerEvent>) => {
     e.stopPropagation();
     setTimeout(() => setHovered(true), 50);
     document.body.style.cursor = 'pointer';
   };
-  
+
   const handlePointerOut = (e: ThreeEvent<PointerEvent>) => {
     e.stopPropagation();
     setTimeout(() => setHovered(false), 50);
     if (!selected) document.body.style.cursor = 'auto';
   };
-
-/*=============================================================================================================*/
 
   useFrame(() => {
     if (logoRef.current) {
       logoRef.current.rotation.y += 0.01; // Logo rotation speed
     }
   });
+
 
   useEffect(() => {
     console.log(`Planet ${index} selected: ${selected}`);
   }, [selected, index]);
 
   useEffect(() => {
-    if (selected) {
-      document.body.style.cursor = 'pointer';
-    } else if (!hovered) {
-      document.body.style.cursor = 'auto';
-    }
+    document.body.style.cursor = selected || hovered ? 'pointer' : 'auto';
   }, [hovered, selected]);
 
   return (
@@ -117,74 +109,72 @@ const EnhancedPlanet: React.FC<EnhancedPlanetProps> = ({
         onClick={handleClick}
         onPointerOver={handlePointerOver}
         onPointerOut={handlePointerOut}
-        scale={selected ? [1.0, 1.0, 1.0] : [1, 1, 1]} // scale when selected meh
+        scale={selected ? [1.0, 1.0, 1.0] : [1, 1, 1]} // Scale when selected
       >
         <sphereGeometry args={[size, 64, 64]} />
         <meshStandardMaterial color={planetColor} />
 
-        {/* HOVER + SELECT GLOW */}
-        {(selected) && (
-          <CelestialObjectGlow 
-            color={planetColor} 
-            size={size} 
-            intensity={0.4} 
-            isSelected={selected} 
+        {/* Selection Glow */}
+        {selected && (
+          <CelestialObjectGlow
+            color={planetColor}
+            size={size}
+            intensity={0.4}
+            isSelected={selected}
           />
         )}
 
         {/* Rings */}
-        {rings && rings.map((ring, idx) => (
-          <mesh 
-            key={idx} 
-            rotation={new Euler(
-              ring.inclination || 0, 
-              0, 
-              0
-            )}
-          >
-            <ringGeometry
-              args={[
-                size * (ring.innerScale || 1.1),
-                size * (ring.outerScale || 1.3),
-                32,
-              ]}
-            />
-            <meshStandardMaterial 
-              color={ring.color} 
-              side={THREE.DoubleSide} 
-              transparent 
-              opacity={0.8} 
-            />
-          </mesh>
-        ))}
+        {rings &&
+          rings.map((ring, idx) => (
+            <mesh
+              key={idx}
+              rotation={new Euler(ring.inclination || 0, 0, 0)}
+            >
+              <ringGeometry
+                args={[
+                  size * (ring.innerScale || 1.1),
+                  size * (ring.outerScale || 1.3),
+                  32,
+                ]}
+              />
+              <meshStandardMaterial
+                color={ring.color}
+                side={THREE.DoubleSide}
+                transparent
+                opacity={0.8}
+              />
+            </mesh>
+          ))}
 
         {/* Moons */}
-        {moons && moons.map((moon, idx) => (
-          <Moon
-            key={`moon-${idx}`}
-            {...moon}
-          />
-        ))}
+        {moons &&
+          moons.map((moon, idx) => (
+            <Moon key={`moon-${idx}`} {...moon} />
+          ))}
 
         {/* Logo */}
         {(hovered || selected) && logoTexturePath && (
           <mesh
             ref={logoRef}
-            position={[0, size + 0.5, 0]} 
+            position={[0, size + 0.5, 0]}
             rotation={[0, 0, 0]}
-            scale={[1, 1, 1]} 
+            scale={[1, 1, 1]}
           >
             <planeGeometry args={[1, 1]} />
-            <meshBasicMaterial 
-              map={logoTexture} 
-              transparent={true} 
-              side={THREE.DoubleSide} 
+            <meshBasicMaterial
+              map={logoTexture}
+              transparent={true}
+              side={THREE.DoubleSide}
             />
           </mesh>
         )}
-
-
+
       </mesh>
+
+      {/* Clouds and Atmosphere Layers */}
+      <CloudsLayer />
+      <AtmosphereLayer />
     </group>
   );
 };

diff --git a/warpgate/EnhancedPlanetGroup.tsx b/warpgate/EnhancedPlanetGroup.tsx
@@ -5,6 +5,7 @@ import Explosion from './Explosion';
 import { Vector3 } from 'three';
 import * as THREE from 'three';
 import { extend } from '@react-three/fiber';
+
 import { OrbitControls, TransformControls } from 'three-stdlib';
 extend({ OrbitControls, TransformControls });
 
@@ -62,7 +63,7 @@ const EnhancedPlanetGroup: React.FC<EnhancedPlanetGroupProps> = ({ onSelectPlane
       description: 'Connect()',
       orbitRadius: 2.75,
       orbitSpeed: 0.60,
-      planetColor: '#00d2ff',
+      planetColor: '#9eccfa',
       size: 0.40,
       rotationSpeed: 0.02, 
       logoTexturePath: '/textures/LinkedIn_logo.svg', 
@@ -128,7 +129,7 @@ const EnhancedPlanetGroup: React.FC<EnhancedPlanetGroupProps> = ({ onSelectPlane
       description: 'cutWood()',
       orbitRadius: 8,
       orbitSpeed: 0.2,
-      planetColor: '#BDA0BC', 
+      planetColor: '#B8E0D2', 
       rings: [
         { color: '#BAD29F', innerScale: 1.1, outerScale: 1.4, inclination: -Math.PI / 6 }, // -30 degrees
       ],

diff --git a/warpgate/InfoPanel.module.css b/warpgate/InfoPanel.module.css
@@ -38,20 +38,24 @@
   border-radius: 12px;
 }
 
+/* meh
 .overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5); /* Semi-transparent dark background */
-  z-index: 999; /* Behind the info panel */
+  background: rgba(0, 0, 0, 0.5); 
+  z-index: 999; 
 }
 
+DORMANT x out
 .closeButton:hover {
-  color: #ff6b6b; /* Change color on hover */
+  color: #ff6b6b;
 }
 
+*/
+
 .infoPanel h2 {
   margin-top: 0;
   font-family: 'Orbitron', sans-serif;

diff --git a/warpgate/Planet/AtmosphereLayer.tsx b/warpgate/Planet/AtmosphereLayer.tsx
@@ -0,0 +1,12 @@
+// src/components/Planet/AtmosphereLayer.tsx
+import React from 'react';
+import { AtmosphereShaderMaterial } from './shaders/atmosphereShader';
+
+const AtmosphereLayer: React.FC = () => (
+  <mesh scale={[1.1, 1.1, 1.1]}>
+    <sphereGeometry args={[1, 64, 64]} />
+    <primitive attach="material" object={AtmosphereShaderMaterial} />
+  </mesh>
+);
+
+export default AtmosphereLayer;
diff --git a/warpgate/Planet/CloudsLayer.tsx b/warpgate/Planet/CloudsLayer.tsx
@@ -0,0 +1,22 @@
+// src/components/Planet/CloudsLayer.tsx
+import React, { useRef } from 'react';
+import { CloudsShaderMaterial } from './shaders/cloudsShader';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+
+const CloudsLayer: React.FC = () => {
+  const cloudsRef = useRef<THREE.Mesh>(null);
+
+  useFrame(({ clock }) => {
+    CloudsShaderMaterial.uniforms.time.value = clock.getElapsedTime();
+  });
+
+  return (
+    <mesh ref={cloudsRef} scale={[1.05, 1.05, 1.05]}>
+      <sphereGeometry args={[1, 64, 64]} />
+      <primitive attach="material" object={CloudsShaderMaterial} />
+    </mesh>
+  );
+};
+
+export default CloudsLayer;
diff --git a/warpgate/Planet/shaders/atmosphereShader.ts b/warpgate/Planet/shaders/atmosphereShader.ts
@@ -0,0 +1,40 @@
+// src/components/Planet/shaders/atmosphereShader.ts
+import * as THREE from 'three';
+
+export const AtmosphereShaderMaterial = new THREE.ShaderMaterial({
+  vertexShader: `
+    varying vec3 vNormal;
+    varying vec3 vPosition;
+    
+    void main() {
+      vNormal = normalize(normalMatrix * normal);
+      vPosition = position;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+  `,
+  fragmentShader: `
+    varying vec3 vNormal;
+    varying vec3 vPosition;
+    
+    void main() {
+      // Calculate atmosphere intensity based on viewing angle
+      float intensity = pow(0.8 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 4.0);
+      
+      // Create a gradient from blue to light blue
+      vec3 atmosphereColor = mix(
+        vec3(0.4, 0.7, 1.0),    // Light blue
+        vec3(0.6, 0.8, 1.0),    // Lighter blue
+        intensity
+      );
+      
+      // Add slight color variation based on height
+      float heightFactor = vPosition.y * 0.1 + 0.5;
+      atmosphereColor *= heightFactor;
+      
+      gl_FragColor = vec4(atmosphereColor, intensity * 0.3);
+    }
+  `,
+  blending: THREE.AdditiveBlending,
+  side: THREE.BackSide,
+  transparent: true,
+});