のぐそんブログ

暗いおじさんがシコシコ書くブログです。

フラグメントシェーダーでグリッチをやりたいけど上手くいかない

グリッチ(glitch)ぽい表現

フラグメントシェーダーを利用して、デジタル表現でよくあるグリッチに挑戦したいと思います。

理想は↓です。ただし私ではこの完成度は無理ですが、まずは挑戦してみます。 https://codepen.io/ykob/pen/GmEzoQ

ランダムなラインをつくる

まずはランダムなラインを作ります。

ホワイトノイズを利用してランダムな線を作成します。

precision mediump float;
varying vec2 vUv;
uniform sampler2D uTex;
uniform float uTime;

//ノイズ生成関数
float random (vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123);
}

void main(){

     float r = random(vec2(u.y * .001)); 
     
     gl_FragColor = vec4(vec3(r),1.0);

}

下記のような絵ができます。

ランダムなラインを動かす

作成したランダムなラインを動かします。 mod関数にuTime(経過時間)を渡しているのは、uTimeをそのまま使うと、徐々にラインの幅が大きくなってしまったので、3.0以上にならないようにしました。

precision mediump float;
varying vec2 vUv;
uniform sampler2D uTex;
uniform float uTime;

//ノイズ生成関数
float random (vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123);
}

void main(){

     float r = random(vec2(u.y * .001, mod(uTime,3.))); 

     
     gl_FragColor = vec4(vec3(r),1.0);

}

UV座標にノイズを加える

最終的にはテクスチャにノイズを加えたいので、UV座標にこれまでに作成いたラインのノイズを適応します。

precision mediump float;
varying vec2 vUv;
uniform sampler2D uTex;
uniform float uTime;

float random (vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123);
}

void main(){
    vec2 u = vUv;
    
    //ノイズを作成
    float r = random(vec2(u.y * .001, mod(uTime,3.))); 
    if (r < 0.1) {
        u.x += r * .1;
    }

    gl_FragColor = texture2D(uTex, u); 
}

色をずらす

グリッチ感をだすにはRGBの座標をノイズに合わせてずらすと良さそうです。

precision mediump float;
varying vec2 vUv;
uniform sampler2D uTex;
uniform float uTime;

float random (vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123);
}

void main(){
    vec2 u = vUv;
    
    //ノイズを作成
    float r = random(vec2(u.y * .001, mod(uTime,5.))); 
    if (r < 0.1) {
        u.x += r * .1;
    }

    if (r < 0.1) {
        gl_FragColor.r += texture2D(uTex, u  + vec2(.01, 0.)).b; 
        gl_FragColor.b += texture2D(uTex, u  - vec2(.01, 0.)).g; 
    }else{
         gl_FragColor = texture2D(uTex, u); 
    }
    
}

少し調整する

ノイズの感じとかを少し調整します。

precision mediump float;
varying vec2 vUv;
uniform sampler2D uTex;
uniform float uTime;

float random (vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123);
}

void main(){

    vec2 u = vUv;
    
    //ノイズを作成
    float r = random(vec2(u.y * .001, mod(uTime * 20.,20.))); 
    if (r < 0.1) {
        u.x += r * .1;
    }

    if (r < 0.1) {
        gl_FragColor.r += texture2D(uTex, u + vec2(.01, 0.)).b; 
        gl_FragColor.b += texture2D(uTex, u - vec2(.01, 0.)).g; 
    }
    else if(r > 0.2 && r < 0.205){
         gl_FragColor = texture2D(uTex, u + vec2(0., 0.2));
    }
    else{
         gl_FragColor = texture2D(uTex, u);
    }
}

まとめ

最終的にはこんな感じになりました。

なんかイマイチです。

参考

ほとんど↓のコードを参考にさせてもらいました。 勿論、vedaのサンプルファイルの方がはるかにかっこいいです。 https://github.com/fand/veda

Variable Font について調べる

Variable Font (バリアブルフォント)とは

アドビとマクロソフト、グーグル、そしてアップルが共同で開発を進めてきたテクノロジー。 1つのフォントで複数の役割を担うフォント。

1つのフォントで複数フォントを表示できるが、ファイルサイズはそれほど大きくはならず、複数フォントを読み込むよりフォントサイズを削減できる。

WEBで利用する際も通信回数が減るためデータの容量も減らせますし、設定できるプロパティの増える。 また、レスポンシブレンダリングという技術が採用されているようで、レスポンシブデザインをフォントまで適応させることができるようになるようです。

続きを読む

Three.jsで画面全体に板ポリゴンを貼る

板ポリゴンを作成して、テクスチャを貼ってみたいと思います。 まずは、画面全体に板ポリゴンを貼ってみたいと思います。

Geometryクラスと、BufferGeometryクラスで少し書き方が異なるみたいだったので、両方書いておきます。

続きを読む

セルフユーザービリティテストのメモ

本日UXDTさん主催の「セルフユーザビリティテスト検定講座」に参加してきました。

Kobito.G5I6CW.png

参加者は30人ほどいて、職種もデザイナーや、エンジニア、セールス、エディタなど職種も様々でした。

はじめは座学でセルフユーザービリティの概要を聞き、最後に実際にワークショップを行いました。

続きを読む

フラグメントシェーダーでモノクロエフェクトするためのメモ

フラグメントシェーダーでモノクロエフェクトをやってみます。 このエフェクトは比較的分かりやすかったです。

下の画像をモノクロ表示してみたいと思います。

続きを読む

Three.jsを使ってuniformsでテクスチャを渡すメモ

Three.jsを使ってテクスチャを読み込むのはとても簡単です。

THREE.jsのテクスチャについて調べる

let textuerLoader = new THREE.TextureLoader();
let mat = new THREE.MeshPhongMaterial();
let geom = new THREE.BoxGeometry(3, 3, 3);

textuerLoader.load('images/n.jpg', function (textuer) {
    mat.map = textuer;
    let mesh = new THREE.Mesh(geom, mat);
    scene.add(mesh);
});

今回はuniform変数としてデータを渡して、テクスチャを表示してみたいと思います。

続きを読む

GLSLでノイズを使うメモ

フラグメントシェーダをつかってのノイズを作成するためのメモです。

続きを読む