概要

glslでのマスク方法をまとめています。
glslでのマスクは、ディスタンスフィールドで作ったシェイプを掛けるのが基本になります。

随時追加していきます。

マスク

放射状マスク

？マークなど、主に極座標系の図形の一部を角度を指定して欲しいときに使えます。


const float PI  = 3.141592653589793;
const float PI2 = PI * 2.;

/*
vec2   p 中心の座標
float a1 開始角度(-1.～1.)
float a2 マスクする角度(0.～1.)
*/ 
float maskRadial(vec2 p,float a1,float a2){
  float a = fract(atan(p.y,p.x)/PI2+1.-a1);
  return step(a,a2);
}

使用サンプル(ローディングバー)

範囲マスク

#define between(x,min,max) step(min,x)*step(x,max)

glslデュプリケートでパターンを作るのは簡単だが、そのままでは無限に複製されてしまう。
パターンの回数を指定したいことがある。

その場合は、マスクを併用することでパターンの回数を制限することができる。

もっとも使うと思われるマスク。応用範囲は広い

矩形マスク

図形の一部だけを矩形で抜き出したい時に使う。
正方形・長方形のシェイプを使っても同じ

#define between(x,min,max) step(min,x)*step(x,max)

float maskRect(vec2 p,vec2 p1,vec2 p2){
    return between(p.x,p1.x,p2.x)*between(p.y,p1.y,p2.y);
}

アルファマスク

円形アルファマスク(ビネット)

ディスタンスフィールドの種類によって掛かり方が変わる

 precision mediump float;
 uniform vec2  m;       // mouse
 uniform float t;       // time
 uniform vec2  r;       // resolution
 uniform sampler2D smp; // prev scene

 float pCheckers(vec2 p,float n){vec2 q=p*n;return mod(floor(q.x)+floor(q.y),2.0);}

 void main(void){
    vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y);
    float l = pCheckers(p,5.);
    l*=1.-length(p);
    //l*=1.-dot(p,p);

    gl_FragColor = vec4(vec3(l), 1.0);
 }

length(p)

https://goo.gl/MTEs1E

dot(p,p)

https://goo.gl/P7GRH1

glsl マスクまとめ

概要

マスク