p5.js shader スタート 2 シェーダーを使う理由

本稿は「Why use shaders?」ページを翻訳したものです。

loadPixels()やset()、updatePixels()を使ったり、p5.jsでピクセル単位の計算をしたことのある方なら、その方法の限界に気づいておられるでしょう。

次のサンプルは、イメージのピクセルの明るさを(マウスからの距離で)変えるという操作を比較するもので、１つはloadPixels()を使い、もう１つはシェーダーを使っています。２つのボタンをクリックすると、パフォーマンスの違いがはっきりと分かります。

この大きな違いは、p5.jsが順番に実行しているのに対し、シェーダーは並列で実行していることによるものです。

ブラウザでの複雑でパフォーマンスに優れたグラフィックスの作成に興味があったり、p5.jsで芸術的可能性を加えたい場合には、シェーダー(とこのガイド)が適しています。

画面のクリックでスタートします。