[WEB App] Photo Editor v1.1 — WebGLシェーダーによるブラウザ完結型フォトエディタ
![[WEB App] Photo Editor v1.1 — WebGLシェーダーによるブラウザ完結型フォトエディタ](https://assets.lain-lab.com/images/uploads/photo-editor.webp)
Photo Editor
WebGLフラグメントシェーダーで本格的な画像調整をブラウザだけで行えるフォトエディタ。
すべての画像処理はGPU上のGLSLシェーダー1パスで実行。4000×3000ピクセル級の高解像度画像でもスライダー操作の瞬間にリアルタイム反映される。サーバーへの画像アップロードは一切不要で、完全ローカル処理。
Photo Editor
WebGLシェーダーによるブラウザ完結フォトエディタ。トーンカーブ、LUT、フィルムプリセット、クロップ/リサイズ対応。
lain-lab.comスクリーンショット
基本調整（LIGHT / COLOR）
トーンカーブ（TONE CURVE）
フィルムプリセット（Tri-X 400 モノクロ）
クロップ・リサイズ
動画（GIF）
使い方
1. 画像を読み込む
左パネルのドロップエリアに画像をドラッグ＆ドロップするか、クリックしてファイルを選択。中央ビューポートへの直接ドロップにも対応。JPG、PNG、WebP、BMP、GIF に対応。
2. 画像を調整する
右パネルの各セクションで画像を調整する。
- FILM PRESETS — ワンクリックでフィルム風の色調を適用。Portra 400、Velvia 50、Tri-X 400（モノクロ）、Cinematic、Faded、Cool Blue、Warm Glow、High Key の8種類。
- LIGHT — Exposure（露出）、Brightness（明るさ）、Contrast（コントラスト）、Highlights（ハイライト）、Shadows（シャドウ）。
- COLOR — Saturation（彩度）、Temperature（色温度）、Tint（緑/マゼンタ）。
- TONE CURVE — Master / R / G / B チャンネル別のカーブ編集。クリックでポイント追加、ドラッグで移動、ダブルクリックで削除。
- EFFECTS — Vignette（周辺減光）、Grain（フィルム粒子ノイズ）。
- LUT — .cube ファイルを読み込んでカラーグレーディングを適用。Intensityスライダーで強度調整。
各スライダーのラベルをダブルクリックすると、その項目だけ個別にリセットできる。
3. クロップ・リサイズ
左パネルの「CROP」でクロップモードを起動。アスペクト比プリセット（Free / 1:1 / 4:3 / 3:2 / 16:9）を選び、ハンドルをドラッグして範囲を調整。Enter で適用、ESC でキャンセル。
「RESIZE」ではプリセットサイズ（640×480〜3840×2160）またはカスタム入力でリサイズ。アスペクト比ロック対応。
4. Undo / Redo
すべての操作は履歴に記録される。Ctrl+Z で何段でも戻れる。Ctrl+Y で進む。最大50段。
5. プリセット保存
気に入った調整結果を「Save as Preset」で名前を付けて保存。次回以降ワンクリックで呼び出せる。JSON Export/Import で別のブラウザやスマホにも移植可能。
6. エクスポート
「SAVE」ボタンでフル解像度の画像をダウンロード。PNG / JPEG / WebP のフォーマット選択と品質スライダー対応。
ショートカットキー
| キー | 操作 |
|---|---|
Space（長押し） | Before / After 比較（原画を一時表示） |
Ctrl+Z | Undo（元に戻す） |
Ctrl+Y / Ctrl+Shift+Z | Redo（やり直し） |
R / Shift+R | 90° 回転 CW / CCW |
Enter | クロップ確定 |
ESC | クロップキャンセル |
フィルムプリセット一覧
| プリセット | 特徴 |
|---|---|
| Portra 400 | 温かみのある肌色、低コントラスト、シャドウ持ち上げ |
| Velvia 50 | 高彩度・ビビッド、風景向き |
| Tri-X 400 | モノクロ（彩度-100%）、高コントラスト、フィルム粒子 |
| Cinematic | ティール＆オレンジ、ビネット強め |
| Faded | 退色フィルム風、浅いコントラスト、黒浮き |
| Cool Blue | 寒色シフト、青チャンネルカーブ調整 |
| Warm Glow | 暖色、柔らかい光、赤チャンネル持ち上げ |
| High Key | ハイキー、明るく飛ばし気味 |
調整パラメータ
| セクション | パラメータ | 範囲 | 説明 |
|---|---|---|---|
| LIGHT | Exposure | -100〜100 | EV段階の露出補正 |
| LIGHT | Brightness | -100〜100 | 全体の明るさ加算 |
| LIGHT | Contrast | -100〜100 | 中間グレー基準のコントラスト |
| LIGHT | Highlights | -100〜100 | 明部の明るさ調整 |
| LIGHT | Shadows | -100〜100 | 暗部の明るさ調整 |
| COLOR | Saturation | -100〜100 | 彩度（-100でモノクロ） |
| COLOR | Temperature | -100〜100 | 色温度（−で寒色、+で暖色） |
| COLOR | Tint | -100〜100 | 緑/マゼンタバランス |
| EFFECTS | Vignette | 0〜100 | 周辺減光の強度 |
| EFFECTS | Grain | 0〜100 | フィルム粒子ノイズの強度 |
| LUT | Intensity | 0〜100 | LUT適用のブレンド強度 |
技術スタック
- WebGL — フラグメントシェーダーで全画像処理をGPU実行
- GLSL — 1パスシェーダーに10種類の調整＋LUT＋エフェクトを集約
- Canvas 2D — トーンカーブUI描画、クロップオーバーレイ
- Astro — 静的サイト生成、3パネルレイアウト
- localStorage — プリセットの永続化
技術記事
![[Astro] #125 Photo Editor — WebGLシェーダーによるブラウザ完結型フォトエディタを実装](https://assets.lain-lab.com/images/uploads/astro-125-photo-editor.webp)
[Astro] #125 Photo Editor — WebGLシェーダーによるブラウザ完結型フォトエディタを実装
WebGLフラグメントシェーダーで画像調整、RGBトーンカーブ、LUT(.cube)、フィルムプリセット、クロップ/リサイズまでを実装したフォトエディタの技術解説。
lain-lab.com更新履歴
-
[v1.1] (2026-09-09):
- クロップ機能の拡張：幅・高さのエディットボックスによるサイズ直接入力機能を追加（アスペクト比固定時の自動連動計算・画面外補正に対応）
-
[v1.0] (2026-09-05): 初回公開。
- WebGLシェーダーパイプライン（Exposure / Brightness / Contrast / Highlights / Shadows / Saturation / Temperature / Tint）
- RGBトーンカーブ（4チャンネル、Catmull-Romスプライン補間）
- Vignette / Grain エフェクト
- 3D LUT（.cube ファイル読み込み、Intensity調整）
- フィルムプリセット8種（Portra 400 / Velvia 50 / Tri-X 400 / Cinematic / Faded / Cool Blue / Warm Glow / High Key）
- クロップ（アスペクト比プリセット、ドラッグハンドル、三分割ガイド）
- リサイズ（プリセット + カスタム入力、アスペクト比ロック）
- 回転 / 反転（90° CW/CCW、水平/垂直フリップ）
- Undo / Redo（最大50段）
- プリセット保存 / JSON Export / Import
- Before / After 比較（Space長押し）
- エクスポート（PNG / JPEG / WebP、品質調整、フル解像度出力）
- 右パネル折り畳み対応
- ドラッグ＆ドロップ画像読み込み