炊紙(kashikishi) について

炊紙(kashikishi) is a text editor that utilizes GPU to edit text in a 3D space.

炊紙(かしきし)はGPUを用いて三次元空間中でテキストを編集することができるテキストエディタです。

GitHub の mitoma/kashiki2 上で開発されています。詳細については README.md を見てください。

ShowCase

Technical showcase. This demo use WASM & WebGL.

Click area and edit it!

Usage

• Allow key : move curser.
• Ctrl + 0 : Reset zoom.
• Ctrl + 9: Fit the document’s width to the screen.
• Ctrl + 8: Fit the document’s height to the screen.
• Ctrl + Minus : Zoom out.
• Ctrl + Plus : Zoom in.
• Ctrl + Shift + L : Fit the entire document within the screen.
• Ctrl + Shift + D : Toggle direction. You can switch between vertical and horizontal writing.
• Ctrl + X, Ctrl + D, Ctrl + D : Change Theme. (Soralized Dark)
• Ctrl + X, Ctrl + D, Ctrl + L : Change Theme. (Soralized Light)
• Alt + ←→ : Adjust character spacing.
• Alt + ↑↓ : Adjust line spacing.
• Alt + Shift + ←→ : Adjust char width.
• Alt + Shift + ↑↓ : Adjust char height.
• Some Emacs keybindings can be used, but be careful as they may conflict with browser shortcuts and surprise you. (e.g., Ctrl + w closes the tab)

文字アニメーション画像ジェネレーター

以下のテキストエリアに文章を入力し、各種設定を選択して「Generate」ボタンを押すと Animation PNG が生成されます。

Text

<tate>あしびきの やまどり<wait-500><bs><bs><bs><bs>山鳥の尾の しだり尾の <yoko>ながながし夜を ひとりかも寝む

Settings

Font Enable Local Fonts

Canvas & Ratio Square Square 4:3 Square 3:4 Wide 16:9 Wide 9:16

Theme Solarized Dark Solarized Light High Contrast Dark High Contrast Light Warm Dark Warm Light Cool Dark Cool Light Vivid

Motion Default Poppy Cool Energetic Gentle Minimal

FPS

Transparent Background

Background Image

Articles

　炊紙に関する技術的な記事をまとめる場所です。

GPUを用いたテキスト描画品質の追求

　炊紙というテキストエディタにおける文字列描画アルゴリズムについて手短に説明する。

要旨

　炊紙では Evan Wallace のアルゴリズム（以下既存手法とする）を用いて GPU でフォントをレンダリングする。しかし、既存手法ではアンチエイリアシングはスーパーサンプリングによって行う事になる。スーパサンプリングは、ピクセル毎に求める品質までピクセルを分割して計算することになる。このため、品質要求の高まりに応じて指数的に GPU 負荷が上昇する。 　本記事では解析的アンチエイリアシングを行う事によって、品質に応じて指数的に負荷が上昇する問題を解決する。

Easy Scalable Text Rendering on the GPU

本手法

　既存手法では、全てのグリフは直線と二次ベジエ曲線に近似して描画する。直線と二次ベジエ曲線のアンチエイリアシングは描画領域となる三角形内とその近傍での SDF （符号付きフィールド）をフラグメントシェーダーで求めることでも実現可能である。

　三角形だけでなくその近傍も描画対象にすることで、より品質の高いアンチエイリアシングを得ることができる。これは描画対象となる三角形よりも１ピクセル外側には、ピクセル中心は通らなくてもエッジが含まれるケースがあるためだ。

　１ピクセル分外側をフラグメントシェーダーの計算対象にするには Conservative Rasterization（保守的なラスタライズ）という GPU の機能を用いることで実現できる。

　ただし、Thin Triangle（細長い三角形）は Conservative Rasterization を用いても本来アンチエイリアスの描画対象となるピクセルをフラグメントシェーダーの処理対象にできないケースがある。この問題については現状未解決の課題である。