three.js 이미지를 사용한 particle

Unity와 같은 게임엔진에서 이펙트를 다루어보았다면 파티클 이펙트는 역시 특정 이미지를 기반으로 만들어진다는 것을 알 것이다. three.js에서는 어떻게 진행되는지 알아보자.

 

// image load
const textureLoader = new THREE.TextureLoader();
const particleTexture = textureLoader.load('이미지 경로');

const material = new THREE.PointsMaterial({
    size: 0.3,
    map: particleTexture,

    // set particle image transparent
    transparent: true,
    alphaMap: particleTexture,
    depthWrite: false,
})

image를 load하는 부분을 보자. TextureLoader객체를 만들고 이미지 경로에서 파티클 텍스처를 load해온다.

 

이를 기반으로 material을 만들 때 map으로 texture를 설정하면, 이미지를 기반으로 파티클을 생성할 수 있다.

여기서 이미지를 그냥 사용하는 것이 아니라 뒷 배경을 투명하게 하고 싶은 경우 방법이 있다.

 

transparent 설정을 true로 세팅하고, alphaMap을 설정한다. alphaMap의 경우 명도가 높을수록(흰 색에 가까울 수록) 불투명하고, 명도가 낮을수록(검은 색에 가까울 수록) 투명하게 처리된다.

 

depthWrite는 depthTest라는 개념과 관련이 있다. 오브젝트를 렌더링 할 때 webGL에서 depth buffer에 담은 순서대로 그리게 되는데, 이 순서에 따라서 실제 거리와는 상관없이 렌더링 depth 가 뒤바뀌는 상황이 생길 수 있다.

depthTest는 depth buffer에 담은 순서와 실제 카메라로부터 떨어진 거리가 일치하는지에 대한 테스트이고, 이를 고려하여 그리는 것을 depthWrite라고 하는 모양이다.

 

코드로 돌아와서 이 depthWrite를 false로 설정하면, 이 depth buffer의 순서와 실제 거리와 일치하는지를 고려하지 않고 전부 그려낸다.