WebGL로 텍스트를 렌더링하는 기술-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

WebGL로 텍스트를 렌더링하는 기술

尊渡假赌尊渡假赌尊渡假赌

Apr 13, 2025 am 09:54 AM

WebGL로 텍스트를 렌더링하는 기술

WebGL의 규칙과 마찬가지로 단순한 것처럼 보이는 것은 실제로 매우 복잡합니다. 드로잉 라인, 셰이더 디버깅, 텍스트 렌더링… WebGL에서는 모두 잘하기가 어렵습니다.

이상하지 않습니까? WebGL에는 텍스트를 렌더링하기위한 내장 기능이 없습니다. 텍스트는 기능의 가장 기본적인 것처럼 보이지만. 실제로 렌더링 할 때 상황이 복잡해집니다. 모든 언어에 대한 엄청난 양의 글리프를 어떻게 설명합니까? 고정 된 범위 또는 비례형 글꼴로 어떻게 작업합니까? 텍스트가 맨 위, 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽에서 왼쪽으로 렌더링되어야 할 때 어떻게합니까? 수학적 방정식, 다이어그램, 악보?

갑자기 텍스트 렌더링이 WebGL과 같은 저수준 그래픽 API에 위치가없는 이유가 이해되기 시작합니다. 텍스트 렌더링은 많은 뉘앙스에 복잡한 문제입니다. 텍스트를 렌더링하려면 창의력을 발휘해야합니다. 다행히도 많은 똑똑한 사람들이 이미 모든 WebGL 텍스트 요구에 대한 광범위한 기술을 제시했습니다.

우리는이 기사에서 필요한 자산을 생성하는 방법과 WebGL 렌더러가 포함 된 JavaScript 3D 라이브러리 인 ThreeJS와 함께 사용하는 방법을 포함하여 이러한 기술 중 일부를 배울 것입니다. 보너스로서, 각 기술에는 사용 사례를 보여주는 데모가 있습니다.

WebGL 외부의 텍스트에 대한 빠른 메모

이 기사는 WebGL 내부의 텍스트에 관한 것이지만, 가장 먼저 고려해야 할 것은 WebGL 캔버스 위에 오버레이 된 HMTL 텍스트 또는 캔버스를 사용하여 도망 갈 수 있는지 여부입니다. 3D 지오메트리로 오버레이로 텍스트를 폐쇄 할 수는 없지만 상자에서 스타일과 접근성을 얻을 수 있습니다. 그게 많은 경우에 필요한 전부입니다.

글꼴 형상

텍스트를 렌더링하는 일반적인 방법 중 하나는 일반 모델과 마찬가지로 일련의 삼각형으로 글리프를 구축하는 것입니다. 결국, 렌더링 포인트, 라인 및 삼각형은 WebGL의 강점입니다.

문자열을 만들 때 각 글리프는 삼각형 포인트의 글꼴 파일에서 삼각형을 읽음으로써 만들어집니다. 거기에서 글리프를 압출하여 3D로 만들거나 매트릭스 작업을 통해 글리프를 스케일링 할 수 있습니다.

글꼴 형상은 소량의 텍스트에 가장 적합합니다. 각 글리프에는 많은 삼각형이 포함되어 있기 때문에 그리기가 문제가 발생하기 때문입니다.

글꼴 지오메트리로 지금 읽고있는이 정확한 단락을 렌더링하면 185,084 개의 삼각형과 555,252 개의 정점이 생성됩니다. 이것은 단지 259 글자입니다. 글꼴 형상을 사용하여 전체 기사를 작성하면 컴퓨터 팬이 비행기 터빈이 될 수 있습니다.

삼각형의 수는 삼각 측량의 정밀도와 사용중인 서체에 따라 다르지만, 많은 텍스트를 글꼴 지오메트리로 작업 할 때는 병목 현상이 될 것입니다.

글꼴 파일에서 글꼴 형상을 만드는 방법

원하는 글꼴을 선택하고 텍스트를 렌더링하는 것만 큼 쉬운 경우. 나는이 기사를 쓰지 않을 것이다. 일반 글꼴 형식은 Bezier 곡선으로 글리프를 정의합니다. 반면, WebGL에서 그를 이는 것은 CPU에서 매우 비싸고 복잡합니다. 텍스트를 렌더링하려면 Bezier 곡선에서 삼각형 (삼각 측량)을 만들어야합니다.

나는 몇 가지 삼각 측량 방법을 발견했지만 결코 완벽하지 않으며 모든 글꼴과 함께 작동하지 않을 수도 있습니다. 그러나 적어도 그들은 자신의 서체를 삼각화하기 위해 당신을 시작하게됩니다.

