Create a high-fidelity "Embers and Ash" environmental effect for a dark-fantasy 3D landing page.

현재 워크스페이스는 읽기 전용이며 프로젝트 파일을 확인하거나 수정할 수 없어, 아래와 같이 구현 설계를 제안합니다.

Ember 시스템

각 파티클에 다음 속성을 부여합니다.

type Ember = {
  position: Vector3
  velocity: Vector3
  life: number
  maxLife: number
  seed: number
  size: number
}

이동식은 다음처럼 구성합니다.

// vertex shader 개념
float age = uTime - aSpawnTime;
float life01 = clamp(age / aLifetime, 0.0, 1.0);

vec3 wind;
wind.x = sin(uTime * 0.8 + aSeed * 12.4) * 0.35;
wind.z = cos(uTime * 0.55 + aSeed * 8.1) * 0.22;

// 상승력 + 불규칙한 난류
vec3 motion = vec3(
  wind.x,
  uRiseSpeed + sin(aSeed * 20.0 + uTime * 1.7) * 0.12,
  wind.z
);

transformed += motion * age;

권장 파라미터:

• 상승 속도: 0.4 ~ 1.4
• 수평 바람 세기: 0.15 ~ 0.5
• 수명: 1.5 ~ 4.5초
• 파티클 크기: 0.015 ~ 0.06
• 발광 색상: #ffb347, #ff6a2a, #ffd27a

Size Over Life

입자 크기는 초기에 작게 시작하고, 중간에 커진 뒤 사라지도록 합니다.

float sizeCurve = smoothstep(0.0, 0.12, life01)
                * (1.0 - smoothstep(0.72, 1.0, life01));

gl_PointSize = aSize * sizeCurve * uPixelRatio;

Opacity Over Life 및 Flicker

float fadeIn  = smoothstep(0.0, 0.08, life01);
float fadeOut = 1.0 - smoothstep(0.65, 1.0, life01);

float flicker = 0.72
              + 0.28 * sin(uTime * 18.0 + aSeed * 31.0);

float alpha = fadeIn * fadeOut * flicker;

이렇게 하면 생성 직후 갑자기 나타나지 않고, 마지막에는 자연스럽게 꺼집니다.

Soft Particle 셰이더

깊이 텍스처와 현재 파티클 깊이를 비교해 지오메트리 교차 부분을 부드럽게 페이드합니다.

float sceneDepth = texture2D(uDepthTexture, vScreenUV).r;
float particleDepth = gl_FragCoord.z;

float depthFade = clamp(
  (sceneDepth - particleDepth) * uSoftness,
  0.0,
  1.0
);

vec4 sprite = texture2D(uEmberTexture, gl_PointCoord);
gl_FragColor = vec4(sprite.rgb * uEmberColor, sprite.a * vAlpha * depthFade);

렌더링 설정은 다음이 적합합니다.

material.transparent = true
material.depthWrite = false
material.blending = THREE.AdditiveBlending

단, 밝은 연기에는 NormalBlending을 사용하는 편이 더 자연스럽습니다.

Smoke 레이어

연기 입자는 별도의 낮은 밀도 레이어로 둡니다.

• 엷은 회색-갈색 원형 텍스처
• 큰 크기: 0.3 ~ 1.2
• 느린 상승 속도
• 낮은 불투명도: 0.025 ~ 0.12
• 수명: 4 ~ 10초
• NormalBlending
• 저주파 3D/2D 노이즈로 가장자리와 밀도 변형

float noise = fbm(vWorldPosition * 0.7 + uTime * 0.025);
float density = smoothstep(0.35, 0.75, noise);

float smokeAlpha =
  density *
  smoothstep(0.0, 0.18, life01) *
  (1.0 - smoothstep(0.7, 1.0, life01)) *
  uSmokeOpacity;

연기에는 Additive Blending을 사용하지 않는 것이 좋습니다. 그렇지 않으면 어두운 판타지 분위기보다 밝은 안개처럼 보일 수 있습니다.

Light Scattering

각 불씨를 실제 광원으로 만들면 광원 수가 많아져 성능 문제가 발생하므로, 두 레이어를 조합합니다.

1. 모든 불씨는 셰이더에서 자체 발광
2. 가장 밝은 불씨 일부만 PointLight로 샘플링
3. 주변에 작은 후광 스프라이트 추가
4. 가능하면 bloom 후처리 적용

const emberLight = new THREE.PointLight(0xff6a22, 0.7, 1.8, 2.0)
emberLight.position.copy(ember.position)
scene.add(emberLight)

실제 PointLight는 매 프레임 전체를 갱신하지 말고, 밝기 상위 8~16개 정도만 선택하는 것이 안전합니다.

권장 렌더링 구조

EmberEmitter
 ├─ EmberPoints
 │   ├─ SoftParticle shader
 │   ├─ Additive blending
 │   └─ Size/Opacity/Flicker curves
 ├─ SmokePoints
 │   ├─ Noise density shader
 │   └─ Normal blending
 ├─ GlowSprites
 └─ Dynamic ember lights

추가로 모바일이나 저사양 환경에서는 다음 단계적 품질 설정을 권장합니다.

• 고품질: 불씨 2,000개 + 연기 600개 + 동적 광원 16개
• 중간 품질: 불씨 900개 + 연기 250개 + 동적 광원 6개
• 저품질: 불씨 350개 + 연기 100개 + 동적 광원 0개

프로젝트 파일이나 사용 중인 렌더러(Three.js, Unity, Unreal 등)가 제공되면 해당 구조에 맞춘 실제 코드와 셰이더 파일로 구체화할 수 있습니다.