必要な環境
- HTTP(S)で配信されたページ。
file://で直接開かない。 - WebGL2とハードウェアアクセラレーションが有効な、Chrome / Chromium系ブラウザ。
- Three.js / OBJECT系デモは、
unpkg.comへのネットワーク接続が必要。 - Node.jsやnpmのインストール、プロジェクトのビルドは不要。
Canvas UIのvanilla JavaScriptモジュールを個別に読み込む検証ページ一覧です。ページを開いた時点の初期化結果と、HTMLキャプチャを利用したエフェクトを確認できます。
各ページはビルド不要の静的HTMLです。HTMLをWebGLへ取り込むエフェクトまで確認する場合は、以下の設定を有効にしてください。
file://で直接開かない。unpkg.comへのネットワーク接続が必要。chrome://flags/#canvas-draw-element を開く。この設定により、drawElementImage() と requestPaint() を使ったHTMLキャプチャが有効になります。
WebGL2が利用できればモジュール自体は初期化されますが、HTMLキャプチャに依存するエフェクトは空の入力、フォールバック表示、または一部動作に制限されます。Bendは専用SVG入力テクスチャで確認できます。