再利用できるコンポーネントになったWebGPUエフェクト

Shadersというオープンソースプロジェクトが、複数の主要なフロントエンド環境向けのコンポーネントとしてまとめた、200種類を超えるWebGPUの視覚効果のライブラリをウェブ開発者に提供している。10月7日時点の公開リポジトリによると、React、Vue、Svelte、Solid、素のJavaScript、Framerに対応している。

この仕組みは、開発者が毎回ゼロからグラフィックスの処理パイプラインを組み立てるのではなく、コンポーネントの階層構造を使う。最上位のShaderコンポーネントがキャンバスを作成する。その中に入れ子にしたコンポーネントが視覚的なレイヤーとなり、エンジンが順番に評価し、GPU上で合成する。カタログに掲載された各エフェクトにはライブプレビューとプロパティーの説明があり、開発者はページに追加する前に動作を確認できる。

プロジェクトには、shaders.comで利用できるブラウザーベースのデザインエディターも含まれる。無限キャンバス型のインターフェースで、効果を配置し、パラメーターを変更し、値をポインターの動きやタイムラインに結び付けながら結果を確認できる。構成ができあがると、選択したフレームワーク用のコンポーネントツリーを書き出せる。リポジトリによると、アカウントがあればデザインと書き出しは無料で、保存したプロジェクトは後で開き直せる。

エディターからコードベースへ

コマンドラインツールが、ビジュアルエディターとローカルのプロジェクトをつなぐ。使用中のフレームワークを識別し、生成したコンポーネントをプロジェクトのコンポーネント用ディレクトリに書き込み、導入した内容をロックファイルに記録する。ツールをグローバルにインストールする必要はない。このワークフローは、効果をホスティング型エディターの中に閉じ込めず、通常のソースファイルとして利用できるようにすることを目指している。

開発者は独自のシェーダーコンポーネントを定義し、付属カタログにない効果も作成できる。独自定義では、名前、設定可能なプロパティー、各ピクセルを描くための計算を指定する。プロジェクトは、この計算を記述する方法として2つの経路を説明している。実験的な標準プリミティブを組み合わせる方法と、安定版の経路でWebGPU Shading LanguageであるWGSLを直接記述する方法だ。

実装では、コアエンジンを共有パッケージに置き、その下に個々のシェーダーコンポーネントを整理している。対応フレームワーク用のパッケージはこの共通基盤から生成されるため、各連携の差異を減らせる構成となっている。管理者は課題の報告やプルリクエストを歓迎する一方、バグ修正を超える変更については、貢献を提出する前に相談するよう求めている。

このリリースによって、ブラウザーの対応状況、性能上の制約、動きのある表現のアクセシビリティーを理解する必要がなくなるわけではない。それでも、インターフェースを開発するチームには、視覚的な試作から編集可能なアプリケーションコードへと、各フレームワークに沿って移行する道筋ができる。GPUによる描画は、ウェブ開発者になじみのあるコンポーネントモデルの背後で処理される。