30 Animated galaxy

🌌 Galaxy Particles Shader

커스텀 셰이더로 은하 파티클을 회전시키는 과정을 설명합니다. 퍼포먼스 최적화를 위해 GPU가 직접 각 파티클의 애니메이션을 처리하도록 vertex shader를 사용하며, 다양한 크기, 색상, 형태를 표현하기 위해 shader attribute와 varying, uniforms를 적극 활용합니다.

---

📦 1. 기초 셋업

✅ 기존 PointsMaterial 제거 → ShaderMaterial 사용

material = new THREE.ShaderMaterial({
  depthWrite: false,
  blending: THREE.AdditiveBlending,
  vertexColors: true,
});

• size, sizeAttenuation은 ShaderMaterial에서 직접 구현 필요

🧱 2. 셰이더 기본 구조

vertex.glsl

void main() {
  vec4 modelPosition = modelMatrix * vec4(position, 1.0);
  vec4 viewPosition = viewMatrix * modelPosition;
  vec4 projectedPosition = projectionMatrix * viewPosition;
  gl_Position = projectedPosition;

  gl_PointSize = 2.0; // 기본 크기
}

fragment.glsl

void main() {
  gl_FragColor = vec4(1.0);
  #include <colorspace_fragment>
}

🧮 3. 파티클 사이즈 제어

Base size를 JS → shader로 전달

uniforms: {
  uSize: {
    value: 8;
  }
}

uniform float uSize;
gl_PointSize = uSize;

랜덤한 파티클 크기 aScale

const scales = new Float32Array(count);
scales[i] = Math.random();
geometries.setAttribute('aScale', new THREE.BufferAttribute(scales, 1));

attribute float aScale;
gl_PointSize = uSize * aScale;

고해상도 디스플레이 대응

uSize: {
  value: 8 * renderer.getPixelRatio();
}

🎯 4. 거리 기반 Size Attenuation 구현

vec4 viewPosition = viewMatrix * modelPosition;
gl_PointSize *= 1.0 / -viewPosition.z;

• 가까운 파티클은 커지고, 멀수록 작아짐 (원근 효과)

🌟 5. 파티클 형태 표현 (gl_PointCoord 활용)

✅ light point 형태

float strength = distance(gl_PointCoord, vec2(0.5));
strength = 1.0 - strength;
strength = pow(strength, 10.0);

vec3 color = mix(vec3(0.0), vColor, strength);
gl_FragColor = vec4(color, 1.0);

• gl_PointCoord: 각 파티클 내 픽셀의 UV 좌표 (0~1), GL_POINTS로 렌더링된 프래그먼트 쉐이더에서만 사용 가능
• 중심이 밝고 주변이 어두운 빛나는 효과

pow(base, exponent) 함수란?

float pow(float base, float exponent);

• base: 밑(base), 즉 곱해질 수
• exponent: 지수(exponent), 곱해지는 횟수

pow(a, b) = a를 b번 곱한 값 (a^b)

• uv.y가 0에 가까우면 pow(0.1, 2.0) = 0.01 → 거의 0
• uv.y가 1.0이면 pow(1.0, 2.0) = 1.0 → 그대로 유지
• 아래쪽에서는 영향이 거의 없고, 위쪽에서는 급격히 강해짐

이런 식으로 곡선적 효과(curved falloff), 스무스 페이드, 가속도 등을 구현

🎨 6. 색상 복원 (vertex → fragment 전달)

// vertex shader
varying vec3 vColor;
vColor = color;

// fragment shader
varying vec3 vColor;
vec3 color = mix(vec3(0.0), vColor, strength);

⏱️ 7. 시간에 따른 회전 애니메이션

JS에서 uTime uniform 설정

uniforms: {
  uTime: {
    value: 0;
  }
}
material.uniforms.uTime.value = clock.getElapsedTime();

중심과 거리 기반으로 각 파티클 회전

거리보정 node_modules/three/src/renderers/shaders/shaderLib/points.glsl.js를 보면 gl_PointSize *- (scale / -mvPosition.z ); 코드로 거리보정을 했다는 걸 확인할 수 있다.

vec4 modelPosition = modelMatrix * vec4(position, 1.0);
float angle = atan(modelPosition.x, modelPosition.z);
float distanceToCenter = length(modelPosition.xz);
float angleOffset = (1.0 / distanceToCenter) * uTime * 0.2;
angle += angleOffset;
modelPosition.x = cos(angle) * distanceToCenter;
modelPosition.z = sin(angle) * distanceToCenter;

• 중심에 가까울수록 더 빠르게 회전

🔀 8. 위치 랜덤성 보존: aRandomness

const randomness = new Float32Array(count * 3);
randomness[i3 + 0] = randomX;
randomness[i3 + 1] = randomY;
randomness[i3 + 2] = randomZ;
geometry.setAttribute('aRandomness', new THREE.BufferAttribute(randomness, 3));

attribute vec3 aRandomness;
modelPosition.xyz += aRandomness;

