Antialiasing

 

Transparency는 Antialiasing과 연관이 있다.

 

 

안티엘리어싱을 사용할지 말지는 Renderer가 결정한다.  gpu 렌더러가 안티엘리어싱을 제공하면 사용할 수 있고 그렇지 않다면 사용하지 못하는 것이다.

 

여기서 시작하여 어떤 물체가 투명하냐 불투명하냐를 결정하는 것은 Material에서 결정되게 된다.

 

이 둘은 무슨 관계일까?

 

그려지는 물체가 투명도가 있으면 원래 그려져 있던 것과 새롭게 그려지는 것을 블렌딩 하는 과정에서 투명도를 어떻게 반영할 것인가를 만들어서 그려냅니다.

 

이 투명도는 GPU의 블렌딩이 해주어야 합니다.  

 

 

안티앨리어싱이 없으면 계단현상이 일어난다. 이는 픽셀이 생각보다 크기 때문이다.

 

해상도가 정말 좋다면 안티앨리어싱을 안 해도 된다. 다만 어찌 됐는 계단현상을 발생할 것이다.

 

이는 그림보다는 글씨에 더 뚜렷하게 나타난다. 

 

 

그리고 안티앨리어싱은 멀리서 볼 때 더 뚜렷하게 나타난다.

 

 

안티앨리어싱을 사용하지 않으면 하나의 픽셀에서 색상의 비율을 전부 표현하지 않고 단 하나로 표현하기 때문에 발생합니다. 반대로 사용하면 이를 색상 비율대로 표현하려고 하죠.

 

그런데 이를 각 비율대로 나누어 계산하여 렌더링 하는 것은 생각보다 많은 계산이 필요하죠.

 

컴퓨터에서는 이를 표현하기 위해 수많은 방법이 있습니다.

 

SSAA라고 불리는 Super sampling AA 방식, MSAA ( Multi sampling AA), FXAA(NVIDIA), MLAA 등등

 

예를 들어 슈퍼 샘플링은 픽셀을 사등분하는 행위를 반복하면서  비율을 구해 칠하는 방법이고

멀티 샘플링은 교차되는 영역에서만 등분하여하는 것이다.

 

회사마다 안티앨리어싱의 기술이 전부 다르다. 패턴을 만드는 방법의 알고리즘을 사용하기에 렌더링 결과가 다릅니다.

투명도와 안티앨리어싱(Anti-aliasing)은 이미지나 그래픽 디자인에서 중요한 개념이며, 서로 밀접한 관련이 있습니다.

투명도(Transparency)는 이미지나 그래픽 디자인에서 투명한 부분이 있는지 여부를 나타내는 값입니다. 투명한 부분이 있다면 그 아래에 있는 배경이나 다른 그래픽 요소를 볼 수 있습니다. 투명도는 이미지나 그래픽 디자인에서 부드러운 경계와 혼합된 효과를 만들 수 있습니다.

안티앨리어싱은 이미지나 그래픽 디자인에서 경계 부분의 계단 현상을 완화하는 기술입니다. 안티앨리어싱을 적용하면 경계 부분의 픽셀이 부드러워져서 이미지나 그래픽 요소가 더욱 자연스럽게 보입니다. 안티앨리어싱을 사용하지 않으면, 이미지나 그래픽 요소의 경계 부분이 뾰족한 각도로 표시되는 경우가 많습니다.

따라서, 투명도와 안티앨리어싱은 모두 이미지나 그래픽 디자인에서 부드러운 경계와 혼합된 효과를 만들기 위한 중요한 요소입니다. 안티앨리어싱은 투명한 부분이 있는 이미지에서 경계 부분을 더욱 부드럽게 만들어줄 수 있습니다.

 

블렌딩(Blending)은 그래픽스에서 렌더링 된 이미지를 서로 합성하여 새로운 이미지를 생성하는 기술입니다. 이 과정에서 이미지의 투명도 값(alpha 값)을 고려하여 각각의 픽셀 값을 결합시킵니다. 

예를 들어, 두 개의 이미지 A와 B가 있다고 가정해 봅시다. 이때 블렌딩을 적용하면, A와 B의 일부 혹은 전체를 서로 합성하여 새로운 이미지를 만들 수 있습니다. 이때 A와 B가 겹치는 부분에서는 각각의 이미지의 색상 값이 서로 합쳐지며, 두 이미지가 겹치지 않는 부분에서는 하나의 이미지만 보이게 됩니다.

블렌딩은 게임 등에서 많이 활용되며, 예를 들어 적 캐릭터를 쏘는 게임에서 총알이 적 캐릭터에 맞았을 때, 적 캐릭터의 피격 이펙트와 총알의 경로를 합성하여 보여줄 수 있습니다. 이때 블렌딩 기술이 사용됩니다.

 

투명도와 커버리지는 그래픽스에서 서로 밀접한 개념입니다. 투명도는 객체나 텍스처의 투명한 부분의 비율을 나타내는 값으로, 알파(Alpha) 값이라고도 합니다. 커버리지는 픽셀의 커버(Cover) 영역의 비율을 나타내는 값으로, 레스터라이제이션(Rasterization) 과정에서 사용됩니다.

