🎨 アンチエリアシング効果デモ

❌ アンチエリアシング OFF
✅ アンチエリアシング ON
💡 高倍率（6倍・8倍）でジャギー（階段状のギザギザ）の違いがより明確に見えます

📖 アンチエリアシングとは？

アンチエリアシング（Anti-aliasing）は、CG画像で発生するジャギー（エイリアシング）を減らす技術です。 斜めの線や曲線を描画する際に生じる階段状のギザギザを、周辺ピクセルの色を調整することで滑らかに見せます。

効果： 線や文字がより滑らかで自然に見える
原理： エッジ部分で中間色を使用して視覚的なギザギザを軽減
用途： フォント描画、3Dグラフィックス、画像処理など

🔧 アンチエリアシングの主要な方法

🎯 1. スーパーサンプリング（SSAA - Super Sampling Anti-Aliasing）

原理： 実際の解像度より高い解像度で描画し、その後ダウンサンプリングする
方法： 例えば4倍の解像度で描画後、4ピクセルの平均色を1ピクセルに集約
特徴： 最も高品質だが、計算負荷が非常に大きい
用途： 高品質が要求される映像制作、建築可視化など

🎯 2. マルチサンプリング（MSAA - Multi-Sample Anti-Aliasing）

原理： 各ピクセル内で複数のサンプルポイントを取り、カバレッジを計算
方法： ピクセル内の4点や8点でサンプリングし、図形がカバーする割合で色を決定
特徴： SSAAより軽量で実用的、エッジ部分のみに適用
用途： リアルタイム3Dグラフィックス、ゲーム開発

🎯 3. 時間的アンチエリアシング（TAA - Temporal Anti-Aliasing）

原理： 複数フレームの情報を活用して高品質化
方法： フレーム間でサンプル位置を微調整し、時間軸方向で平均化
特徴： 少ない計算負荷で高品質、動きのあるシーンに適用
用途： 現代のゲームエンジン、リアルタイムレンダリング

🎯 4. フィルタベースAA（FXAA、SMAA等）

原理： 描画後の画像に対してフィルタ処理を適用
方法： エッジ検出後、周辺ピクセルとのブレンディングで滑らか化
特徴： 非常に軽量、既存の描画パイプラインに容易に組み込み可能
用途： モバイルデバイス、低スペック環境での3Dグラフィックス

🎯 5. 解析的アンチエリアシング

原理： 図形の幾何学的情報を利用して数学的に計算
方法： 直線や円などの図形で、ピクセルとの交差面積を解析的に求める
特徴： 非常に高精度、特定の図形に限定される
用途： ベクターグラフィックス、CADソフトウェア、フォント描画

⚙️ 実装技術とコード例

Canvas API での実装

// アンチエリアシングの有効化
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high'; // 'low', 'medium', 'high'

// WebGL での MSAA 有効化
const gl = canvas.getContext('webgl', { antialias: true });

// CSS でのフォントアンチエリアシング
font-smooth: always;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

手動スーパーサンプリングの例

// 4倍解像度で描画後、ダウンサンプリング
const scale = 4;
const highResCanvas = document.createElement('canvas');
highResCanvas.width = originalWidth * scale;
highResCanvas.height = originalHeight * scale;

const highResCtx = highResCanvas.getContext('2d');
highResCtx.scale(scale, scale);
// 高解像度で描画...

// 元のサイズに縮小してアンチエリアシング効果を得る
ctx.drawImage(highResCanvas, 0, 0, originalWidth, originalHeight);

アルゴリズムの比較

品質順： SSAA > MSAA > TAA > 解析的AA > フィルタベースAA
速度順： フィルタベースAA > 解析的AA > TAA > MSAA > SSAA
メモリ使用量： フィルタベースAA < 解析的AA < TAA < MSAA < SSAA