Text Rendering in 3D using WebGPU

Bc. Zdenka Valkučáková

Bachelor's thesis

Abstract:

Cieľom tejto práce je implementovať knižnicu vo WebGPU pomocou TypeScriptu zameranú na renderovanie textu. V prvom rade sa najmä sústredí na opis grafických techník použitých pri implementácii knižnice, týkajúcich sa vykresľovaniu textu či samotného zobrazovania dvojrozmerného textu v trojrozmernom priestore. Knižnica je určená pre všeobecné použitie v iných aplikáciách s využitím WebGPU. Dodržiava osvedčené postupy pre enkapsuláciu grafickej renderovacej pipeline. Jej cieľom je poskytnúť priamočiare a jednoduché použitie v konkrétnom grafickom rozhraní. Text je možné si prispôsobiť buď nastavením fontu, veľkosti či farby. Nakoniec, funkcionalitu knižnice demonštruje webová aplikácia ako súčasť praktickej časti tejto práce.

Abstract:

This thesis aims to implement a TypeScript library in WebGPU for text rendering. Firstly, the primary focus is explaining computer graphics techniques behind library implementation regarding filling or projecting two-dimensional text in three-dimensional space. The library is designed for general use by other WebGPU applications, adhering to best practices for encapsulation of graphics rendering pipeline. The intention is to provide simple and intuitive use as part of a custom graphical interface. The text can be customized by setting up preferable font, scale, or color. Lastly, the possibilities of the library are demonstrated through a basic web application as a part of the practical portion of the thesis.

Keywords

text rendering, WebGPU, GPU, shader, winding number, signed distance field

Language used: English

Date on which the thesis was submitted / produced: 18. 5. 2023

Thesis defence

• Date of defence: 26. 6. 2023
• Supervisor: Mgr. Matúš Talčík
• Reader: Mgr. Magdaléna Kejstová

Masaryk University

Faculty of Informatics

Bachelor programme / field:
Informatics / Informatics