feat: detail texture

src/App2.tsx

@@ -142,6 +142,9 @@ const Globe: FC<GlobeProps> = ({ radius }) => {
     useEffect(() => {
         // 웹 워커를 사용하여 텍스처 생성
         workerRef.current = new Worker(new URL('./textureWorker.ts', import.meta.url), { type: 'module' });
+
+        console.time('Texture generation time'); // 성능 측정 시작
+        // 워커에서 텍스처 생성 완료 시 호출되는 이벤트 핸들러
         workerRef.current.onmessage = (event) => {
             const { data, width, height } = event.data;
             const texture = new THREE.DataTexture(data, width, height, THREE.RGBAFormat);
@@ -151,6 +154,8 @@ const Globe: FC<GlobeProps> = ({ radius }) => {
             texture.wrapS = THREE.ClampToEdgeWrapping;
             texture.wrapT = THREE.ClampToEdgeWrapping;
             texture.generateMipmaps = true;
+            console.timeEnd('Texture generation time'); // 성능 측정 종료
+            // 텍스처 생성 완료 후 상태 업데이트
             console.log('Texture generated in worker:', texture);
             setGlobeTexture(texture);
         };

src/texture-generator.ts

@@ -15,9 +15,25 @@ export const generateGlobeTextureData = (width: number, height: number, seed?: n
         seed += 1; // 시드 증가
         return x - Math.floor(x); // 0 ~ 1 사이 값 반환
     } // 시드가 주어지면 고정된 랜덤 생성기 사용 (선택 사항)
+
+    const noise3DGen = (scale: number) => {
         const noise3D = createNoise3D(getRandom(seed)); // 3D 노이즈 생성 함수
-    const noise3D2 = createNoise3D(getRandom(seed ^ 12)); // 3D 노이즈 생성 함수 (다른 스케일을 위해)
-    const noise3D3 = createNoise3D(getRandom(seed ^ 224)); // 3D 노이즈 생성 함수 (다른 스케일을 위해)
+        return (x: number, y: number, z: number) => {
+            return noise3D(x * scale, y * scale, z * scale); // 노이즈 값 반환
+        };
+    }
+    const scales = [1, 2, 4, 8, 16, 32, 64, 128, 256, 512]; // 스케일 배열 (2^0 ~ 2^9)
+    const functions = scales.map((x) => noise3DGen(x)); // 10단계로 나누어 노이즈 생성
+    const complexNoise = (x: number, y: number, z: number) => {
+        let noiseValue = 0; // 노이즈 값 초기화
+        // 3D Simplex Noise 값 계산 (-1 ~ 1)
+        for (let j = 0; j < 10; j++) {
+            const scale = scales[j]; // 스케일
+            const noise = functions[j](x, y, z); // 노이즈 값 계산
+            noiseValue += noise / scale; // 가중치 적용
+        }
+        return noiseValue;
+    }
 
     const noiseScale = 2; // 노이즈 스케일 (값이 클수록 지형이 작아짐)
     const waterLevel = 0.05; // 해수면 높이 (-1 ~ 1 사이 값)
@@ -39,10 +55,7 @@ export const generateGlobeTextureData = (width: number, height: number, seed?: n
         const z = Math.sin(phi) * Math.sin(theta);
         const y = Math.cos(phi);
 
-        // 3D Simplex Noise 값 계산 (-1 ~ 1)
-        const noiseValue = noise3D(x * noiseScale, y * noiseScale, z * noiseScale)
-        + noise3D2(x * noiseScale * 0.5, y * noiseScale * 0.5, z * noiseScale * 0.5) * 0.5
-        + noise3D3(x * noiseScale * 0.25, y * noiseScale * 0.25, z * noiseScale * 0.25) * 0.25; // 노이즈 조합
+        const noiseValue = complexNoise(x * noiseScale, y * noiseScale, z * noiseScale); // 노이즈 값 계산
 
         let r = 50; // 바다 기본 R
         let g = 100; // 바다 기본 G
@@ -77,7 +90,7 @@ export const generateGlobeTextureData = (width: number, height: number, seed?: n
             }
         } else {
             // 바다 (깊이에 따라 색상 변화)
-            const depthFactor = Math.abs((noiseValue - waterLevel) / ( 1 + waterLevel)); // 0 ~ 1 정규화 (깊이 비율)
+            const depthFactor = Math.abs((noiseValue - waterLevel) / (1 + waterLevel)); // 0 ~ 1 정규화 (깊이 비율)
             r = 50 - 30 * depthFactor;
             g = 100 - 50 * depthFactor;
             b = 200 - 40 * depthFactor;

vite.config.ts

@@ -5,4 +5,7 @@ import tailwindcss from '@tailwindcss/vite'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [tailwindcss(), react()],
+  server: {
+    allowedHosts: ['monoid.top']
+  }
 })