https://github.com/tlabaltoh/opengl_sdf_font_rendering

Tiny example of rendering font (.ttf, .otf) as SDF using OpenGL
https://github.com/tlabaltoh/opengl_sdf_font_rendering

fonttools opengl otf python sdf ttf

Last synced: about 1 month ago
JSON representation

Tiny example of rendering font (.ttf, .otf) as SDF using OpenGL

• Host: GitHub
• URL: https://github.com/tlabaltoh/opengl_sdf_font_rendering
• Owner: TLabAltoh
• License: mit
• Created: 2024-09-02T00:47:02.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-09-22T20:25:38.000Z (3 months ago)
• Last Synced: 2024-10-19T22:12:52.997Z (3 months ago)
• Topics: fonttools, opengl, otf, python, sdf, ttf
• Language: Python
• Homepage:
• Size: 133 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# opengl_sdf_font_rendering

Tiny example of rendering font (```.ttf```, ```.otf```) as SDF using OpenGL

## Overview

In this example, the approach is to [detect the edge path](https://github.com/fonttools/fonttools/blob/main/Lib/fontTools/ttLib/removeOverlaps.py) of the font and [fill by distance](https://www.shadertoy.com/view/dls3Wr).

    

        

        

        

        

        

        

    

    

        

        BLUR: 100, EXPAND: 50

        

        

        BLUR: 0, EXPAND: 0

        

    

```glsl

// shader code: ./shaders/font.frag

#define BLUR (...)

#define EXPAND (...)

// (get distance from shape ...)

// (render with distance ...)

dist *= winding;

float delta = fwidth(dist) * 0.5;

float alpha = 1-saturate(-delta + EXPAND - BLUR, delta + EXPAND, dist);

out_color = vec4(alpha, alpha, alpha, alpha);

```

## Operating Environment

|        |          |

| ------ | -------- |

| OS     | Windows  |

| Python | 3.11     |

| IDE    | anaconda |

## Dependencies

- [PyOpenGL](https://pypi.org/project/PyOpenGL/)

- [glfw](https://pypi.org/project/glfw/)

- [matplotlib](https://pypi.org/project/matplotlib/)

- [numpy](https://pypi.org/project/numpy/)

- [fonttools](https://pypi.org/project/fonttools/)

- [skia-pathops](https://pypi.org/project/skia-pathops/)

## Getting started

- Clone the repository with the following command

```cmd

git clone https://github.com/TLabAltoh/opengl_sdf_font_rendering.git

```

- Run ```main.py``` with the following command

```cmd

cd opengl_sdf_font_rendering

python main.py %{FONT_PATH} %{CHAR} %{FONT_SIZE}

@rem ex. python main.py font.ttf A 35

```

## TODO

Use the dictionarized glyph buffer on the shader side to reduce the size of the gl compute buffer.