three.js 텍스처 매핑, 알파 맵과 알파 테스트로 이미지 자르기와 그림자 처리 - alphaMap, alphaTest

이번에는 배경이 투명하지 않는 주사위 이미지를 Material(머티리얼)의 alphaMap(알파 맵) 속성을 사용하여 이미지를 자르고 반투명하게 처리해 보겠습니다. 그리고 alphaTest(알파 테스트) 속성을 사용하여 처리되는 범위를 조정해 보겠습니다. (그림자는 자동으로 이미지에 맞게 처리됩니다.)

 

그럼 alphaMap(알파 맵) 속성에 대해 간단하게 알아보고 진행하겠습니다.

 

alphaMap(알파 맵)은 흰색과 검은색 그리고 흰색과 검은색 사이의 회색(밝은 회색부터 어두운 회색까지)으로 구성된 이미지입니다.

 

alphaMap(알파 맵)에 있는 흰색은 이미지 처리 시 원본 이미지가 그대로 투과됩니다.

alphaMap(알파 맵)에 있는 검은색은 이미지 처리 시 원본 이미지가 투과되지 않습니다. (검은색과 같은 위치에 있는 이미지는 삭제 처리됩니다.)

alphaMap(알파 맵)에 있는 흰색과 검은색 사이의 회색(밝은 회색부터 어두운 회색까지)은 이미지 처리 시 반투명하게 투과됩니다. (회색이 어두울 수 록 투명해집니다.)

 

즉, alphaMap(알파 맵)은 검은색의 농도에 따라 이미지 처리 시 삭제(검은색)하거나 반투명(밝은 회색부터 어두운 회색까지 농도에 따라 투명도가 달라짐)으로 처리됩니다.

 

그리고 alphaTest(알파 테스트) 속성 값인 알파 값(0.1 ~ 0.9)에 따라 회색(밝은 회색부터 어두운 회색까지)의 처리되는 범위가 넓어집니다. (기본적으로 alphaTest 속성은 0입니다. 그리고 alphaTest 속성이 1이 되면 흰색까지 투과되지 않습니다.)

 

즉, 알파 값이 작을수록 alphaMap(알파 맵)에서 어두운 회색들은 투과되지 않습니다. 반대로 알파 값이 클수록 밝은 회색까지도 투과되지 않습니다.

 

그럼 테스트를 통해 확인해 보겠습니다.

 

PPT로 alphaMap(알파 맵)으로 사용할 이미지를 간단하게 만들어 보겠습니다.

1. 주사위 이미지와 같은 크기(가로/세로는 3cm)의 도형(직사각형)을 생성합니다.
2. 도형 윤곽선은 "윤곽선 없음"으로 설정합니다.
3. 도형을 선택하고 콘텍스트 메뉴에서 "도형 서식"을 클릭합니다.
4. 도형 서식에서 "그라데이션 채우기"를 선택하고 그라데이션 중지점에서 첫 번째 중지점을 선택하고 색은 검은색으로 선택합니다. 그리고 그라데이션 중지점에서 세 번째 중지점을 선택하고 색은 흰색으로 선택합니다.
5. 도형을 PNG 파일로 저장합니다. (저는 dicemap.png으로 저장하였습니다.)

 

프로젝트의 resources \ textures 폴더에 alphaMap(알파 맵)으로 사용할 이미지(dicemap.png) 파일을 추가합니다.

 

테스트를 위해 Material(머티리얼) 배열에서 5번 주사위 이미지를 배경이 투명하지 않는 주사위 이미지(dice5.png)로 변경하고 추가된 이미지 파일(dicemap.png)을 TextureLoader(텍스처로더)로 로드하여 alphaMap 속성 값으로 설정합니다. 그리고 alphaTest 속성 값을 0으로 설정합니다.

// 머티리얼 배열
const box2Materials = [
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice5.png"), alphaMap: box2TextureLoader.load("resources/textures/dicemap.png"), side: THREE.DoubleSide, alphaTest: 0, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice2t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice1t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice6t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice3t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice4t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true})
];

 

마우스로 이동해서 보시면 5번 주사위 이미지가 alphaMap(알파 맵)으로 이미지 처리가 되어서 alphaMap(알파 맵)에서 검은색 영역은 삭제처리되고 회색(밝은 회색부터 어두운 회색까지) 영역은 반투명하게 처리되어 나오는 것을 확인할 수 있습니다.

 

alphaTest(알파 테스트) 속성 값인 알파 값(0.1 ~ 0.9)에 따라 다음처럼 처리됩니다.

그림자도 처리된 이미지에 맞게 나타납니다. (alphaMap(알파 맵) 이미지가 그라데이션으로 되어있어 처리된 이미지 크기만큼 그림자가 나오게 됩니다.)

 

 

그럼 5번 주사위 이미지(dice5.png)에 맞게 alphaMap(알파 맵) 이미지를 만들어 처리해 보겠습니다.

1. 5번 주사위 이미지를 만든 PPT에서 도형의 윤곽선 색을 흰색으로 변경합니다. (윤관선 색이 검은색이면 원본 이미지에 있는 윤관선이 투과되지 않기 때문입니다.)
2. 검은색 점 도형은 흰색으로 흰색 배경은 검은색으로 변경합니다. (흰색만 투과되기 때문입니다.)
3. 도형을 PNG 파일로 저장합니다. (기존 파일명에 'm'를 추가하여 dice5m.png으로 저장하였습니다.)

 

프로젝트의 resources \ textures 폴더에 alphaMap(알파 맵)으로 사용할 5번 주사위 이미지(dice5m.png) 파일을 추가합니다.

 

Material(머티리얼) 배열에서 추가된 이미지 파일(dice5m.png)로 alphaMap 속성의 값을 변경합니다. 그리고 alphaTest 속성 값을 0.1로 설정합니다. (alphaTest 속성 값을 0으로 설정하면 투명처리가 되지 않습니다.)

// 머티리얼 배열
const box2Materials = [
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice5.png"), alphaMap: box2TextureLoader.load("resources/textures/dice5m.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice2t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice1t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice6t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice3t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice4t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true})
];

 

그러면 5번 주사위 이미지가 투명하게 처리되어 보이게 됩니다.

 

참고로, 어도비 포토샵(Photoshop)에서도 alphaMap(알파 맵)과 같은 방식으로 이미지의 배경을 투명하게 하거나 반투명하게 처리하여 여러 이미지들을 겹칠 때 사용합니다. 이런 방식을 alpha channel(알파 채널)이라고 합니다.