Babylon.js, MSDF 글자 셰이더의 분모를 보호한다

글자의 안팎이 뒤집히던 조건

Babylon.js 9.31.2는 한국시간 2026년 10월 21일 공개됐습니다. MSDF 텍스트의 프래그먼트 셰이더에서 0으로 나눌 수 있던 계산을 보호하는 수정이 포함됩니다. MSDF는 글자 윤곽까지의 거리 정보를 여러 채널에 담아 경계를 표현하는 방식입니다. 이번 문제는 단순히 글꼴이 흐릿해지는 현상이 아니라 특정 실행 환경에서 글자 안팎의 투명도가 잘못 계산되는 경우였습니다.

PR #18970 작성자는 헤드리스 Chrome의 기본 소프트웨어 렌더러인 SwiftShader에서 글자 사각형이 불투명하고 내부가 투명한 결과를 보고했습니다. 반면 NVIDIA의 ANGLE 경로에서는 정상이라고 설명합니다. 같은 셰이더가 한 GPU에서 정상이라는 사실만으로 다른 구현에서도 안전하다고 볼 수 없었던 사례입니다.

평평한 거리 값에서 분모가 0이 됩니다

기존 셰이더는 거리 값의 변화량인 fwidth를 분모로 사용했습니다. 글자 주변 여백이나 충분히 두꺼운 획 내부처럼 거리 필드가 평평한 구간에서는 이 값이 0일 수 있습니다. 작성자가 확인한 SwiftShader의 음의 0 처리까지 겹치면서, 안쪽과 바깥쪽의 알파 계산이 기대와 반대로 나타났습니다.

수정은 GLSL과 WGSL의 관련 분모에 최소값 1e-5를 적용합니다. 실제 경계의 변화량은 이보다 커서 기존 안티앨리어싱을 유지하고, 평평한 구간의 나눗셈만 유한한 값으로 제한하려는 조치입니다. 글꼴 아틀라스를 다시 생성하거나 모든 글자 크기를 바꾸는 업데이트는 아닙니다.

자동 캡처 환경도 확인 대상입니다

브라우저를 화면 없이 실행해 스크린샷을 만드는 팀이라면 일반 PC의 수동 확인과 CI 캡처를 구분할 필요가 있습니다. CI가 다른 렌더러를 사용하면 개발자 화면에서는 보이지 않던 문제가 나올 수 있습니다. 테스트 기록에는 브라우저 버전과 그래픽 구현을 함께 남겨 보세요.

대표 문자열은 얇은 획, 두꺼운 획, 여백과 외곽선이 있는 경우를 나누어 비교하면 좋습니다. 배경색도 바꾸어 보면 글자 주변 사각형이 불투명해지는 현상을 알아보기 쉽습니다. 확대율별 비교는 추가 점검 제안이며, 카메라 거리 변화가 이 버그의 확인된 원인이라는 뜻은 아닙니다.

테스트가 보장하는 범위를 구분합니다

PR에는 양쪽 셰이더의 모든 해당 분모가 보호되는지 확인하는 단위 테스트가 추가됐습니다. 이는 코드에서 보호식이 빠지는 회귀를 막는 근거입니다. 모든 글꼴과 GPU에서 시각적 품질을 시험했다는 의미로 확대할 수는 없습니다.

프로젝트 적용 시에는 같은 문자열과 아틀라스로 버전 전후를 비교하고, 수동 브라우저와 자동 캡처 결과를 함께 확인해 보세요. 문제가 재현되지 않는 환경에서는 성능 향상이나 화질 차이가 눈에 띄지 않을 수도 있습니다. 이 글은 공식 릴리스와 PR의 분석을 정리했으며 직접 실행한 테스트 결과는 아닙니다.

출처

• Babylon.js 9.31.2 공식 릴리스
• PR #18970 · 구현 범위와 검증 보고