本稿は「Why use shaders?」ページを翻訳したものです。
パフォーマンス
loadPixels()やset()、updatePixels()を使ったり、p5.jsでピクセル単位の計算をしたことのある方なら、その方法の限界に気づいておられるでしょう。
次のサンプルは、イメージのピクセルの明るさを(マウスからの距離で)変えるという操作を比較するもので、１つはloadPixels()を使い、もう１つはシェーダーを使っています。２つのボタンをクリックすると、パフォーマンスの違いがはっきりと分かります。
この大きな違いは、p5.jsが順番に実行しているのに対し、シェーダーは並列で実行していることによるものです。
視覚的複雑性
ブラウザでの複雑でパフォーマンスに優れたグラフィックスの作成に興味があったり、p5.jsで芸術的可能性を加えたい場合には、シェーダー(とこのガイド)が適しています。
画面のクリックでスタートします。