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

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

パフォーマンス

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

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

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

視覚的複雑性

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA