dissolve shader

dissolve shader - jsdo.it
takumifukasawaさんのdissolve shaderを自分なりに調べさせていただいた記事です。

Dissolve 作ってみました。#webgl #threejs pic.twitter.com/IdVUXazLTG
— yukidoke (@snowdoke) 2018年11月18日

<script type="text/v-shader" id="v-shader">    
    varying vec2 vUv;
    attribute vec2 uvs;
    void main(void) {
        vUv = uvs;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
</script>

<script type="text/f-shader" id="f-shader">    
    precision mediump float;  // floatの浮動小数点数の演算精度をすべて中精度で行う
    varying vec2 vUv;  // v-shaderで処理されて渡されるテクスチャ座標
    uniform sampler2D diffuseMap;  // 拡散マップ
    uniform sampler2D heightMap;  // ハイトマップ
    uniform float uTime;  // 経過時間
    uniform float range;  // 範囲
    void main(void) {
        vec4 diffuseColor = texture2D(diffuseMap, vUv);  // 色を取り出す
        vec4 heightColor = texture2D(heightMap, vUv);  // 色を取り出す
        vec4 destColor = diffuseColor;  // 最終的に得られる色

        float height = heightColor.r;  // ハイトカラーのred

        float rate = mod(uTime / range, 1.);  // modは、x-y*floor(x/y)を返す

        if(height < rate) {  // もし、ハイトがレートよりも小さかったら
            discard;  // その画素を画面に描かない
        }

        float offset = rate + .04;  // レートを少し早める
        if(height < offset) {  // もし、ハイトがオフセットよりも小さかったら
            vec4 orange = vec4(254. / 255., 99. / 255., 6. / 255., 1.);  // オレンジ色
            vec4 black = vec4(0., 0., 0., .6);  // 黒色
            float step = smoothstep(0., offset - rate, offset - height);  // smoothstepは、エルミート補完を行う
            destColor = mix(black, orange, step);  // mixは、x(1-a)+y*aを返す
        }

        gl_FragColor = destColor;
    }
</script>

dissolve shaderを読む

dissolve shader