verify-pixels について
グラフィックスの変更後も描画ピクセルが維持されているかを確認するテストスキルです。決定論的なフレーム取得、完全一致比較または並べての確認方法、差分の報告手順を案内します。
主な機能
- 01完全一致か視覚比較かを選択
- 02決定論的なフレーム取得
- 03WebGL と WebGPU の出力取得
- 04ベースラインの再現性確認
- 05ピクセル差分の報告
活用シーン
- 01描画変更のテスト
- 02新旧ビルドの比較
- 03指定ポーズでのアニメーション確認
- 04キャプチャ用ハーネスのノイズ検出
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ playcanvas/ skills --skill verify-pixelsインストール後、Claude Code で/verify-pixelsを入力して読み込まれたか確認します。
詳細
ピクセルに変更がないことを証明する
ゲートを選ぶ
- バイト単位で完全一致:変更後もデコードされたデータとシェーディングの計算方法は同じなので、すべてのピクセルが一致する必要があります。
- 並べて確認:変更によってサンプリング値、乱数の順序、精度、または計算を実行する場所が変わります。「バイト単位のゲートでは判定できない」と報告し、各ポーズで変更前と変更後を並べて表示してください。しきい値を勝手に設定しないでください。
フレームを決定的にする
- すべてのアセットを読み込み、ビルド間でカメラ、キャンバスサイズ、ライティング、アニメーション時間を一致させます。偶発的な乱数にはシードを設定します。
- アニメーションシェーダーは、
Date.now()やperformance.now()ではなく、アプリが管理する1つの時間値を基準に動作させます。 app.timeScale = 0にするとdtはゼロになりますが、updateは引き続き実行されます。フレームを数えたり、実時間を読み取ったりする処理は進み続けます。app.autoRender = falseを設定し、各フレームをキャプチャする前にapp.renderNextFrame = trueを設定します。
キャプチャして比較する
- WebGL:
await (device as WebglGraphicsDevice).readPixelsAsync(x, y, w, h, pixels)。WebGPU:RenderTargetにレンダリングし、そのcolorBufferをTexture#read()で読み取ります。色変換や非可逆エンコードは避けてください。 - まず未変更のビルドを2回キャプチャします。キャプチャが完全に一致しない場合、ハーネス自体にノイズがあります。
- 変更箇所すべてを、少なくとも2つのポーズに加え、該当する場合はアニメーションの中間段階でも確認します。
- 「65536ピクセル中、差異は0ピクセル」のように件数を報告するか、差異の件数と発生箇所を報告します。「同じように見える」では結果になりません。
ハーネスのコードは出荷するバンドルに含めず、inspect-runtime を通じて追加してください。
コメント
Markdown 対応