은하수 배경 만들기

이 글은 Three.js로 진행한 태양계 만들기 시리즈의 마지막 단계다. 사실적인 은하수 배경을 추가한다. 이는 태양계를 탐험하는 느낌을 향상시킬 것이다. 이를 위해 큐브의 안쪽 면에 은하수 텍스처를 입힌 커다란 큐브를 만든다.

이 글은 태양계 시뮬레이터 시리즈의 일부다:

1. Three.js 좌표계 기초
2. Three.js PBR (물리 기반 렌더링) 재질 기초
3. 사실적인 지구 만들기
4. 사실적인 태양 만들기
5. 고리가 있는 행성 만들기
6. 불규칙한 형태의 위성 만들기
7. 태양에 후광 효과 추가하기
8. 은하수 배경 만들기
9. 천체 궤도 계산하기

배경을 만들기 위해, 먼저 THREE.TextureLoader()를 이용해 고해상도 은하수 이미지를 불러온다. 그런 다음 매끄러운 렌더링을 위해 선형 필터링(linear filtering)을 적용한다.

const loader = new THREE.TextureLoader();
const texture = loader.load('assets/galaxy_starfield_sharpen.jpg');
texture.magFilter = THREE.LinearFilter;
texture.minFilter = THREE.LinearFilter;

등장방형(equirectangular) 텍스처를 큐브에 표시하기 위해, Three.js의 내장 셰이더 ShaderLib.equirect를 사용한다. 이 셰이더는 스카이박스나 배경 환경을 만들도록 설계되었다.

const shader = THREE.ShaderLib.equirect;
const material = new THREE.ShaderMaterial({
	fragmentShader: shader.fragmentShader,
	vertexShader: shader.vertexShader,
	uniforms: shader.uniforms,
	depthWrite: false, // Prevents the background from interfering with depth calculations
	side: THREE.BackSide, // Renders the texture on the inside of the geometry
});
material.uniforms.tEquirect.value = texture;

side: THREE.BackSide 렌더링은 박스 안쪽에 별들을 렌더링한다. 마지막으로 커다란 박스 geometry를 만들어 박스가 카메라를 둘러싸고, 카메라가 항상 박스 내부에 있게 한다. 셰이더가 텍스처를 등장방형으로 매핑하므로, 큐브는 왜곡 없이 하늘 전체를 효과적으로 표현할 수 있다.

const plane = new THREE.BoxGeometry(100, 100, 100); // set the size manually depending on the map scale
const background = new THREE.Mesh(plane, material);
scene.add(background);

이 배경을 적용한 후, 장면은 이제 다음과 같이 보인다.

마침내 태양계 만들기 시리즈를 마친다. 지금까지의 글들을 바탕으로, 이제 사실적인 태양계를 만드는 데 필요한 모든 지식을 갖추었을 것이다. 앞으로는 행성에 라벨 붙이기, 궤도 그리기 같은 UI/UX 기능을 중심으로 업데이트를 계속해 나갈 예정이다.