• 회전 적용 후 마지막에 위치 노이즈 추가

확장 아이디어

디버그 GUI 추가	uSize, speed, branch count 등 조정
블랙홀 구현	중심에 구체 추가, gravitational pull 표현
파티클 색상 애니메이션	속도나 위치에 따라 색상 보간

정리 요약

위치	Shader에서 직접 회전 애니메이션 적용
크기	uSize × aScale × 1.0 / -viewPosition.z
색상	vertex → fragment via vColor
셰이프	gl_PointCoord + pow(strength, n) 사용
랜덤성 유지	aRandomness를 position에 나중에 더함

이제 수천 개의 별이 회전하고 빛나는 은하를 셰이더만으로 구현할 수 있습니다. 🌌

---

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import GUI from 'lil-gui';
import galaxyVertexShader from './shaders/galaxy/vertex.glsl';
import galaxyFragmentShader from './shaders/galaxy/fragment.glsl';

/**
 * Base
 */
// 디버깅용 GUI 생성
const gui = new GUI();

// 캔버스 엘리먼트 선택
const canvas = document.querySelector('canvas.webgl');

// 씬 생성
const scene = new THREE.Scene();

/**
 * Galaxy 파라미터
 */
const parameters = {};
parameters.count = 200000; // 총 입자 수
parameters.size = 0.005; // 입자 기본 크기
parameters.radius = 5; // 은하 전체 반지름
parameters.branches = 3; // 은하 팔 개수
parameters.spin = 1; // 팔 회전량
parameters.randomness = 0.5; // 무작위 위치 변화 범위
parameters.randomnessPower = 3; // 무작위 변화 곡선 강도
parameters.insideColor = '#ff6030'; // 중심부 색상
parameters.outsideColor = '#1b3984'; // 외곽부 색상

let geometry = null;
let material = null;
let points = null;

// 은하 생성 함수
const generateGalaxy = () => {
  // 이전 은하 제거
  if (points !== null) {
    geometry.dispose();
    material.dispose();
    scene.remove(points);
  }

  /**
   * Geometry
   */
  geometry = new THREE.BufferGeometry();

  const positions = new Float32Array(parameters.count * 3); // 위치 속성
  const colors = new Float32Array(parameters.count * 3); // 색상 속성
  const scales = new Float32Array(parameters.count * 1); // 크기 스케일 속성
  const randomness = new Float32Array(parameters.count * 3); // 무작위 오프셋

  const insideColor = new THREE.Color(parameters.insideColor);
  const outsideColor = new THREE.Color(parameters.outsideColor);

  for (let i = 0; i < parameters.count; i++) {
    const i3 = i * 3;

    // 반지름 및 팔의 각도 계산
    const radius = Math.random() * parameters.radius;
    const branchAngle =
      ((i % parameters.branches) / parameters.branches) * Math.PI * 2;

    // 기본 위치 (회전 적용 전)
    positions[i3] = Math.cos(branchAngle) * radius;
    positions[i3 + 1] = 0;
    positions[i3 + 2] = Math.sin(branchAngle) * radius;

    // 무작위 위치 변형
    const randomX =
      Math.pow(Math.random(), parameters.randomnessPower) *
      (Math.random() < 0.5 ? 1 : -1) *
      parameters.randomness *
      radius;
    const randomY =
      Math.pow(Math.random(), parameters.randomnessPower) *
      (Math.random() < 0.5 ? 1 : -1) *
      parameters.randomness *
      radius;
    const randomZ =
      Math.pow(Math.random(), parameters.randomnessPower) *
      (Math.random() < 0.5 ? 1 : -1) *
      parameters.randomness *
      radius;

    randomness[i3 + 0] = randomX;
    randomness[i3 + 1] = randomY;
    randomness[i3 + 2] = randomZ;

    // 중심에서 외곽으로 색상 보간
    const mixedColor = insideColor.clone();
    mixedColor.lerp(outsideColor, radius / parameters.radius);

    colors[i3] = mixedColor.r;
    colors[i3 + 1] = mixedColor.g;
    colors[i3 + 2] = mixedColor.b;

    // 입자 크기 스케일 랜덤화
    scales[i] = Math.random();
  }

  // 속성 버퍼에 설정
  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
  geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
  geometry.setAttribute('aScale', new THREE.BufferAttribute(scales, 1));
  geometry.setAttribute(
    'aRandomness',
    new THREE.BufferAttribute(randomness, 3),
  );

  /**
   * Material
   */
  material = new THREE.ShaderMaterial({
    depthWrite: false, // 깊이 버퍼에 기록하지 않음
    blending: THREE.AdditiveBlending, // 색상 혼합 방식 (더 밝게)
    vertexColors: true, // vertex 속성의 color 사용
    vertexShader: galaxyVertexShader, // 정점 쉐이더
    fragmentShader: galaxyFragmentShader, // 프래그먼트 쉐이더
    uniforms: {
      uTime: { value: 0 }, // 시간값 (애니메이션용)
      uSize: { value: 30 * renderer.getPixelRatio() }, // 포인트 사이즈 보정
    },
  });

  /**
   * Points (점 입자 시스템)
   */
  points = new THREE.Points(geometry, material);
  scene.add(points);
};

