From 9eb1719aca19f3fb873b57531e4a6a365621594c Mon Sep 17 00:00:00 2001 From: monoid Date: Sat, 12 Apr 2025 21:03:07 +0900 Subject: [PATCH] feat: detail texture --- src/App2.tsx | 5 +++++ src/texture-generator.ts | 33 +++++++++++++++++++++++---------- vite.config.ts | 3 +++ 3 files changed, 31 insertions(+), 10 deletions(-) diff --git a/src/App2.tsx b/src/App2.tsx index 33f8c4a..10175f7 100644 --- a/src/App2.tsx +++ b/src/App2.tsx @@ -142,6 +142,9 @@ const Globe: FC = ({ 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 = ({ 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); }; diff --git a/src/texture-generator.ts b/src/texture-generator.ts index d2f0ca8..f81c92b 100644 --- a/src/texture-generator.ts +++ b/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 noise3D = createNoise3D(getRandom(seed)); // 3D 노이즈 생성 함수 - const noise3D2 = createNoise3D(getRandom(seed ^ 12)); // 3D 노이즈 생성 함수 (다른 스케일을 위해) - const noise3D3 = createNoise3D(getRandom(seed ^ 224)); // 3D 노이즈 생성 함수 (다른 스케일을 위해) + + const noise3DGen = (scale: number) => { + const noise3D = createNoise3D(getRandom(seed)); // 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; @@ -102,6 +115,6 @@ export const generateGlobeTextureData = (width: number, height: number, seed?: n data[stride + 3] = a; // Alpha 값 설정 } - // 데이터 배열과 크기를 반환 - return { data, width, height }; + // 데이터 배열과 크기를 반환 + return { data, width, height }; }; diff --git a/vite.config.ts b/vite.config.ts index dd54e7f..5afae9d 100644 --- a/vite.config.ts +++ b/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'] + } })