Troika: 텍스트 앤티앨리어싱 개선을 위한 빠른 아이디어

제안 감사합니다! 나는 비스듬한 각도에서도 흐릿한 가장자리를 발견하고 제거하고 싶기 때문에 이것을 확실히 조사할 것입니다.

이론적으로 distance 의 변경과 vTroikaGlyphUV * vTroikaGlyphDimensions 의 변경은 둘 다 글꼴 공간 단위의 거리를 나타내기 때문에 동일해야 하지만 거기에 약간의 미묘한 차이가 있어야 한다고 생각합니다. 간과했다. 당신이 보여준 아티팩트를 피할 수 있다면 기꺼이 당신의 변경 사항을 통합하겠습니다. :)

엄청난! 변경은 한 줄만큼 간단합니다(그리고 이를 수용하기 위해 해당 거리 인수를 전달). 그래도 원시 코드를 원하시면 내일 근무할 때 보내 드리겠습니다.

이론적으로 거리의 변화와 vTroikaGlyphUV * vTroikaGlyphDimensions의 변화는 모두 글꼴 공간 단위의 거리를 나타내기 때문에 동일해야 한다고 생각합니다.

파생 상품이 어떻게 같은지 정확히 이해하지 못합니다. distance 는 내가 추측하는 SDF 거리이지만 다른 하나는 스케일된 uv 위치입니다. 나는 코드와 그것들이 어떻게 비교되는지 보지 않았지만, 파생 상품이 달라야 하는 것처럼 느껴집니다. 내가 아는 한 fwidth 는 이웃 프래그먼트에서 동일한 특정 입력 값과 함께 인수로 전달된 특정 입력 값의 차이를 취합니다. 이는 이웃 프래그먼트가 동시에 병렬로 실행되기 때문에 가능합니다. 나는 오늘 일찍 gl_FragColor.rgb = vec3(fwidth(gl_FragColor.x + gl_FragColor.g + gl_FragColor.b)); 로 테스트를 실행하여 에지 감지/소벨 필터와 같은 에지를 렌더링하는지 확인하고 그 사실을 조금 확인하려고 시도했으며 실제로 했습니다.

토론에 감사드립니다. 이 내용이 가끔 제 머리를 아프게 합니다. ;)

내가 "동등하다"고 말했을 때 나는 둘 다 동일한 단위의 거리를 나타낸다는 것을 의미했지만 정확히 같지는 않습니다.

백업, 여기서 우리가 원하는 것은 프래그먼트 간의 _잠재적_ 변화율입니다. 귀하가 제안한 것처럼 distance 변수의 변경 사항을 사용하면 종종 정확하지만 경우에 따라 매우 부정확할 수 있습니다. 이는 해당 값이 샘플링된 SDF가 _non-uniform_이기 때문입니다. 곡선을 그리며 글리프를 가로질러 변경 방향을 전환합니다. 따라서 인접 조각 간의 distance 도함수는 글리프 경로 사이에서 거리 필드가 증가에서 감소로 전환되는 경우와 같이 너무 작거나 0일 수도 있고, 텍스트가 표시될 때와 같이 너무 클 수 있습니다. 작은 크기에서 조각 격자는 예측할 수 없는 위치에서 SDF를 오버레이합니다. 나는 그것이 당신이보고있는 유물 중 적어도 일부를 설명한다고 생각합니다.

그렇다면 distance 를 사용하지 않고 _잠재적_ 변화율을 어떻게 결정할 수 있습니까? "스케일된 uv 위치"라고 부르는 것은 본질적으로 distance 와 동일한 단위를 사용하는 글리프의 직사각형 내의 x/y 좌표입니다. 그 x/y의 도함수는 조각 사이의 잠재적인 이동 속도를 제공합니다. 전체적으로 distance 를 사용하는 것보다 더 나은 결과를 제공합니다. 이는 글리프 전체의 _균일한_ 변화율을 기반으로 하기 때문에 우리는 아티팩트를 얻지 못하고 작은 크기에서 더 정확합니다.

그러나 보았듯이 분해되는 위치는 비스듬한 각도입니다. 이러한 경우 수직의 잠재적 x/y 변화율은 수평의 그것과 훨씬 다릅니다. 그래서 우리는 한 방향에서는 너무 크고 다른 방향에서는 너무 작은 잠재적 변화율에 대해 단일 값을 사용하게 되어 해당 단편에서 SDF의 실제 변경 방향에 따라 흐릿하거나 고르지 못한 선을 제공합니다.

예, 경사의 경우 확실히 개선할 여지가 있지만 distance 의 미분을 사용하는 것만으로는 충분하지 않습니다. 나는 물론 이것을 개선하기 위한 아이디어에 열려 있습니다. 한 가지 가능성은 시나리오(경사에 가까운 큰 텍스트 크기, 비스듬한 각도)를 감지하고 distance 파생 상품을 이 경우에만 사용하는 것입니다.

네, 생각만 해도 혼란스럽네요, 하하. 디스턴스 필드가 덜 부드럽다는 것을 알 수 있습니다.

이러한 글리치 픽셀은 외부 조각에 이상한 거리 값이 있기 때문일 수 있습니다.

멀리서 보면 엄청나게 고르지 못하지만 UV가 더 좋아지는 것을 확실히 볼 수 있습니다. 아마도 카메라 거리에 따라 거리 변수와 UV 사이를 보간하는 것이 잘 작동할 것입니다. 가까울 때 더 많은 fwidth(distance)를 선택하고 멀리 있을 때 더 많은 fwidth(uv)를 선택합니다.

비교를 위해(정확히 동일한 카메라 위치와 방향에서 두 개를 캡처하지 않았지만 어쨌든 차이를 잘 보여주는 것 같습니다):
거리(0.8 계수):

UV:

이 수정으로 사용자 정의 텍스트 변환의 ​​결과가 크게 향상되었음을 알 수 있습니다. 다음은 createDerivedMaterial 를 사용하여 곡선을 따르도록 수정된 일부 텍스트입니다( 이 기술 참조 ). 이것은 현재 troika-three-text shader를 사용합니다.

다음은 동일한 스크린샷이지만 @asbjornlystrup 을 troikaGetAADist 로 수정했습니다.

두 번째 장면에서는 엄청나게 늘어진 "GREAT!"를 볼 수 있습니다. 좀 더 바삭하다.

일화적으로: 나는 또한 상수를 0.25(0.5에서)로 조정하면 멋진 선명한 가장자리도 만든다는 것을 발견했습니다.

return length(fwidth(vTroikaGlyphUV * vTroikaGlyphDimensions)) * 0.25;

@canadaduane 덕분에 늘어난 부분이 확실히 개선된 것을 볼 수 있습니다. 또한 HELLO의 L 사이에 못생긴 아티팩트가 나타나는 것을 볼 수 있습니다. 이 변경 사항을 적용하기 전에 반드시 파악해야 합니다.