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

效果预览

shadertory源码

复制代码
source: https://www.shadertoy.com/view/lldyDs 

材质代码

javascript 复制代码
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
}

贴图资源

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

相关推荐
庖丁解牛7 小时前
3. Babylonjs 中获取相机方向相关
前端·webgl·游戏开发
康康的幸福生活7 小时前
webgl2 方法解析: createBuffer()
前端·javascript·webgl
康康的幸福生活1 天前
webgl2 方法解析: shaderSource()
webgl
九河_2 天前
【blender】使用bpy对一个obj的不同mesh进行不同的材质贴图(涉及对bmesh的操作)
blender·材质·贴图·bpy
魂断蓝桥6662 天前
如何基于three.js(webgl)引擎架构,实现3D医院、3D园区导航,3D科室路径导航
webgl·数字孪生·threejs·3d定位、三维室内定位、3d建筑·three.js路径规划、三维a*算法、javascript三维导航,·3d医院·3d导航·园区导航
康康的幸福生活11 天前
webgl2 方法解析: SCISSOR_TEST
javascript·webgl
Lud_12 天前
OpenGL ES 中的材质
android·材质·opengl es
魂断蓝桥66613 天前
如何基于three.js(webgl)引擎架构,实现3D机房园区,数据中心消防系统
webgl·数字孪生·three.js·物联网3d·3d机房·、3d工厂、3d工业园区、智慧制造、智慧工业、智慧工厂·bim管理系·3d消防·消防演习模拟
康康的幸福生活15 天前
webgl2 方法解析: colorMask()
webgl
Mapmost15 天前
全新升级!3DTiles加载速度Mapmost完胜Cesium
性能优化·webgl·cesium