PC が文字を表示する仕組みを徹底解説

はじめに (対象読者・この記事でわかること)

本記事は、プログラミング初心者からエンジニアリングに興味を持つすべての方を対象にしています。特に「文字が画面に表示されるまでに何が起きているのか」を知りたい人、フォントやテキストレンダリングの内部構造に関心がある人に最適です。この記事を読むと、文字コード・Unicode・フォントファイル・レンダリングエンジン・GPU描画という一連の流れがどのように連携しているかが把握でき、実際に簡単なテキスト描画プログラムを作成できるようになります。背景として、日常的に文字を扱う場面は多いものの、その裏側は意外とブラックボックス化されている点に着目し、技術的な透明性を高めることを目的としています。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

基本的なプログラミング概念（変数、関数、ループなど）
コンピュータがデータをバイナリで扱うことへの理解
OS の概念と、アプリケーションが OS の API を呼び出すイメージ

文字表示の全体像と背景

テキストが画面に表示されるまでには、ハードウェアとソフトウェアが多層にわたって協調します。まず、開発者は文字列をソースコードや入力デバイスから取得し、文字コード（例：UTF‑8）としてメモリ上に保持します。その文字コードは Unicode のコードポイントにマッピングされ、次にフォントファイル（TrueType / OpenType 等）から該当文字のグリフ情報が取得されます。グリフはベクトルデータ（アウトライン）やビットマップデータとして格納されており、これをスケーリングやヒンティングといった加工を経て、最終的にピクセル単位のビットマップに変換します。変換されたビットマップは、描画 API（例：DirectWrite、Core Text、Cairo）を通じて GPU に送られ、レンダリングパイプラインで適切にブレンドされて画面に表示されます。

この一連のプロセスは、文字の見た目を高品質に保ちつつ、様々な解像度や DPI に対応できるよう設計されています。さらに、国際化対応や文字列のレイアウト（左から右、右から左、縦書き）といった複雑な要件も同時に処理されます。

テキストレンダリングの流れと実装手順

以下では、Windows の DirectWrite と OpenGL を例に、実際に「"Hello, 世界!"」という文字列を画面に描画するまでのステップを具体的に解説します。

ステップ1：文字列を Unicode に正規化する

Cpp

std::u16string text = u"Hello, 世界!";

入力は UTF‑8 でも問題ありませんが、DirectWrite の API は UTF‑16（wchar_t）を前提とするため、MultiByteToWideChar で変換します。
正規化（NFC/NFKC）を行うと、合成文字と分解文字の違いを吸収でき、フォントマッチングが安定します。

ステップ2：フォントの選択とフォントファイルのロード

Cpp

IDWriteFactory* pDWriteFactory = nullptr;
DWriteCreateFactory(DWRITE_FACTORY_TYPE_SHARED, __uuidof(IDWriteFactory), reinterpret_cast<IUnknown**>(&pDWriteFactory));

IDWriteFontFamily* pFontFamily = nullptr;
pDWriteFactory->GetSystemFontCollection()->FindFamilyName(L"Consolas", &pFontFamily, nullptr);
IDWriteFont* pFont = nullptr;
pFontFamily->GetFirstMatchingFont(DWRITE_FONT_WEIGHT_NORMAL,
                                 DWRITE_FONT_STRETCH_NORMAL,
                                 DWRITE_FONT_STYLE_NORMAL,
                                 &pFont);

フォントはシステムフォントコレクションから取得するか、独自の .ttf ファイルを IDWriteFontFile で読み込めます。
フォントサイズは DPI に合わせてポイントやピクセルで指定します。

ステップ3：文字列からグリフインデックスへの変換

Cpp

IDWriteTextLayout* pTextLayout = nullptr;
pDWriteFactory->CreateTextLayout(text.c_str(),
                                 static_cast<UINT32>(text.length()),
                                 pFont,
                                 800.0f,   // layout width
                                 200.0f,   // layout height
                                 &pTextLayout);

CreateTextLayout が文字列を解析し、内部で文字 → グリフインデックスへのマッピング、字形位置、行ブレーク情報を生成します。
このオブジェクトから GetGlyphRun 系 API で実際のベクトルデータを取得可能です。

