https://github.com/munrocket/3d-sdf-font

📎 Arciform font type sdf generator in glsl
https://github.com/munrocket/3d-sdf-font

Last synced: 9 days ago
JSON representation

📎 Arciform font type sdf generator in glsl

• Host: GitHub
• URL: https://github.com/munrocket/3d-sdf-font
• Owner: munrocket
• License: mit
• Created: 2021-10-20T19:46:53.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-10-30T19:05:37.000Z (about 3 years ago)
• Last Synced: 2024-10-10T05:35:21.026Z (27 days ago)
• Language: JavaScript
• Homepage:
• Size: 37.1 KB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 3d-sdf-font

Arciform font type sdf generator in glsl

![arciform](https://i.imgur.com/8wdqkK3.jpeg)

### Usage

Creating sdf for text `Hello world!` from console

```sh

npm start Hello\\nworld!

```

In your user script

```js

import { sdf } from '3d-sdf-font';

console.log(sdf('Hello\nworld!'))

```

In browser console

```js

\\ copypaste kerning.js json and assign it to variable kerning

let kerning = { 'a': ... };

\\ copypaste index.js source code without import, export and console.log

let template = (sdf, scale, tx, ty, tz) => { ... }

\\ print result

console.log(sdf('How vexingly\nquick daft\nzebras jump'));

```

### How to add new symbol in font

Create new SDF according to 2pt font letter with origin at left bottom corner in Inskape.

Add new symbol in kerning alphabet in `gen.py` and run `npm run gen` or

```sh

pip3 install pillow

cd kerning

python3 gen.py

```