커버리지는 레스터라이제이션에서 생성된 픽셀의 각각의 커버 영역에 대해 결정됩니다. 예를 들어, 선을 그릴 때 레스터라이제이션은 선이 픽셀의 어느 영역을 커버하고 있는지 계산합니다. 이때, 선이 그려지는 픽셀의 커버리지는 1, 선이 그려지지 않는 영역의 커버리지는 0이 됩니다.

투명도는 객체나 텍스처의 투명한 부분의 비율을 나타내는 값입니다. 예를 들어, 객체나 텍스처의 일부가 투명하다면, 그 부분의 알파 값은 0에 가깝게 됩니다. 반면에 불투명한 부분은 알파 값이 1에 가까워집니다.

그래서, 레스터라이제이션에서는 커버리지 값과 투명도 값을 모두 고려하여 색상 값을 결정합니다. 예를 들어, 객체나 텍스처의 일부가 투명하다면, 해당 영역의 커버리지 값은 1에 가까우나 알파 값은 0에 가까우므로, 색상 값은 투명한 부분의 색상 값과 불투명한 부분의 색상 값을 적절히 섞어 결정됩니다.

 

Blending factor(블렌딩 팩터)는 그래픽스에서 블렌딩(Blending) 작업에 사용되는 값으로, 블렌딩의 결과에 영향을 미칩니다. 블렌딩은 두 개 이상의 객체나 텍스처를 합치는 작업으로, 색상 값과 투명도 값 등을 결합하여 렌더링 결과를 생성합니다.

블렌딩 팩터는 일반적으로 0에서 1 사이의 값을 가지며, 블렌딩 작업에서 사용될 각 색상 값의 비중을 조절합니다. 예를 들어, 두 개의 색상 값을 합치는 경우, 각 색상 값에 대해 블렌딩 팩터를 지정하여 두 색상 값의 비중을 결정할 수 있습니다. 블렌딩 팩터의 값이 0에 가까울수록 해당 색상 값의 비중이 작아지고, 1에 가까울수록 해당 색상 값의 비중이 커집니다.

예를 들어, 두 개의 색상 값 c1과 c2가 있을 때, 블렌딩 팩터 f를 사용하여 두 색상 값을 조합하는 방식은 다음과 같습니다.

    blended_color = f * c1 + (1 - f) * c2 ,  혹은  a1*c1 + ( 1 - a2) c2
여기서 f는 0에서 1 사이의 값이며, c1과 c2는 각각 합쳐지는 색상 값입니다. 따라서, 블렌딩 팩터 f의 값에 따라 합쳐진 색상 값이 달라집니다. 블렌딩 팩터는 또한 알파(Alpha) 값과 관련하여 투명도에 대한 블렌딩을 수행하는 데에도 사용됩니다.

 

 

디더링

 

 

 

디더링(Dithering)은 이미지나 비디오에서 색상 수를 줄이는 과정에서 발생하는 색조 변형과 같은 문제를 해결하기 위해 사용되는 기술입니다. 일반적으로, 디지털 이미지나 비디오는 유한한 색상 범위 내에서 표현되는데, 이것은 실제 세상에서 볼 수 있는 무한한 색상을 완벽하게 표현하지 못합니다. 따라서, 색상의 개수를 줄이는 것은 일반적인 데이터 압축 기법 중 하나입니다.

하지만, 색상 수를 줄이는 것은 이미지나 비디오의 화질을 저하시키는 문제가 발생합니다. 이러한 문제를 해결하기 위해 디더링 기술이 사용됩니다. 디더링은 색상 수를 줄이면서도 고해상도의 이미지를 생성하는 기술로, 주어진 색상 범위 내에서 가능한 한 가깝게 원래 색상을 대표할 수 있는 근삿값을 찾아내는 것입니다.

디더링은 일반적으로, 이미지나 비디오에서 발생하는 색조 변형을 최소화하기 위해 작동합니다. 디더링은 무작위 노이즈를 추가하여 이미지나 비디오의 색상 범위를 인위적으로 늘리는 방법으로 작동합니다. 이를 통해 무한한 색상을 표현하는 것과 같은 효과를 얻을 수 있습니다.

디더링은 이미지나 비디오에서 색상 수를 줄이는 경우 외에도, 인쇄물에서 색상 범위를 확장하는 데에도 사용됩니다.

 

 

Three.js에서 투명도를 주었을 때 이상하게 투명도가 적용되지 않은 경우가 있다. 이 경우 Material의 alphaToCoverage 속성을 살펴보자

 

alphaToCoverage는 WebGL 2.0에서 지원하는 alpha-to-coverage 기능을 사용하여 객체들의 불투명도를 처리하는 기술입니다. 이 기능은 객체의 불투명도(alpha) 값을 사용하여 각 픽셀에 대해 커버리지 값을 계산하고, 이를 사용하여 멀티샘플링 앤티앨리어싱을 수행합니다.

일반적으로 멀티샘플링 앤티앨리어싱에서는 샘플 된 픽셀이 객체에 완전히 포함되는 경우 해당 픽셀의 커버리지 값이 1이 되고, 객체가 완전히 포함되지 않는 경우 0이 됩니다. 그러나 alphaToCoverage를 사용하면 객체에 완전히 포함되지 않더라도 부분적으로 포함된 경우 해당 픽셀의 커버리지 값을 일정 비율로 조정하여 더 자연스러운 블렌딩 효과를 얻을 수 있습니다.