オンラインで写真にブラウン管（CRT）の走査線を入れる方法
- 写真をキャンバスにドロップするか、貼り付けるか、クリックして選びます。画像がブラウザの外に出ることはありません。
- CRT Scanlines を選び、ディテール を動かします。上げると走査線が細かく詰まり、下げると太い帯になります。
- PNG を書き出します。アカウント登録もウォーターマークもありません。
CRT エフェクトの仕組み
写真に縞模様を重ねただけでは、縞に見えるだけでテレビには見えません。ブラウン管らしさは 4 つの現象が同時に起きることで生まれます。このフィルターはそれぞれを 1 回のピクセル処理の中で再現しています。
- 走査線。 各行の明るさを、オン／オフの縞ではなくコサイン波で変調します。ブラウン管の行間は「切り替え」ではなく「減衰」だからです。行の明るさは 100% から約 24% の間を行き来するので、暗い線が真っ黒になることはありません。1400px の画像では線の間隔が 2px（ディテール 100）から 9px（ディテール 0）まで変わり、小さい画像では比例して縮みます。
- アパーチャーグリル。 列ごとに赤・緑・青が順に割り当てられ、その列の担当チャンネルを約 20% 持ち上げ、残り 2 つを 5〜8% 下げます。トリニトロン系の画面に顔を近づけたときに見える、細かい RGB の縦縞です。
- 色ズレ。 赤は約 1 ピクセル左、青は約 1 ピクセル右からサンプリングし、緑はその場に残します。くっきりした輪郭の片側に赤、反対側に青のにじみが出ます。古いテレビで VHS を再生したときの、あの色ズレです。
- 蛍光体のブルーム。 明るさが約 3 分の 2 を超えるピクセルだけを発光マップに取り出し、横方向、続いて縦方向にボックスブラーをかけてから、走査線の上に足し戻します。ハイライトが光って暗い線の上まであふれるのはこのためで、ただの模様ではなくブラウン管に見えるかどうかの決め手になります。
| スライダー | 制御する対象 | 実用域 |
|---|---|---|
| ディテール（Detail） | 走査線の間隔 | 70–100 で精細なモニター、20–50 で太いテレビの走査線 |
| 強度（Intensity） | 元画像とのブレンド率 | 90–100 でしっかりブラウン管、50–70 で控えめな重ね |
| コントラスト（Contrast） | 各チャンネルのトーンカーブと、どのハイライトが発光のしきい値を超えるか | 夜景やネオンの写真では上げると発光が強まる |
このフィルターは乱数を使いません。ノイズ、トラッキングの乱れ、画面の湾曲、日付表示は入らず、同じ写真と同じ設定なら必ず同じ 1 枚になります。同じページで使える関連フィルターは 2 つです。Pixel Crush は画面をブロック単位で平均し、各チャンネルを 5 段階に落とすので、低解像度のゲーム機の映像のようになります。Pixel Sort は行方向に画素を引き伸ばし、テープのトラッキングがずれたような横流れを作ります。フィルターは 1 回の処理で重ねられないため、組み合わせるときは PNG を書き出してもう一度ドロップし、最後に CRT Scanlines をかけてください。
すべての処理はブラウザ内の Canvas 2D バッファで完結します。画像がアップロードされることはなく、書き出す PNG は元のサイズのまま（長辺 1400px まで）です。
こんな用途に
- 昔のテレビ風に仕上げた Instagram などの SNS 投稿
- シンセウェイヴ、ヴェイパーウェイヴ、レトロゲーム風のポスター
- アルバムやシングルのジャケット
- ゲームやアプリのスクリーンショットを、ブラウン管に映したように見せる
