Processing + GLSLでボロノイを実装したい

Question

Processingと頂点シェーダー、フラグメントシェーダーを用いて、
Processing側で読み込んだ画像の明度情報に沿って、輪郭線をとるようなボロノイを実装したいと思っております。

Processing単体で完結するようなプログラムのヒントとなるような作例は、検索するといくつか出てくるのですが、
(http://beautifl.net/?id=764　など)
シェーダーを用いたものになると、フラグメントシェーダー単体で書いたものしか見つけることができませんでした。
今回シェーダーを用いたいと思っているのは、Processing単体で完結させるよりも処理が速くなるのでは、と考えたためです。

実装する際の流れとしては、Processingで画像の読み込みと、画像の明度情報からボロノイの元となる点を抽出し、シェーダーに渡してボロノイを描画という流れを想定しているのですが、そもそもこの流れで描画することは可能なのでしょうか？
また、この場合、頂点シェーダーへ頂点情報を送り、そこからフラグメントシェーダーに情報を送ることになるのでしょうか。

シェーダーを勉強し始めたばかりで、特に、頂点シェーダーをどう使うのかいまいちわかっておりません。
Processingの公式リファレンスのshaderページや、the book of shader等を参照して勉強しております。
的外れな質問となっていたら恐縮なのですが、お力添えいただければ幸いです。
また、参考となる資料も添えていただけると大変助かります。
どうぞよろしくお願いいたします。

Answer 1

https://qiita.com/mizumasa/items/887c4e85c688a2b0d5f1

このページをみながらこんな簡単にできるものなのかな・・・と思いつつやってみたのですが、あっけないほどあっさり動きました。

上のページにはほとんど何も説明がなく簡単なサンプルのみが載ってますがそれを見ると

(1) GLSLでシェーダーを記述しておき、それをスケッチの下のdataフォルダーに入れておく
(2) Processing側でloadShaderとするとシェーダーインスタンスができる。
(3) GLSLシェーダーの入力パラメータはuniformで宣言しておき(GLSL言語の仕様)
(4) Processing側からシェーダーインスタンスのsetメソッドでGLSL側のuniform変数へ値を渡す
(5) Processing側でshader(シェーダーインスタンス)とやれば１フレーム分が描画される

シンプルです...

自分はGLSL言語をほぼ知らないので

・vec2同士の距離を求めるには？
・頂点の座標を表すuniform変数をvec2配列にしたとして、Processingでどう渡す？
・繰り返し文はC言語と同じでいいのかな

といった不明点をProcessingのリファレンスとgoogleを頼りに調べ、以下のようなものを書いてみました。なんとなくボロノイっぽいものが描けてるような気がします。

残念ながら任意の長さのvec2配列を渡すという方法がわからず配列長を固定にしてます。

PShader sd;
float[] pts;

void setup() {
  size(600, 600, P2D);
  sd = loadShader("FragmentShader.glsl");
  // 適当に定義した頂点座標
  pts = new float[] {
    10, 30,
    50, 10,
    100, 50,
    50, 150
  }; 
}

void draw() {
  // sd.set("time", millis() / 1E3);
  // sd.set("resolution", width, height);
  sd.set("pts", pts, 2);
  shader(sd);
  rect(0, 0, width, height);
}

data/FragmentShader.glsl

// uniform vec2 resolution; // 今回は不要
// uniform float time;      // 今回は不要
uniform vec2 pts[4];        // ボロノイ図を描くための頂点座標(配列長は固定)

void main() {
  int n = pts.length();
  int min_idx = -1;
  float min_dist = 0.;
  for (int i = 0; i < n; i++) {
    float dist = distance(gl_FragCoord.xy, pts[i]);
    if (i == 0 || dist < min_dist) {
      min_dist = dist;
      min_idx = i;
    }
  }
  float h = float(min_idx) / n;
  float s = 1.;
  float v = 1.;
  vec3 rgb = ((clamp(abs(fract(h + vec3(0, 2, 1) / 3.) * 6. - 3.) - 1., 0., 1.) -1.) * s + 1.) * v;
  gl_FragColor = vec4(rgb.r, rgb.g, rgb.b, 1.);
}

(上の実装はテキトーなので参考程度にご覧ください)

Windows 10 64bit
Processing (64bit) 3.5.3
GPU NVIDIA GeForce

Comments

[doodledoo]

ご回答ありがとうございます。てっきり頂点シェーダーが必要と思っていたのですが、直接フラグメントシェーダーに送れるのですね。どうやら難しく考えすぎていたようです。
いただいたご回答をもとに、勉強してみます。ありがとうございました。

[KSwordOfHaste]

回答に書いたような「3Dモデルを用いず2D的な抽象模様を描く」分にはFragmentShaderのみで充分でしょうが、ProcessingにあるVertexShader的機能(多分それはOpenGL/GLSLを用いて実装されている気がします)を超えたものを作ろうとするならVertexShaderを使うこともできるようです。

PShaderやloadShaderのリファレンスをみるとFragmentShaderのみでもFragmentShader + VertexShaderの両方使うこともできるように見えますので。

[doodledoo]

補足ありがとうございます。
ご回答の中にいただいたコードについて1点質問があるのですが、
processing側からshaderへptsという名前の配列を渡していますが、「sd.set("pts", pts, 2);」で第二引数として2を渡しているのはどういう意図でしょうか？

[KSwordOfHaste]

setのリファレンスを見てそういう使い方をすると解釈したためです。
vec2はfloat要素2つからなる構造で、それを4つ並べた配列として表現する際にこういう書き方ができるのかなと解釈しました。本当ならProcessingにvec2相当のクラスがあって、
pts = new Vec2[] { new Vec2(10, 20), new Vec2(30, 40), ... }
のように書けたら自然と思いますがGLSLのvec2に相当するProcessing側のクラスがあるのかないのかはっきりわかりませんでした。

[doodledoo]

processingのリファレンスに記載がありましたね。大変失礼しました。
重ね重ね、ありがとうございます。