// GUI 인터페이스 설정
// 각 파라미터 변경 시 은하 다시 생성
['count', 'radius', 'branches', 'randomness', 'randomnessPower'].forEach(
  (key) => {
    gui.add(parameters, key).onFinishChange(generateGalaxy);
  },
);
gui.addColor(parameters, 'insideColor').onFinishChange(generateGalaxy);
gui.addColor(parameters, 'outsideColor').onFinishChange(generateGalaxy);

/**
 * 화면 크기 대응
 */
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

window.addEventListener('resize', () => {
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

/**
 * 카메라
 */
const camera = new THREE.PerspectiveCamera(
  75,
  sizes.width / sizes.height,
  0.1,
  100,
);
camera.position.set(3, 3, 3);
scene.add(camera);

// 궤도 컨트롤
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;

/**
 * 렌더러
 */
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

/**
 * 은하 생성 및 애니메이션 루프
 */
generateGalaxy();

const clock = new THREE.Clock();
const tick = () => {
  const elapsedTime = clock.getElapsedTime();
  material.uniforms.uTime.value = elapsedTime; // 시간 업데이트
  controls.update();
  renderer.render(scene, camera);
  window.requestAnimationFrame(tick); // 다음 프레임 호출
};

tick();

 

// vertex.glsl

// Uniforms: 외부에서 전달되는 전역 변수
uniform float uTime; // 시간에 따라 회전 애니메이션을 만들기 위한 시간 값 (초 단위)
uniform float uSize; // 각 입자의 기본 크기 (카메라 거리 보정 전)

// Attributes: 각 정점마다 고유하게 존재하는 속성
attribute float aScale; // 입자의 랜덤 크기 계수 (0.0~1.0 사이)
attribute vec3 aRandomness; // 입자 위치에 적용될 무작위 오프셋 (x, y, z)

// Varying: 정점 → 프래그먼트 셰이더로 전달되는 값
varying vec3 vColor; // 최종 프래그먼트에서 사용할 색상 값

void main() {
  /**
  * Position 계산 (모델 좌표 → 뷰 좌표 → 클립 좌표)
  */
  vec4 modelPosition = modelMatrix * vec4(position, 1.0); // 로컬 위치 → 월드 위치

  // 각 입자에 시간 기반 회전 애니메이션 적용
  float angle = atan(modelPosition.x, modelPosition.z); // 중심 기준 각도 계산
  float distanceToCenter = length(modelPosition.xz); // 중심에서의 거리 (회전 반지름)
  float angleOffset = (1.0 / distanceToCenter) * uTime * 0.2; // 거리에 따라 각도 보정 (더 멀리 있는 입자가 더 천천히 회전)
  angle += angleOffset; // 보정 각도를 적용한 최종 회전값
  modelPosition.x = cos(angle) * distanceToCenter; // x좌표 회전 반영
  modelPosition.z = sin(angle) * distanceToCenter; // z좌표 회전 반영

  // 무작위 오프셋을 통해 입자 퍼짐 효과 강화
  modelPosition.xyz += aRandomness;

  // 뷰 변환 및 투영 변환 수행
  vec4 viewPosition = viewMatrix * modelPosition;
  vec4 projectedPosition = projectionMatrix * viewPosition;
  gl_Position = projectedPosition;

  /**
  * Size 계산 (카메라 거리 기반 보정 포함)
  */
  gl_PointSize = uSize * aScale; // 기본 사이즈와 스케일을 곱함
  gl_PointSize *= (aScale / -viewPosition.z); // z축 거리 반비례로 크기 조절 (카메라 가까이일수록 큼)

  /**
  * 색상 전달
  */
  vColor = color; // color 속성(attribute vec3 color;)을 varying으로 전달
}

// fragment.glsl

// varying: 정점 셰이더에서 넘어온 보간된 값
varying vec3 vColor; // 입자의 색상 정보

void main() {
  /**
  * 원형 입자 마스크 생성 (gl_PointCoord 기준)
  * 중심으로부터 멀어질수록 어두워지게 처리
  */

  float strength = distance(gl_PointCoord, vec2(0.5)); // 중심에서의 거리 (0.0 ~ 0.707)
  strength = 1.0 - strength; // 반전 (중앙이 1.0, 외곽이 0.0)
  strength = pow(strength, 10.0); // 가장자리 부드럽게 감소시키기 (거듭제곱 커브)

  /**
  * 최종 색상 조합 (입자 색상과 강도 기반으로 혼합)
  */
  vec3 color = mix(vec3(0.0), vColor, strength); // strength가 0에 가까울수록 검정색에 가까워짐

  gl_FragColor = vec4(color, 1.0); // 알파값은 1.0 (불투명)

  #include <colorspace_fragment> // sRGB 색 공간으로 색상 보정
}