地に足をつけずに世界を生き抜くブログ

ProcessingでGLSLを書いてみる

ProcessingでもGLSL書けるみたいなので、試しにやってみました。私は別にシェーダー芸人ではないので、GLSLのことはよく分かりません。
ですが、Processing大好き人間なので、できることはなんでもやってみます。

GLSLはじめの一歩

まず、Processingのエディタに以下のコードを書きます。

/*
 * 2019/08/04
 * GLSL
 */

PShader sd;

void setup() {
  size(640, 640, P2D);
  sd = loadShader("FragmentShader.glsl");

  frameRate(24);
}

void draw() {
  final int totalFrames = 24 * 3;
  final float progress = (float)(frameCount - 1) /totalFrames % 1;

  sd.set("time", millis() / 1000.0);
  sd.set("resolution", (float)width, (float)height);
  shader(sd);
  rect(0, 0, width, height);


}

ここで注意することは、size()にP2Dの記述を入れることです。これが無いとエラーが出てしまいます。

loadShader = ()でGLSLファイルを読み込んでいるので、dataフォルダを作って.glslファイルを作成します。
ちなみにProcessingのエディタからはこの拡張子では作れませんので、他のエディタから作成する必要があります。(VS Code, Atom, Bracketsなど)

.glslのファイルには以下のコードを書きます。

uniform vec2 resolution;
uniform float time;

void main() {
    vec2 uv = -7. + 14. * gl_FragCoord.xy / resolution.xy;
    gl_FragColor = vec4(
                        abs( sin( cos( time + 14. * uv.y ) * -3. * uv.x + time)),
                        abs( cos( sin( time + -7. * uv.x ) * 4. * uv.y + time)),
                        1.0,
                        0.24);
}

これでGLSLの最初の一歩を踏み出しました。

2歩目

はじめの一歩が踏み出せたら、GLSLギャラリーにあるコードを自分でも書いてみましょう。http://glslsandbox.com/

このサイトにあるコードをそのまま貼り付けるだけで再現できます。

コメントは受け付けていません。