【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
}

贴图资源

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

相关推荐
刘皇叔code2 天前
记一次用Three.js展示360°全景图的折腾
webgl·three.js
xhload3d7 天前
场景切换 × 流畅过渡动画实现方案 | 图扑软件
物联网·3d·智慧城市·html5·动画·webgl·数字孪生·可视化·虚拟现实·工业互联网·工控·工业·2d·轻量化·过渡动画
二川bro9 天前
第21节:环境贴图与PBR材质升级——构建电影级真实感渲染
材质·贴图
iloveas201412 天前
three.js+WebGL踩坑经验合集(8.3):合理设置camera.near和camera.far缓解实际场景中的z-fighting叠面问题
webgl
失忆爆表症13 天前
基于 MediaPipe + Three.js 的实时姿态可视化前端
前端·webgl
串串狗xk14 天前
使用 webgl 写的新概念笔记应用《赛博城寨》,在三维开放世界里写笔记
javascript·webgl
刘皇叔code16 天前
Three.js后处理UnrealBloomPass的分析
webgl·three.js
Thomas_YXQ17 天前
Unity3D编辑器扩展-物体批量替换设置材质
游戏·unity·编辑器·游戏引擎·材质
掘金安东尼19 天前
用 WebGL + Solid.js 构建混合材质 Shader
前端·webgl
CG_MAGIC20 天前
主流 3D 模型格式(FBX/OBJ/DAE/GLTF)材质支持与转换操作指南
3d·渲染·动画·材质·贴图·3d 模型格式·材质支持与转换操作指南