방법 1 : 자동적이고 쉬운

ThreeJS를 사용하는 경우 FaceType.js를 통해 서체를 전달하여 글꼴 파일에서 매개 변수 곡선을 읽고 .json 파일에 넣습니다. ThreeJ의 글꼴 형상 기능은 귀하를 위해 포인트를 삼각화하도록합니다.

 Const Geometry = New Three.FontGeometry ( "안녕하세요 거기", {font : font, size : 80})

또는 ThreeJ를 사용하지 않고 실시간 삼각 측량이 필요하지 않은 경우. 3J를 사용하여 글꼴을 삼각화하여 수동 프로세스의 고통을 구할 수 있습니다. 그런 다음 지오메트리에서 정점과 지수를 추출하여 선택한 WebGL 응용 프로그램에로드 할 수 있습니다.

방법 2 : 수동 및 고통

글꼴 파일을 삼각화하기위한 수동 옵션은 최소한 초기에 매우 복잡하고 복잡합니다. 자세히 설명하기 위해서는 전체 기사가 필요합니다. 즉, StackoverFlow에서 가져온 기본 구현 단계를 빨리 살펴볼 것입니다.

구현은 기본적으로 다음과 같이 분류됩니다.

프로젝트에 opentype.js 및 earcut.js를 추가하십시오.
opentype.js를 사용하여 .tff 글꼴 파일에서 Bezier 곡선을 얻으십시오.
베 지어 곡선을 닫힌 모양으로 변환하고 내림차순으로 분류하십시오.
다른 모양의 내부에 어떤 모양이 있는지 알아 냄으로써 구멍의 지수를 결정하십시오.
구멍 지수와 함께 두 번째 매개 변수로 모든 포인트를 이어 컷으로 보냅니다.
이어 컷 결과를 지오메트리의 지수로 사용하십시오.
숨을 쉬십시오.

예, 많은 것입니다. 그리고이 구현은 모든 서체에 대해 작동하지 않을 수 있습니다. 그럼에도 불구하고 시작하게 될 것입니다.

ThreeJS에서 텍스트 형상 사용

고맙게도 ThreeJS는 상자 밖에서 텍스트 형상을 지원합니다. 좋아하는 글꼴의 Bezier 곡선의 .json을 제공하고 ThreeJ는 런타임에 정점을 삼각화하는 것을 관리합니다.

 var loader = new Three.FontRoader ();
