PUB
LIB / CANVAS UI
LIB/ Canvas UI

CANVAS UI
MODULES

Canvas UIのvanilla JavaScriptモジュールを個別に読み込む検証ページ一覧です。ページを開いた時点の初期化結果と、HTMLキャプチャを利用したエフェクトを確認できます。

MODULES 33 TYPE VANILLA JS RENDER WEBGL2

実行環境・設定

各ページはビルド不要の静的HTMLです。HTMLをWebGLへ取り込むエフェクトまで確認する場合は、以下の設定を有効にしてください。

必要な環境

  • HTTP(S)で配信されたページ。file://で直接開かない。
  • WebGL2とハードウェアアクセラレーションが有効な、Chrome / Chromium系ブラウザ。
  • Three.js / OBJECT系デモは、unpkg.comへのネットワーク接続が必要。
  • Node.jsやnpmのインストール、プロジェクトのビルドは不要。

Chrome / Chromiumの設定

  1. chrome://flags/#canvas-draw-element を開く。
  2. Canvas DrawElement を Enabled にする。
  3. 表示された再起動ボタンでブラウザを再起動する。

この設定により、drawElementImage() と requestPaint() を使ったHTMLキャプチャが有効になります。

設定しない場合

WebGL2が利用できればモジュール自体は初期化されますが、HTMLキャプチャに依存するエフェクトは空の入力、フォールバック表示、または一部動作に制限されます。Bendは専用SVG入力テクスチャで確認できます。