webgl及three打造流体效果
代码语言:html
所属分类:三维
代码描述:webgl及three打造流体效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { padding: 0; margin: 0; background: #F6EEE8; } </style> </head> <body translate="no" > <div id="app"></div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.109.js"></script> <script> const vertexShader = ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; const fragShader = ` precision highp float; varying vec2 vUv; uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; uniform sampler2D disp; uniform sampler2D tex1; uniform sampler2D tex2; float random (in vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,708.233))) * 43758.5453123); } float noise (in vec2 st) { vec2 i = floor(st); vec2 f = fract(st); // Four corners in 2D of a tile float a = random(i); float b = random(i + vec2(1.0, 0.0)); float c = random(i + vec2(0.0, 1.0)); float d = random(i + vec2(1.0, 1.0)); // Smooth Interpolation // Cubic Hermine Curve. Same as SmoothStep() vec2 u = f*f*(3.0-2.0*f); // u = smoothstep(0.,1.,f); // Mix 4 coorners percentages .........完整代码请登录后点击上方下载按钮下载查看
网友评论0