var font;
var text = "Hello World"
var loader = new Three.FontRoader ();
loader.load ( 'fonts/helvetiker_regular.typeface.json', function (helvetiker) {
  font = helvetiker;
  var geometry = new Three.TextGeometry (텍스트, {
    글꼴 : 글꼴,
    크기 : 80,
    높이 : 5,
  });
}

장점

3D 문자열을 만들기 위해 쉽게 압출됩니다.
매트릭스 작업을 통해 스케일링이 더 쉬워집니다.
사용 된 삼각형의 양에 따라 우수한 품질을 제공합니다.

단점

이것은 높은 삼각형 수로 인해 많은 양의 텍스트로는 잘 확정되지 않습니다. 각 캐릭터는 많은 삼각형에 의해 정의되기 때문에“Hello World”만큼 간단한 무언가를 렌더링하면 7,396 개의 삼각형과 22,188 개의 정점이 있습니다.
이것은 일반적인 텍스트 효과에 적합하지 않습니다.
방지 방지는 후 처리 별칭 또는 브라우저 기본값에 따라 다릅니다.
너무 큰 것을 확장하면 삼각형이 나타날 수 있습니다.

데모 : 페이딩 된 글자

다음 데모에서는 글꼴 형상을 사용하여 3D 텍스트를 만드는 것이 얼마나 쉬운 지 활용했습니다. 정점 셰이더 내부에서는 시간이 지남에 따라 압출이 증가하고 감소합니다. 안개와 표준 재료와 짝을 이루면이 유령의 문자가 공허로 들어오고 나옵니다.

적은 양의 문자로 삼각형의 양이 이미 수만에 달하는 방법에 주목하십시오!

텍스트 (및 캔버스) 텍스처

텍스트 텍스처를 만드는 것은 아마도 WebGL에서 텍스트를 그리는 가장 간단하고 오래된 방법 일 것입니다. Photoshop 또는 다른 래스터 그래픽 편집기를 열고 텍스트가 포함 된 이미지를 그린 다음 이러한 텍스처를 쿼드로 렌더링하면 완료됩니다!

또는 캔버스를 사용하여 런타임에 주문형 텍스처를 생성 할 수 있습니다. 캔버스를 쿼드에 텍스처로 렌더링 할 수 있습니다.

무리의 가장 복잡한 기술이어야합니다. 텍스트 텍스처와 캔버스 텍스처는 텍스처 당 하나의 쿼드 또는 주어진 텍스트 단위만으로도 이점이 있습니다. 정말로 원한다면 영국 백과 사전 전체를 단일 질감으로 쓸 수 있습니다. 그렇게하면 단일 쿼드, 6 개의 정점 및 2 개의 면만 렌더링하면됩니다. 물론, 당신은 그것을 규모로 할 것이지만, 아이디어는 여전히 남아 있습니다. 여러 글리프를 동일한 쿼드로 배치 할 수 있습니다. 텍스트 및 캔버스 텍스처 경험은 특히 많은 텍스트로 작업 할 때 스케일링에 문제가 있습니다.

텍스트 텍스처의 경우 사용자는 텍스트를 구성하는 모든 텍스처를 다운로드 한 다음 메모리에 보관해야합니다. 캔버스 텍스처의 경우 사용자는 아무것도 다운로드 할 필요가 없습니다. 그러나 이제 사용자의 컴퓨터는 런타임에 모든 래스터 라이즈를 수행해야하며 캔버스의 모든 단어가 어디에 있는지 추적해야합니다. 또한 큰 캔버스를 업데이트하는 것은 정말 느릴 수 있습니다.

텍스트 텍스처를 작성하고 사용하는 방법

텍스트 텍스처에는 멋진 일이 없습니다. 좋아하는 래스터 그래픽 편집기를 열고 캔버스에 텍스트를 그리고 이미지로 내보내십시오. 그런 다음 텍스처로로드하고 비행기에 매핑 할 수 있습니다.

 // 텍스처로드
텍스처를하자 =;
Const Geometry = New Three.PlaneBufferGeometry ();
const material new new 3.meshbasicmaterial ({map : texture});
this.scene.add (new Mesh (지오메트리, 재료));

WebGL 앱에 텍스트가 많은 경우, 특히 느린 연결의 사용자에게는 거대한 스프라이트 텍스트 시트를 다운로드하는 것이 이상적이지 않을 수 있습니다. 다운로드 시간을 피하기 위해 오프 스크린 캔버스를 사용하여 주문형 물건을 캔버스로 샘플링하여 질감으로 샘플링 할 수 있습니다.

많은 텍스트를 래스터링하는 데 잠시 시간이 걸리기 때문에 성능을 위해 다운로드 시간을 거래합시다.

 함수 createTextCanvas (문자열, 매개 변수 = {}) {
    
    const canvas = document.createElement ( "캔버스");
    const ctx = canvas.getContext ( "2d");
    
    // 측정 할 수 있도록 글꼴을 준비합니다
    fontsize = parameters.fontsize || 56;
    ctx.font =`$ {fontsize} px monospace`;
    
    const textmetrics = ctx.measuretext (텍스트);
    
    width = textMetrics.width를하자;
    높이 = fontsize를하자;
    
    // 텍스트 크기와 일치하도록 캔버스를 크기를 조정합니다 
    canvas.width = 너비;
    캔버스. height = 높이;
    canvas.style.width = 너비 "px";
    canvas.style.height = 높이 "px";
    
    // 캔버스가 크기가 커지기 때문에 글꼴을 다시 적용하십시오.
    ctx.font =`$ {fontsize} px monospace`;
    ctx.textalign = parameters.align || "센터";
    ctx.textbaseline = 매개 변수 .Baseline || "가운데";
    
    // 단순성을 위해 캔버스를 투명하게 만듭니다
    ctx.fillstyle = "Transparent";
    ctx.fillRect (0, 0, ctx.canvas.width, ctx.canvas.height);
    
    ctx.fillstyle = parameters.color || "하얀색";
    ctx.filltext (텍스트, 너비 / 2, 높이 / 2);
    
    반환 캔버스;
}

texture = new Three.Texture (createTextCanvas ( "this is the text"));

이제 이전 스 니펫과 같이 비행기에서 텍스처를 사용할 수 있습니다. 또는 대신 스프라이트를 만들 수 있습니다.

대안으로,보다 효율적인 라이브러리를 사용하여 3 텍스트 2D 또는 3 스프리 테트 텍스트와 같은 질감이나 스프라이트를 만들 수 있습니다. 텍스트 멀티 라인 텍스트를 원한다면이 놀라운 튜토리얼을 확인해야합니다.

장점

이것은 정적 텍스트로 1 대 1 품질을 제공합니다.
정점/면 수가 적습니다. 각 문자열은 6 개의 정점과 2 개의면 만 사용할 수 있습니다.
쿼드에서 텍스처를 구현하기가 쉽습니다.
캔버스 또는 그래픽 편집기를 사용하여 테두리 나 빛과 같은 효과를 추가하는 것은 상당히 사소합니다.
캔버스를 사용하면 멀티 라인 텍스트를 쉽게 만들 수 있습니다.

단점

래스터 라이즈 후 스케일링, 회전 또는 변형되면 흐릿 해 보입니다.
NON RETINA, 텍스트는 바삭 바삭 해 보입니다.
사용 된 모든 문자열을 래스터 화해야합니다. 많은 문자열은 다운로드 할 많은 데이터를 의미합니다.
캔버스를 지속적으로 업데이트하면 캔버스를 사용한 주문형 래스터 라이즈가 느리게 진행됩니다.

데모 : 캔버스 텍스처

캔버스 텍스처는 자주 변경되지 않는 제한된 양의 텍스트와 잘 어울립니다. 그래서 나는 쿼드가 동일한 질감을 재사용하는 간단한 텍스트 벽을 만들었습니다.

비트 맵 글꼴

글꼴 형상과 텍스트 텍스처는 모두 많은 텍스트를 처리하는 것과 동일한 문제를 경험합니다. 텍스트 한 조각 당 백만 개의 정점을 갖는 것은 매우 비효율적이며 텍스트 당 하나의 텍스처를 만드는 것은 실제로 확장되지 않습니다.

비트 맵 글꼴은 모든 고유 한 글리프를 텍스처 아틀라스 (텍스처 아틀라스)라고하는 단일 텍스처로 래스터 화 하여이 문제를 해결합니다. 즉, 각 글리프의 쿼드를 생성하고 텍스처 아틀라스 의 섹션을 샘플링하여 런타임에 주어진 문자열을 조립할 수 있습니다.

즉, 사용자는 모든 텍스트에 대해 단일 텍스처를 다운로드하고 사용하면됩니다. 또한 Glyph 당 하나의 쿼드만으로 렌더링하면됩니다.

이 기사 전체 를 렌더링하는 것은 약 117,272 개의 정점과 58,636 개의 삼각형입니다. 글꼴 지오메트리에 비해 3.1 배 더 효율적입니다. 단일 단락 만 렌더링합니다. 그것은 큰 개선입니다!

비트 맵은 글리프를 텍스처로 라이스터 화하기 때문에 일반 이미지와 동일한 문제를 겪습니다. 확대하거나 스케일을 확대하면 픽셀 화되고 흐릿한 혼란이보기 시작합니다. 다른 크기의 텍스트를 원한다면 특정 크기의 글리프와 함께 보조 비트 맵을 보내야합니다. 또는 다음 섹션에서 다룰 서명 거리 필드 (SDF)를 사용할 수 있습니다.

비트 맵 글꼴을 만드는 방법

비트 맵을 생성하는 도구가 많이 있습니다. 가장 관련성있는 옵션은 다음과 같습니다.

AngelCode의 BMFONT - 이것은 BitMap 형식의 제작자에 의한 것입니다.
Hiero-이것은 Java 오픈 소스 도구입니다. 앵글로 코드의 BMFONT와 매우 유사하지만 텍스트 효과를 추가 할 수 있습니다.
Glyphs Designer - 이것은 유료 MacOS 앱입니다.
Shoebox - 이것은 비트 맵 글꼴을 포함한 스프라이트를 다루는 도구입니다.

예시를 위해 anglecode의 BMFONT를 사용할 것입니다. 시작하기가 가장 쉬운 것이라고 생각하기 때문입니다. 이 섹션의 맨 아래에서 원하는 기능이 부족하다고 생각되면 다른 도구를 찾을 수 있습니다.

앱을 열면 사용할 수있는 글자로 가득 찬 화면이 표시됩니다. 이것에 대한 좋은 점은 그리스 기호를 보내는 대신 필요한 글리프 만 잡을 수 있다는 것입니다.

앱의 사이드 바에서는 글리프 그룹을 선택하고 선택할 수 있습니다.

수출 준비가 되셨습니까? 옵션 → 비트 맵을 저장하십시오 . 그리고 끝났다!

그러나 우리는 우리 자신보다 조금 앞서고 있습니다. 내보내기 전에 확인해야 할 몇 가지 중요한 설정이 있습니다.

글꼴 설정 : 사용하려는 글꼴과 크기를 선택할 수 있습니다. 여기서 가장 중요한 항목은 "일치 Char Height"입니다. 기본적으로 앱의 "크기"옵션은 포인트 대신 픽셀을 사용합니다. 그래픽 편집기의 글꼴 크기와 생성 된 글꼴 크기 사이에 상당한 차이가 표시됩니다. 글리프가 이해하려면 "char height match"옵션을 선택하십시오.
내보내기 설정 : 수출의 경우 텍스처 크기가 2 개의 힘인지 확인하십시오 (예 : 16 × 16, 32 × 32, 64 × 64 등). 그런 다음 필요한 경우 "선형 MIPMAP 선형"필터링을 활용할 수 있습니다.

설정 하단에는 "파일 형식"섹션이 표시됩니다. 파일을 읽고 글리프를 만들 수있는 한 여기에서 두 옵션을 선택하는 것은 괜찮습니다.

가장 작은 파일 크기를 찾고 있다면. 나는 모든 Lowecase와 대문자 라틴 문자의 비트 맵을 만들고 각 옵션을 비교 한 초 현악기 테스트를 실행했습니다. 글꼴 디스크립터의 경우 가장 효율적인 형식은 이진 입니다.

글꼴 디스크립터 형식	파일 크기
이진	3 KB
원시 텍스트	11 KB
XML	12 KB

텍스처 형식	파일 크기
PNG	7 KB
타르가	64 KB
Directraw Surface	65 KB

PNG는 텍스트 텍스처에서 가장 작은 파일 크기입니다.

물론 파일 크기보다 조금 더 복잡합니다. 어떤 옵션을 사용할 것인지 더 나은 아이디어를 얻으려면 구문 분석 시간과 런타임 성능을 살펴 봐야합니다. 각 형식의 장단점을 알고 싶다면이 토론을 확인하십시오.

비트 맵 글꼴을 사용하는 방법

비트 맵 글꼴 지오메트리 생성은 텍스처를 사용하는 것보다 조금 더 관련이 있습니다. 각 글리프는 자체 높이와 너비를 가지며 텍스처의 다른 부분을 샘플링합니다. 우리는 문자열의 각 글리프마다 쿼드를 만들어야하여 글리프를 샘플링하기 위해 올바른 UV를 줄 수 있습니다.

ThreeJS에서 3 bmfont-text를 사용하여 비트 맵, SDF 및 MSDF를 사용하여 문자열을 만들 수 있습니다. 멀티 라인 텍스트를 처리하고 모든 글리프를 단일 지오메트리에 배치합니다. NPM의 프로젝트에 설치해야합니다.

 var creategeometry = require ( '3 bmfont-text')
var loadfont = require ( 'load-bmfont')

loadfont ( 'fonts/arial.fnt', function (err, font) {
  // 포장 된 비트 맵 글리프의 형상 생성, 
  // 300px로 포장되고 오른쪽 정렬 된 단어
  var geometry = creategeometry ({
    글꼴 : 글꼴,
    텍스트 : "내 텍스트"
  })
    
  var textureloader = new Three.TextUreLoader ();
  textureloader.load ( 'fonts/arial.png', function (텍스처) {
    // 간단한 3JS 자료를 사용할 수 있습니다
    var 자료 = 새로운 3.meshbasicmaterial ({
      지도 : 질감,
      투명 : 사실,
      색상 : 0xaaffff
    })

    // 이제 우리의 메쉬로 뭔가를하십시오!
    var mesh = new Three.Mesh (지오메트리, 재료)
  })
})

텍스트가 전체 검은 색 또는 흰색으로 그려 질 때마다 반전 옵션을 사용하십시오.

장점

빠르고 렌더링하기가 간단합니다.
1 : 1 비율과 해상도 독립입니다.
글리프가 주어지면 모든 문자열을 렌더링 할 수 있습니다.
자주 변경 해야하는 많은 텍스트에 좋습니다.
제한된 수의 글리프에서 매우 잘 작동합니다.
Kerning, 라인 높이 및 런타임에 단어 점수와 같은 것들에 대한 지원이 포함됩니다.

단점

제한된 캐릭터와 스타일 만 허용합니다.
최적의 사용을 위해서는 사전 상실한 글리프와 여분의 빈 포장이 필요합니다.
흐릿하고 대규모로 픽셀 화되어 회전하거나 변형 될 수도 있습니다.
렌더링 된 글리프 당 하나의 쿼드 만 있습니다.

대화식 데모 : 빛나는 크레딧

래스터 비트 맵 글꼴은 몇 가지 크기와 스타일 만 있으면 영화 학점에 적합합니다. 단점은 텍스트가 반응 형 디자인으로는 더 큰 크기로 흐리게 보이고 픽셀 화되어야한다는 것입니다.

마우스 효과의 경우 마우스 위치를보기의 크기에 매핑 한 다음 마우스에서 텍스트 위치까지의 거리를 계산하여 계산을하고 있습니다. 또한 Z 축 및 Y 축의 특정 지점에 도달하면 텍스트를 회전하고 있습니다.

서명 된 거리 필드

비트 맵 글꼴과 마찬가지로 서명 거리 필드 (SDF) 글꼴도 텍스처 아틀라스입니다. 고유 한 글리프는 런타임에 모든 문자열을 생성 할 수있는 단일 "텍스처 아틀라스"로 배치됩니다.

그러나 비트 맵 글꼴이하는 방식으로 텍스처에 래스터 화 된 글리프를 저장하는 대신 글리프의 SDF가 생성되어 저장되어 대신 저해상도 이미지로부터 고해상도 모양이 높아집니다.

다각형 메쉬 (글꼴 형상)와 마찬가지로 SDF S는 모양을 나타냅니다 . SDF의 각 픽셀은 가장 가까운 표면 까지의 거리를 저장합니다. 부호는 픽셀이 모양 안쪽 또는 외부에있을 때마다 나타납니다. 부호가 음수이면 픽셀이 안에 있습니다. 긍정적 인 경우 픽셀은 외부에 있습니다. 이 비디오는 개념을 멋지게 보여줍니다.

SDF S는 일반적으로 광선 및 체적 렌더링에 사용됩니다.

SDF는 각 픽셀에서 거리를 저장하기 때문에 원시 결과는 원래 모양의 흐릿한 버전처럼 보입니다. 단단한 모양을 출력하려면 글리프의 경계인 0.5에서 알파 테스트를해야합니다. 문자 "A"의 SDF가 일반 래스터 이미지와 어떻게 비교되는지 살펴보십시오.

앞에서 언급했듯이 SDF의 큰 이점은 저해상도 SDF에서 고해상도 모양을 렌더링 할 수 있다는 것입니다. 즉, 16pt 글꼴 SDF를 만들고 텍스트를 크게 파삭 파삭 한 상태로 확대하지 않고 최대 100pt 이상을 확장 할 수 있습니다.

SDF S는 Bilinear 보간으로 거리를 거의 완벽하게 재구성 할 수 있기 때문에 스케일링에 능숙합니다. 이는 두 지점 사이에 값을 얻을 수 있다고 말하는 멋진 방법입니다. 이 경우, 일반 비트 맵 글꼴의 두 픽셀 사이를 보간하면 이중선이 컬러 중 하나를 제공하여 선형 흐림이 발생합니다.

SDF에서, 두 픽셀 사이를 보간하는 Bilinear는 가장 가까운 가장자리까지의 거리를 제공합니다. 이 두 픽셀 거리는 처음과 비슷하기 때문에 결과 값은 글리프에 대한 정보를 많이 잃지 않습니다. 이것은 또한 SDF가 클수록 정확하고 정보가 손실된다는 것을 의미합니다.

그러나이 과정에는 경고가 있습니다. 날카로운 모서리 의 경우와 같이 픽셀 사이의 속도 변화가 선형이 아닌 경우, Bilinear 보간은 부정확 한 값을 제공하여 원래 크기보다 훨씬 높은 SDF를 스케일링 할 때 칩 또는 둥근 모서리를 만듭니다.

텍스처 측면을 충돌시키는 것 외에도 유일한 실제 솔루션은 다 채널 SDF를 사용하는 것입니다. 이것이 우리가 다음 섹션에서 다루는 것입니다.

SDF S의 과학에 더 깊이 다이빙을하고 싶다면 주제에 대한 Chris Green의 마스터 논문 (PDF)을 확인하십시오.

장점

그들은 회전, 스케일링 또는 변형 된 경우에도 바삭성을 유지합니다.
동적 텍스트에 이상적입니다.
그들은 좋은 품질 대 크기 비율을 제공합니다. 단일 텍스처를 사용하여 품질을 많이 잃지 않고 작고 거대한 글꼴 크기를 렌더링 할 수 있습니다.
그들은 글리프 당 4 개의 정점에 대한 정점 수가 낮습니다.
항아리아 싱은 알파 테스트를 통해 국경, 그림자 및 모든 종류의 효과를 만드는 것처럼 저렴합니다.
그들은 MSDF보다 작습니다 (우리는 조금만 볼 수 있습니다).

단점

텍스처가 해상도를 넘어 샘플링되면 둥근 모서리가 발생하거나 구석이 둥글게됩니다. (다시, 우리는 MSDF가 어떻게이를 막을 수 있는지 볼 것입니다.)
작은 글꼴 크기는 효과가 없습니다.
그들은 흑백 글리프와 함께 만 사용할 수 있습니다.

다 채널 부호 거리 필드

MSDF (Multi-Channel Signed Disting Field) 글꼴은 3 개의 컬러 채널을 모두 사용하여 거의 완벽한 날카로운 모서리를 생성 할 수있는 SDF S에 대한 약간의 최근 변형입니다. 그들은 처음에는 불을 부는 것처럼 보이지만, 그들이 나타나는 것보다 사용하기 쉽기 때문에 당신을 벗기지 마십시오 .

세 가지 컬러 채널을 모두 사용하면 이미지가 더 무거워 지지만 MSDFS는 일반 SDF보다 훨씬 더 나은 품질 대 공간 비율을 제공합니다. 다음 이미지는 최대 50px까지 스케일링 된 글꼴에 대한 SDF와 MSDF의 차이를 보여줍니다.

일반 SDF와 마찬가지로 MSDF는 가장 가까운 가장자리까지의 거리를 저장하지만 날카로운 코너를 찾을 때마다 색상 채널을 변경합니다. 우리는 두 개의 컬러 채널 이상이 동의하는 곳을 그리는 곳을 그리며 모양을 얻습니다. 약간 더 많은 기술이 포함되어 있지만. 보다 철저한 설명은이 MSDF 생성기에 대한 readme를 확인하십시오.

장점

그들은 SDF보다 더 높은 품질 및 공간 비율을 지원합니다. 그리고 종종 더 나은 선택입니다.
그들은 스케일링 될 때 날카로운 모서리를 유지합니다.

단점

그것들은 작은 아티팩트를 포함 할 수 있지만 글리프의 질감 크기를 부딪쳐 피할 수 있습니다.
런타임에서 세 값의 중간 값을 필터링 해야하는데, 이는 약간 비싸다.
그것들은 단색 글리프 와만 호환됩니다.

MSDF 글꼴을 만드는 방법

MSDF 글꼴을 생성하는 가장 빠른 방법은 MSDF-BMFONT-WEB 도구를 사용하는 것입니다. 대부분의 관련 사용자 정의 옵션이 있으며 브라우저에서 몇 초 만에 작업을 수행합니다. 또는 A- 프레임에서 사람들이 이미 MSDF로 변환 한 많은 Google 글꼴이 있습니다.

SDF 또는 서체를 생성하려는 경우 문제가있는 글리프 덕분에 특별한 조정이 필요합니다. MSDF-BMFONT-XML CLI는 일을 지나치게 혼란스럽게 만들지 않고 광범위한 옵션을 제공합니다. 어떻게 사용할 것인지 살펴 보겠습니다.

먼저 NPM에서 전 세계적으로 설치해야합니다.

 NPM 설치 MSDF-BMFONT-XML -G

다음으로 옵션이 포함 된 .ttf 글꼴 파일을 제공하십시오.

 MSDF-BMFONT ./OPEN-Sans-BLACK.TTF- OUTPUT-TYPE JSON-FONT-SIZE 76 -TEXTURE-SIZE 512,512

이러한 옵션은 조금 파고들 것입니다. MSDF-BMFONT-XML은 글꼴을 미세 조정하기위한 많은 옵션을 제공하지만 MSDF를 올바르게 생성하는 데 필요한 몇 가지 옵션이 있습니다.

-t 또는 -Field-Type <msdf sdf> : msdf-bmfont-xml 기본적으로 msdfs glyph atlases를 생성합니다. 대신 SDF를 생성하려면 -t SDF를 사용하여 지정해야합니다.</msdf>
-f 또는-output-type : msdf-bmfont-xml 런타임에 JSON으로 구문 분석 해야하는 XML 글꼴 파일을 생성합니다. JSON을 곧바로 내보내서이 구문 분석 단계를 피할 수 있습니다.
-s, -font-size : 글꼴 크기가 매우 작 으면 일부 아티팩트와 결함이 나타날 수 있습니다. 글꼴 크기를 올리면 대부분의 시간을 제거 할 수 있습니다. 이 예제는“M”문자의 작은 불완전 성을 보여줍니다.
-m 또는 -texture-size : 모든 캐릭터가 같은 질감에 맞지 않으면 두 번째 질감이 그들에게 맞도록 만들어집니다. 멀티 페이지 글리프 아틀라스를 이용하려고하지 않는 한, 텍스처 크기를 늘려서 한 텍스처에서 모든 문자에 맞게 추가 작업을 피할 것을 권장합니다.

MSDF 및 SDF 글꼴을 생성하는 데 도움이되는 다른 도구가 있습니다.

MSDF-BMFONT-WEB : MSDF (SDF가 아님)를 빠르고 쉽게 생성하는 웹 도구
MSDF-BMFONT : 카이로 및 노드 캔버스를 사용한 노드 도구
MSDFGEN : 다른 모든 MSDF 도구가 기반으로하는 원래 명령 줄 도구
Hiero : 비트 맵과 SDF 글꼴을 모두 생성하는 도구

SDF 및 MSDF 글꼴을 사용하는 방법

SDF 및 MSDF 글꼴도 Glyph Atlases이므로 BitMap 글꼴과 마찬가지로 3 BMFONT-TEXT를 사용할 수 있습니다. 유일한 차이점은 파편 셰이더로 거리 필드의 글리프를 가져와야한다는 것입니다.

SDF 글꼴에서 작동하는 방법은 다음과 같습니다. 우리의 거리 필드는 Glyph 외부에서 .5보다 큰 값을 가지고 Glyph 내부에서 0.5 미만이므로 각 픽셀의 조각 셰이더에서 알파 테스트를 위해 0.5 미만의 거리만으로 픽셀을 렌더링하여 글리프 내부 만 렌더링해야합니다.

 const fragmentshader =`

  균일 한 VEC3 색;
  균일 한 샘플러 2D 맵;
  다양한 vec2 vuv;
  
  void main () {
    vec4 texcolor = texture2d (map, vuv);
    // 글리프 내부 만 렌더링합니다.
    float alpha = step (0.5, texcolor.a);

    GL_FRAGCOLOR = VEC4 (색, 알파);
    if (gl_fragcolor.a <p> 마찬가지로, 우리는 상자에서 항리아식을 제공하는 3 bmfont-text에서 글꼴을 가져올 수 있습니다. 그런 다음 RawShadertial에서 직접 사용할 수 있습니다.</p><pre rel="JavaScript"> sdfshader = require ( '3 bmfont-text/shaders/sdf');
자료 = 새로운 3.RawshAdermaterial (msdfshader ({
  지도 : 질감,
  투명 : 사실,
  색상 : 0x000000
});

MSDF 글꼴은 약간 다릅니다. 그들은 두 개의 컬러 채널의 교차로에 의해 날카로운 모서리를 재현합니다. 두 개 이상의 컬러 채널이 동의해야합니다. 알파 문자 메시지를 수행하기 전에 3 개의 컬러 채널의 중앙값을 얻으려면 다음과 같은 위치를 확인해야합니다.

 const fragmentshader =`

  균일 한 VEC3 색;
  균일 한 샘플러 2D 맵;
  다양한 vec2 vuv;

  플로트 중앙값 (float r, float g, float b) {
    return max (min (r, g), min (max (r, g), b));
  }
  
  void main () {
    vec4 texcolor = texture2d (map, vuv);
    // 글리프 내부 만 렌더링합니다.
    float sigdist = median (texcolor.r, texcolor.g, texcolor.b) - 0.5;
    float alpha = step (0.5, sigdist);
    GL_FRAGCOLOR = VEC4 (색, 알파);
    if (gl_fragcolor.a <p> 다시 말하지만, 우리는 또한 MSDFShader를 사용하여 3 bmfont-text에서 가져올 수 있으며, 이는 또한 상자에서 항아리아를 제공합니다. 그런 다음 RawShadertial에서 직접 사용할 수 있습니다.</p><pre rel="JavaScript"> msdfshader = require ( '3 bmfont-text/shaders/msdf');
자료 = 새로운 3.RawshAdermaterial (msdfshader ({
  지도 : 질감,
  투명 : 사실,
  색상 : 0x000000
});

데모 : 스타 워즈 소개

Star Wars Drawl Intro는 MSDF와 SDF 글꼴이 잘 작동하는 좋은 예입니다. 효과는 여러 크기로 텍스트가 필요하기 때문입니다. 우리는 단일 MSDF를 사용할 수 있으며 텍스트는 항상 날카 로워 보입니다! 슬프게도, 3 BM FONT는 아직 정당한 텍스트를 지원하지 않습니다. 왼쪽 정당화를 적용하면보다 균형 잡힌 프레젠테이션이 가능합니다.

라이트 세이버 효과를 위해, 나는 평면 크기의 보이지 않는 평면을 레이 캐스트하고, 같은 크기의 캔버스에 그리며, 장면 위치를 텍스처 좌표에 매핑하여 캔버스를 샘플링하고 있습니다.