p5.js のフィルター用シェーダー「createFilterShader()」で Webカメラ画像をそのまま出力（テンプレート的なもの、WebGL 2.0／GLSL ES 3.0）

自分がよく使っている、p5.js のフィルター用シェーダー「createFilterShader()」の話です。

シェーダーで Webカメラ画像を加工する、というのをよくやるのですが、今回は何も加工しないそのまま出力する処理の話です。

何らか、シェーダーによる加工を試す際に、そのベースとして利用するテンプレート的なものを自分用に用意したくなり、今回の内容を書きました。

メインの内容

以下が今回の内容です。
フラグメントシェーダーは、公式サンプルと違って「WebGL 2.0（GLSL ES 3.0）」を使う形にしています。

let s;
let video;

function setup() {
  createCanvas(640, 480);

  pg = createGraphics(width, height, WEBGL);
  pg.noStroke();

  s = pg.createFilterShader(fragSrc);

  video = createCapture(VIDEO);
  video.size(640, 480);
  video.hide();
}

function draw() {
  // background(220);
  pg.clear();

  pg.image(video, -pg.width / 2, -pg.height / 2);
  pg.filter(s);

  image(pg, 0, 0);
}

const fragSrc = `#version 300 es
precision mediump float;

in vec2 vTexCoord;
out vec4 outColor;

uniform sampler2D tex0;

void main() {
  outColor = texture(tex0, vTexCoord);
}
`;

今回はシェーダー上では何も加工しないので、シェーダーの中の処理は「入力内容をそのまま出力する」というものになっています。

【追記】余談

この後に、この記事で扱ったテンプレートを発展させる形で、シェーダーを使った Webカメラ画像へのフィルター適用をやりました（過去にも、何らかフィルター処理をするものは作ったことがありましたが、今回は上記テンプレートを起点にシンプルな構成で作れました）。