【Webgl_glslThreejs】制作流水效果/毛玻璃效果材质

效果预览

在这里插入图片描述

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/MslGD8vec2 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
}