cub3d - transparency

로데브 中 텍스쳐를 이해하는 페이지.

 

이해했던 흐름 그대로의 정리라서 로데브 원본과 살짝 차이가 있습니다.

 

 

1. 벽 텍스쳐

2. 천장, 바닥 텍스쳐

3. 텍스쳐에 투명도 넣기

 

---

3. 텍스쳐에 투명도 넣기

 

 

앞에서 mlx에서는 0xAARRGGBB 색상 형식을 사용하고, 실제로 투명도를 지원하는 것도 확인해보았다. (위 움짤)

alpha값이 있는 색상을 바로 mlx 함수로 띄웠던 경우다.

 

하지만 cub3d처럼 buf[y][x]에 색을 저장하는 방식에서는 투명도를 다르게 구현해야 한다.

'완전 투명'한 경우를 제외하고는, 아무리 반투명한 색을 넣어도 스크린에 띄워보면 '완전 불투명'한 이미지로 출력된다.

 

왜냐하면 buf[y][x] = color 과정에서 기존 색상을 남겨두지 않고 그냥 새로운 색상을 덮어 씌워버리기 때문이다.

지금은 파란색 위에 반투명한 노란색을 놓는다고 색이 섞이는 것이 아니라 그냥 노란색만 남겨진다. 

따라서 투명도를 적용하기 위해서는 두 색을 섞어 새로운 색상을 만들어서 버퍼에 넣어야 한다.

 

 

이렇게

투명도 참고 davidwalsh.name/hex-opacity

 

 

 

두 색을 섞을 땐 각 색상에 투명도 가중치를 주고 더해준다.

result = weight * new + (1 - weight) * old


여기서 가중치 weight는
weight = (double) (255 - new_alpha) / 255;

 

ex) 완전 불투명한 색을 추가하면

new_alpha = 0
weihgt = 1
result = new

이기 때문에 새로운 색만 보이게 된다.

 

 

1) 새로 가져오는 색에 투명도가 적용된 경우

1. new와 old를 각각 r, g, b로 분리한다.

2. new에서 alpha값을 뽑는다.

3. 가중치를 반영해서 r, g, b 각각 새로운 색을 만든다.

4. result color로 합쳐준다.

 

 

2) 새로 가져오는 색은 불투명하지만, 투명도를 추가하고 싶은 경우

1. new와 old를 각각 r, g, b로 분리한다.

2. new에 적용할 alpha값을 정한다.

3. 가중치를 반영해서 r, g, b 각각 새로운 색을 만든다.

4. result color로 합쳐준다.

 

 

과제에서는 

old: 기존 buf[y][x]에 저장된 색

new: 새로 가져오는 data[tex_point] 색이 될 것이다.

 

 

각각의 색상 요소를 분리하고 합치는 법은 mlx_get_data_addr 페이지 - rgb에 설명되어 있다.

 

 

 

1) 벽 색이 0xCC00FF00 인 경우

 

 

2) 완전 불투명한 벽에 0x80만큼의 투명도를 준 경우