【Webgl_glsl&Threejs】制作流水效果/毛玻璃效果材质

效果预览

shadertory源码

source： https://www.shadertoy.com/view/lldyDs 

材质代码

import { DoubleSide, ShaderChunk, ShaderMaterial, TextureLoader } from "three";
/**
* 
* source https://www.shadertoy.com/view/lldyDs 
*/


export default function RangeWaterMat(totalLength) {
    const vertex =/* glsl */ `
        ${ShaderChunk.logdepthbuf_pars_vertex}
        bool isPerspectiveMatrix(mat4) {
            return true;
        }

        varying vec2 vUv;

        uniform float uTime;



        void main () {
            vUv = uv;
            // 从贴图中采样颜色值
            vec3 newPosition = normal*vec3(0,0,0)+position;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);

            ${ShaderChunk.logdepthbuf_vertex}
        }
    `;

    // 片元着色器代码
    const fragment =/*glsl */ `
        ${ShaderChunk.logdepthbuf_pars_fragment}
        precision mediump float;
        varying vec2 vUv;
        uniform float uTime;
        uniform sampler2D iChannel0;
        uniform float totalLength;
      
        float T;

        #define pi 3.1415926

        // iq's hash function from https://www.shadertoy.com/view/MslGD8
        vec2 hash( vec2 p ) { p=vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))); return fract(sin(p)*18.5453); }

        float simplegridnoise(vec2 v)
        {
            float s = 1. / 256.;
            vec2 fl = floor(v), fr = fract(v);
            float mindist = 1e9;
            for(int y = -1; y <= 1; y++)
                for(int x = -1; x <= 1; x++)
                {
                    vec2 offset = vec2(x, y);
                    vec2 pos = .5 + .5 * cos(2. * pi * (T*.1 + hash(fl+offset)) + vec2(0,1.6));
                    mindist = min(mindist, length(pos+offset -fr));
                }
            
            return mindist;
        }

        float blobnoise(vec2 v, float s)
        {
            return pow(.5 + .5 * cos(pi * clamp(simplegridnoise(v)*2., 0., 1.)), s);
        }

        vec3 blobnoisenrm(vec2 v, float s)
        {
            vec2 e = vec2(.01,0);
            return normalize(
                vec3(blobnoise(v + e.xy, s) - blobnoise(v -e.xy, s),
                        blobnoise(v + e.yx, s) - blobnoise(v -e.yx, s),
                        1.0));
        }

        float blobnoises(vec2 uv, float s)
        {
            float h = 0.0;
            const float n = 5.0;
            for(float i = 0.0; i < n; i++)
            {
                vec2 p = vec2(0.0, 1.0 * uTime * (i + 1.0) / n) + 1.0 * uv;
                h += pow(0.5 + 0.5 * cos(pi * clamp(simplegridnoise(p * (i + 1.0)) * 2.0, 0.0, 1.0)), s);
            }
            
            return h / n;
        }

        vec3 blobnoisenrms(vec2 uv, float s)
        {
            float d = 0.01;
            return normalize(
                vec3(blobnoises(uv + vec2(  d, 0.0), s) - blobnoises(uv + vec2( -d, 0.0), s),
                        blobnoises(uv + vec2(0.0,   d), s) - blobnoises(uv + vec2(0.0,  -d), s),
                        d));
        }
    
        void main() {


            vec2 uv =(vUv)*.5;
 
            uv = fract(uv*vec2(totalLength,1.0));
            uv.x = abs (.5-uv.x);

            T = .0;

            vec2 r = vec2(2., 2.);
          
            vec3 n = blobnoisenrms(25. * uv*r , 1.);
     
     
            vec4 vision = texture(iChannel0, (uv)*1.25 + 0.05 * n.xy);


            float a = (vision.r+vision.g+vision.b)/3.;


            gl_FragColor =vision;
            gl_FragColor.a = a;
           
            ${ShaderChunk.logdepthbuf_fragment}
        }
    `;




    const tl0 = new TextureLoader()
    const texture0 = tl0.load('static/threeResources/texture/niminoise.png')
    // const texture0 = tl0.load('/shader_book/textures/italy2.png')
    const material = new ShaderMaterial({
        uniforms: {
            uTime: { value: 1.0 },
            totalLength: { value: totalLength },
            iChannel0: { value: texture0, type: 'sample2d' },

        },
        vertexShader: vertex,
        fragmentShader: fragment,
        side: DoubleSide,
        transparent: true,
    });

    return material
}

贴图资源

不一定用这张，可以换点贴图试试，可能做出别的效果（走马灯，石棉，瓷砖等的都可以模拟）