ステップ4：ベクトルデータのラスター化（ビットマップ化）

DirectWrite はハードウェアアクセラレーションを利用し、内部でビットマップを生成しますが、カスタムのアルゴリズムでラスタライズしたい場合は FreeType を併用します。

Cpp

FT_Library ft;
FT_Init_FreeType(&ft);
FT_Face face;
FT_New_Face(ft, "C:/Windows/Fonts/Consolas.ttf", 0, &face);
FT_Set_Pixel_Sizes(face, 0, 48);
FT_Load_Char(face, L'世', FT_LOAD_RENDER);
FT_Bitmap bitmap = face->glyph->bitmap;

ビットマップ (FT_Bitmap) はグレースケールで取得でき、アンチエイリアス済みです。
複数文字の場合は、各文字のビットマップを横に並べてテクスチャとしてまとめます。

ステップ5：GPU にテクスチャとして転送し描画する

Cpp

GLuint texId;
glGenTextures(1, &texId);
glBindTexture(GL_TEXTURE_2D, texId);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, bitmap.width, bitmap.rows,
             0, GL_RED, GL_UNSIGNED_BYTE, bitmap.buffer);

テクスチャはシングルチャンネル（R）で十分です。シェーダ側で vec4(color, color, color, color) に変換し、αブレンドで透明部分を処理します。
頂点シェーダでは文字ごとに四角形（Quad）を配置し、UV 座標でビットマップ領域を貼り付けます。

Glsl

#version 330 core
layout(location = 0) in vec2 aPos;
layout(location = 1) in vec2 aUV;
out vec2 vUV;
void main() {
    gl_Position = vec4(aPos, 0.0, 1.0);
    vUV = aUV;
}

Glsl

#version 330 core
in vec2 vUV;
out vec4 FragColor;
uniform sampler2D uTex;
void main() {
    float alpha = texture(uTex, vUV).r;
    FragColor = vec4(1.0, 1.0, 1.0, alpha);
}

ハマった点やエラー解決

問題 1：Unicode 正規化を忘れたため、合成文字が別字形として扱われた
- 文字列に é（e + アクサン）を含めると、フォントが é と認識せず、代替文字が表示されました。

解決策
- NormalizeString 関数で NFC 正規化を行い、合成文字を単一のコードポイントに統一しました。

Cpp

#include <unicode/unistr.h>
#include <unicode/normalizer2.h>

icu::UnicodeString src = icu::UnicodeString::fromUTF8(text);
const icu::Normalizer2* normalizer = icu::Normalizer2::getNFCInstance(errorCode);
icu::UnicodeString normalized;
normalizer->normalize(src, normalized, errorCode);

問題 2：FreeType のビットマップが上下逆転して表示された
- OpenGL のテクスチャ座標系は左下原点であるのに対し、FreeType は左上原点です。

解決策
- ビットマップ取得後に縦反転処理を行うか、シェーダで 1.0 - vUV.y と座標を反転させました。

Cpp

// ビットマップを縦反転
for (int y = 0; y < bitmap.rows / 2; ++y) {
    std::swap(bitmap.buffer[y * bitmap.pitch],
              bitmap.buffer[(bitmap.rows - 1 - y) * bitmap.pitch]);
}

まとめ

本記事では、PC が文字を画面に表示するまでの全体フローと、具体的な実装手順を 文字コード変換 → フォントマッチング → グリフ取得 → ラスタライズ → GPU 描画 の流れで解説しました。

文字コードと Unicode の役割：入力文字列を統一的に扱う基盤。
フォントファイルとグリフ情報：実際の形状データを提供し、サイズ・解像度に応じたスケーリングを可能にする。
レンダリングパイプライン：CPU と GPU が協調し、ビットマップ化された文字を高速に描画する。

これらを理解すれば、独自のテキスト描画エンジンの構築や、既存ライブラリのカスタマイズが可能になります。次回は「国際化対応のための字形選択アルゴリズム」や「GPU シェーダでのサブピクセルレンダリング」について掘り下げる予定です。

PC が文字を表示する仕組みを徹底解説💻