Visual Effects on DOM and Canvas

tags : WebGL, Three.js

概要

DOM 要素や Canvas にビジュアルエフェクトを適用する手法・ライブラリの参考情報。 WebGL シェーダー、SVG フィルターなど、アプローチは問わず収集。 Web ページの既存 HTML 要素にグリッチ、液体歪み、RGB シフトなどの視覚効果を後付けで適用したり、 HTML コンテンツを3D 空間にマッピングするような表現に使える。

参考リンク

HTML to Canvas → Three.js テクスチャ投影

HTML コンテンツを SVG ForeignObject 経由で Canvas にレンダリングし、 それを Three.js の3D シーンにシェーダー経由でテクスチャとして投影する手法。 リアルタイムに HTML の変更が3D オブジェクトに反映される。

パイプライン: HTML → SVG ForeignObject → Canvas → Three.js Projection Material

• デモ: https://cullenwebber.github.io/three-html-to-canvas/
• ソース: https://github.com/cullenwebber/three-html-to-canvas
  • Vite + Three.js で構成。Lenis（スムーススクロールライブラリ）も使用
  • JavaScript 61.6%, HTML 36.6%, CSS 1.8%
• 技術スタック: Three.js, GLSL シェーダー, SVG ForeignObject
• 元ポスト: https://x.com/sinzvii/status/2042903252505936198
  • 50K Views, 1.3K いいね（2026-04-11時点）

VFX-JS / REACT-VFX

DOM 要素（img, video, div, canvas）に WebGL シェーダーエフェクトを適用するライブラリ。 要素を指定してシェーダー名を渡すだけで、グリッチ・RGB シフト・レインボーなどのエフェクトがかかる。 カスタム GLSL シェーダーやマルチパスレンダリングにも対応。

• サイト: https://amagi.dev/vfx-js/
• GitHub: https://github.com/fand/vfx-js (1K stars, MIT)
• npm: @vfx-js/core
• 作者: AMAGI (@amagitakayosi)
• モノレポ構成:
  • @vfx-js/core — バニラJS向けコアライブラリ
  • react-vfx — React コンポーネント版
  • storybook, docs

主な機能:

• 対応要素: <img>, <video>, <div>(実験的), <canvas>

• プリセットシェーダー: glitch, rgbShift, rainbow, halftone, duotone

• トランジション: slitScan, warp, pixelate, focus（viewport進入時にアニメーション）

• カスタムGLSLシェーダー対応（uniform変数でスクロール位置・時間等を渡せる）

• マルチパスシェーダー（ブラー→グロー等のチェーン処理）

• div要素ではinput/textareaもインタラクティブなまま動作

• 元ポスト: https://x.com/amagitakayosi/status/2040948719353552960

• 関連: Shu (@shuding_) がHTML-in-Canvas APIを使わずにDOMにWebGLシェーダーを適用する手法を共有し、AMAGIがVFX-JSとの類似性を指摘した流れ https://x.com/shuding/status/2040446529623015743

liquid-distort

カーソル追従の液体歪みエフェクトを DOM 要素に適用するライブラリ。 WebGL や Canvas オーバーレイを使わず、SVG feDisplacementMap フィルターで実際の DOM を歪ませる。 依存関係ゼロ、9KB (gzipped)。1行のコードで導入可能。

• npm: liquid-distort
• GitHub: https://github.com/kalaanakonda/liquiddistorteverything
• デモ: https://liquiddistorteverything.vercel.app
• 技術: SVG feDisplacementMap + Canvas生成のディスプレイスメントマップ
• フレームワーク非依存（React, Vue, Svelte, バニラJS対応）

歪みモード:

• refract, attract, swirl, ripple, wave

• 形状: circle, ellipse, rect, roundedRect

• 物理シミュレーション（スプリングダイナミクス、減衰）

• トレイル/テイルエフェクト（カーソル軌跡に沿った歪み）

• トリガー: always, hover, click

• 元ポスト: https://x.com/suriadesign/status/2038979405381595174

HTML on Möbius Strip (メビウスの帯へのHTML投影)

HTML をメビウスの帯（Möbius strip）の表面にテクスチャとして投影する実験。 メビウスの帯は一周すると表裏が入れ替わる向き付け不可能面で、 HTML コンテンツがねじれながら連続する視覚効果が生まれる。

想定される技術アプローチ:

• HTML を html2canvas 等でオフスクリーンキャンバスにレンダリング → WebGL テクスチャ化

• メビウスの帯のジオメトリをパラメトリック方程式で生成し UV マッピング

• Three.js の CSS3DRenderer で DOM 要素を3D 空間に配置する手法もあるが、 曲面への完全なマッピングには WebGL シェーダーが必要

• 元ポスト: https://x.com/kaolti/status/2043859499056832836

  • 30.9K Views, 416 いいね（2026-04-14時点）
  • デモリンク共有を予告するフォローアップ: https://x.com/kaolti/status/2043987428692594886

• 作者: Zsolt Kacso (@kaolti) — スタートアップ向けフラクショナル・デザインリード